g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamp dashboard UI with improved dark theme styles
All checks were successful
Build Frontend / build (push) Successful in 1m11s
Details

Browse Source 
Updated category, quick actions, and product table components to use enhanced dark theme styling, including new background colors, borders, gradients, and shadow effects. Improved visual hierarchy, contrast, and hover states for better user experience and consistency across dashboard elements.
This commit is contained in:
g
2026-01-12 08:19:59 +00:00
parent e369741b2d
commit 6997838bf7
3 changed files with 53 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/tables/product-table.tsx
View File

@@ -211,12 +211,14 @@ const ProductTable = ({
return (
<div className="space-y-8">
{/* Enabled Products Table */}
<Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
<CardHeader className="py-4 px-6 border-b border-border/50 bg-muted/30">
<CardTitle className="text-lg font-medium flex items-center gap-2">
<CheckCircle className="h-5 w-5 text-primary" />
<Card className="border-white/10 bg-black/40 backdrop-blur-xl shadow-2xl overflow-hidden rounded-xl">
<CardHeader className="py-4 px-6 border-b border-white/5 bg-white/[0.02]">
<CardTitle className="text-lg font-bold flex items-center gap-3 text-white">
<div className="p-2 rounded-lg bg-indigo-500/10 border border-indigo-500/20">
<CheckCircle className="h-5 w-5 text-indigo-400" />
</div>
Active Products
<Badge variant="secondary" className="ml-2 bg-background/80 backdrop-blur-sm">
<Badge variant="secondary" className="ml-2 bg-indigo-500/10 text-indigo-300 border-indigo-500/20 hover:bg-indigo-500/20">
{sortedEnabledProducts.length}
</Badge>
</CardTitle>
@@ -226,11 +228,14 @@ const ProductTable = ({
<Table>
{renderTableHeader()}
<TableBody>
<AnimatePresence mode="popLayout">
<AnimatePresence>
{loading ? (
<TableRow>
<TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
Loading products...
<div className="flex flex-col items-center gap-2">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent" />
<span>Loading products...</span>
</div>
</TableCell>
</TableRow>
) : sortedEnabledProducts.length > 0 ? (
@@ -239,7 +244,7 @@ const ProductTable = ({
<TableRow>
<TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
<div className="flex flex-col items-center justify-center gap-2">
<PackageX className="h-8 w-8 opacity-50" />
<PackageX className="h-8 w-8 opacity-20" />
<p>No active products found</p>
</div>
</TableCell>
@@ -254,12 +259,12 @@ const ProductTable = ({
{/* Disabled Products Section */}
{!loading && disabledProducts.length > 0 && (
<Card className="border-border/40 bg-background/30 backdrop-blur-sm shadow-sm overflow-hidden opacity-90">
<CardHeader className="py-4 px-6 border-b border-border/50 bg-muted/20">
<CardTitle className="text-lg font-medium flex items-center gap-2 text-muted-foreground">
<Card className="border-white/5 bg-black/20 backdrop-blur-sm shadow-none overflow-hidden opacity-80 hover:opacity-100 transition-opacity">
<CardHeader className="py-4 px-6 border-b border-white/5 bg-white/[0.01]">
<CardTitle className="text-lg font-medium flex items-center gap-2 text-zinc-400">
<Archive className="h-5 w-5" />
Archived / Disabled
<Badge variant="outline" className="ml-2">
<Badge variant="outline" className="ml-2 border-white/10 text-zinc-500">
{sortedDisabledProducts.length}
</Badge>
</CardTitle>
@@ -269,7 +274,7 @@ const ProductTable = ({
<Table>
{renderTableHeader()}
<TableBody>
<AnimatePresence mode="popLayout">
<AnimatePresence>
{sortedDisabledProducts.map((product, index) =>
renderProductRow(product, index, true),
)}