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

19
components/dashboard/quick-actions.tsx
View File

@@ -164,13 +164,16 @@ export default function QuickActions() {
const isModalAction = action.action === "modal";
const CardContentWrapper = () => (
<Card className="hover:border-primary/50 transition-colors cursor-pointer group h-full border-border/40 bg-background/50 backdrop-blur-sm">
<CardContent className="p-6 flex flex-col items-center text-center">
<div className={`p-3 rounded-xl ${action.color} mb-4 group-hover:scale-110 transition-transform`}>
<Card className="h-full border-none bg-black/40 backdrop-blur-xl hover:bg-black/60 transition-all duration-300 group overflow-hidden relative">
<div className="absolute inset-0 border border-white/10 rounded-xl pointer-events-none group-hover:border-white/20 transition-colors" />
<div className={`absolute inset-0 bg-gradient-to-br ${action.color.split(' ')[0].replace('/10', '/5')} opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />
<CardContent className="p-6 flex flex-col items-center text-center relative z-10">
<div className={`p-4 rounded-2xl ${action.color.replace('bg-', 'bg-opacity-10 bg-')} mb-4 group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-black/20`}>
<action.icon className="h-6 w-6" />
</div>
<h3 className="font-semibold text-lg">{action.title}</h3>
<p className="text-sm text-muted-foreground mt-1">{action.description}</p>
<h3 className="font-bold text-lg text-white group-hover:text-primary transition-colors">{action.title}</h3>
<p className="text-sm text-zinc-400 mt-1">{action.description}</p>
</CardContent>
</Card>
);
@@ -181,15 +184,15 @@ export default function QuickActions() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
whileHover={{ scale: 1.02 }}
whileHover={{ y: -5 }}
whileTap={{ scale: 0.98 }}
>
{isModalAction ? (
<div onClick={() => setModalOpen(true)}>
<div onClick={() => setModalOpen(true)} className="cursor-pointer h-full">
<CardContentWrapper />
</div>
) : (
<Link href={action.href}>
<Link href={action.href} className="h-full block">
<CardContentWrapper />
</Link>
)}