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

46
app/dashboard/categories/page.tsx
View File

@@ -263,10 +263,10 @@ export default function CategoriesPage() {
>
<div
ref={ref}
className={`group flex items-center p-2 rounded-md transition-all duration-200 border border-transparent
${isEditing ? 'bg-muted/50 border-primary/20' : ''}
${isOver ? 'bg-muted border-primary/20' : 'hover:bg-muted/50 hover:border-border/50'}
${isDragging ? 'opacity-50' : 'opacity-100'}`}
className={`group flex items-center p-3 rounded-xl transition-all duration-200 border mb-2
${isEditing ? 'bg-indigo-500/10 border-indigo-500/30' : ''}
${isOver ? 'bg-indigo-500/20 border-indigo-500/50 scale-[1.02]' : 'bg-black/40 border-white/5 hover:bg-black/60 hover:border-white/10 hover:shadow-lg'}
${isDragging ? 'opacity-30' : 'opacity-100'} backdrop-blur-sm`}
style={{ marginLeft: `${level * 24}px` }}
data-handler-id={handlerId}
>
@@ -384,51 +384,53 @@ export default function CategoriesPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-5 gap-6 lg:gap-8">
{/* Add Category Card */}
<Card className="lg:col-span-2 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm h-fit sticky top-6">
<CardHeader className="bg-muted/20 border-b border-border/40 pb-4">
<CardTitle className="text-lg font-medium flex items-center">
<Plus className="mr-2 h-4 w-4 text-primary" />
<Card className="lg:col-span-2 border-white/10 bg-black/40 backdrop-blur-xl shadow-xl h-fit sticky top-6 rounded-xl overflow-hidden">
<CardHeader className="bg-white/[0.02] border-b border-white/5 pb-4">
<CardTitle className="text-lg font-bold flex items-center text-white">
<div className="p-2 mr-3 rounded-lg bg-indigo-500/10 border border-indigo-500/20">
<Plus className="h-4 w-4 text-indigo-400" />
</div>
Add New Category
</CardTitle>
<CardDescription>
<CardDescription className="text-zinc-400">
Create a new category or subcategory
</CardDescription>
</CardHeader>
<CardContent className="pt-6">
<div className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium leading-none">
<label className="text-sm font-medium leading-none text-zinc-300">
Category Name
</label>
<Input
value={newCategoryName}
onChange={(e) => setNewCategoryName(e.target.value)}
placeholder="e.g. Electronics, Clothing..."
className="h-10 border-border/50 bg-background/50 focus:bg-background transition-colors"
className="h-10 border-white/10 bg-black/20 focus:bg-black/40 transition-colors text-white placeholder:text-zinc-600"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium leading-none">
<label className="text-sm font-medium leading-none text-zinc-300">
Parent Category
</label>
<Select
value={selectedParentId || "none"}
onValueChange={setSelectedParentId}
>
<SelectTrigger className="h-10 border-border/50 bg-background/50 focus:bg-background transition-colors">
<SelectTrigger className="h-10 border-white/10 bg-black/20 focus:bg-black/40 transition-colors text-white">
<SelectValue placeholder="Select parent category" />
</SelectTrigger>
<SelectContent>
<SelectItem value="none">No parent (root category)</SelectItem>
<SelectContent className="bg-zinc-900 border-white/10 text-white">
<SelectItem value="none" className="focus:bg-zinc-800">No parent (root category)</SelectItem>
{categories.map((cat) => (
<SelectItem key={cat._id} value={cat._id}>
<SelectItem key={cat._id} value={cat._id} className="focus:bg-zinc-800">
{cat.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<Button onClick={handleAddCategory} className="w-full mt-2" size="lg">
<Button onClick={handleAddCategory} className="w-full mt-2 bg-indigo-600 hover:bg-indigo-700 text-white border-0" size="lg">
<Plus className="h-4 w-4 mr-2" />
Add Category
</Button>
@@ -437,14 +439,14 @@ export default function CategoriesPage() {
</Card>
{/* Category List Card */}
<Card className="lg:col-span-3 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
<CardHeader className="bg-muted/20 border-b border-border/40 pb-4">
<CardTitle className="text-lg font-medium">Structure</CardTitle>
<CardDescription>
<Card className="lg:col-span-3 border-none bg-transparent shadow-none">
<CardHeader className="pl-0 pt-0 pb-4">
<CardTitle className="text-lg font-bold text-white">Structure</CardTitle>
<CardDescription className="text-zinc-400">
Drag and drop to reorder categories
</CardDescription>
</CardHeader>
<CardContent className="pt-6">
<CardContent className="p-0">
<DndProvider backend={HTML5Backend}>
<div className="space-y-2 min-h-[300px]">
{loading ? (