style(frontend): refactor ExportPanel for DESIGN.md compliance
- Replaced hardcoded colors with 'level-1' and 'btn-primary' - Removed indigo accents in favor of primary orange - Ensured sharp corners and consistent borders
This commit is contained in:
@@ -29,9 +29,9 @@ export function ExportPanel() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div data-testid="admin-tab-exports" className="bg-surface/50 border border-border/50 rounded-none p-4 md:p-6 flex flex-col shadow-none transition-all h-full">
|
||||
<div data-testid="admin-tab-exports" className="level-1 p-4 md:p-6 flex flex-col h-full">
|
||||
<div className="flex items-center gap-3 mb-4 md:mb-6">
|
||||
<div className="w-10 h-10 rounded-none bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
|
||||
<div className="w-10 h-10 bg-black flex items-center justify-center text-primary border border-border">
|
||||
<FileDown size={20} />
|
||||
</div>
|
||||
<div>
|
||||
@@ -42,7 +42,7 @@ export function ExportPanel() {
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{/* Inventory Snapshot Section */}
|
||||
<div className="p-4 bg-background/40 border border-border/40 rounded-none hover:border-primary/20 transition-all group flex flex-col justify-between">
|
||||
<div className="p-4 border border-border hover:border-primary/20 transition-all group flex flex-col justify-between">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-sm font-normal text-secondary flex items-center gap-2">
|
||||
<FileSpreadsheet size={14} className="text-primary" />
|
||||
@@ -57,7 +57,7 @@ export function ExportPanel() {
|
||||
<button
|
||||
onClick={() => handleExportSnapshot("csv")}
|
||||
disabled={isLoading}
|
||||
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-none text-sm font-normal transition-all active:scale-95 shadow-none shadow-none tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
className="btn-primary text-sm px-5 py-1.5 disabled:opacity-50"
|
||||
aria-label="Export inventory snapshot as CSV"
|
||||
>
|
||||
{isLoading ? <Loader2 size={14} className="animate-spin" /> : <FileText size={14} />}
|
||||
@@ -66,7 +66,7 @@ export function ExportPanel() {
|
||||
<button
|
||||
onClick={() => handleExportSnapshot("xlsx")}
|
||||
disabled={isLoading}
|
||||
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-none text-sm font-normal transition-all active:scale-95 shadow-none shadow-none tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
className="btn-primary text-sm px-5 py-1.5 disabled:opacity-50"
|
||||
aria-label="Export inventory snapshot as Excel"
|
||||
>
|
||||
{isLoading ? <Loader2 size={14} className="animate-spin" /> : <FileSpreadsheet size={14} />}
|
||||
@@ -76,10 +76,10 @@ export function ExportPanel() {
|
||||
</div>
|
||||
|
||||
{/* Audit Trail Section */}
|
||||
<div className="p-4 bg-background/40 border border-border/40 rounded-none hover:border-primary/20 transition-all group flex flex-col justify-between">
|
||||
<div className="p-4 border border-border hover:border-primary/20 transition-all group flex flex-col justify-between">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-sm font-normal text-secondary flex items-center gap-2">
|
||||
<FileText size={14} className="text-indigo-400" />
|
||||
<FileText size={14} className="text-primary" />
|
||||
Audit Trail
|
||||
</h3>
|
||||
<p className="text-xs text-muted mt-1 leading-relaxed">
|
||||
@@ -90,7 +90,7 @@ export function ExportPanel() {
|
||||
<button
|
||||
onClick={() => handleExportAuditTrail("csv")}
|
||||
disabled={isLoading}
|
||||
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-none text-sm font-normal transition-all active:scale-95 shadow-none shadow-none tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
className="btn-primary text-sm px-5 py-1.5 disabled:opacity-50"
|
||||
aria-label="Export audit trail as CSV"
|
||||
>
|
||||
{isLoading ? <Loader2 size={14} className="animate-spin" /> : <FileText size={14} />}
|
||||
@@ -99,7 +99,7 @@ export function ExportPanel() {
|
||||
<button
|
||||
onClick={() => handleExportAuditTrail("xlsx")}
|
||||
disabled={isLoading}
|
||||
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-none text-sm font-normal transition-all active:scale-95 shadow-none shadow-none tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
className="btn-primary text-sm px-5 py-1.5 disabled:opacity-50"
|
||||
aria-label="Export audit trail as Excel"
|
||||
>
|
||||
{isLoading ? <Loader2 size={14} className="animate-spin" /> : <FileSpreadsheet size={14} />}
|
||||
@@ -110,8 +110,8 @@ export function ExportPanel() {
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 p-3 bg-rose-500/10 border border-rose-500/20 rounded-none text-rose-500 text-[10px] flex items-center gap-2 animate-in slide-in-from-top-2 duration-300">
|
||||
<div className="w-1.5 h-1.5 bg-rose-500 rounded-none animate-pulse" />
|
||||
<div className="mt-4 p-3 bg-rose-500/10 border border-rose-500/20 text-rose-500 text-[10px] flex items-center gap-2 animate-in slide-in-from-top-2 duration-300">
|
||||
<div className="w-1.5 h-1.5 bg-rose-500 animate-pulse" />
|
||||
<span className="font-normal truncate">Error: {error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user