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

Update UI styles and dashboard product display
All checks were successful
Build Frontend / build (push) Successful in 1m10s
Details

Browse Source 
Refined color scheme in AnimatedStatsSection to use indigo instead of pink, and improved gradient backgrounds. In dashboard/content.tsx, updated TopProduct price to support arrays and display revenue per product. UnifiedNotifications received minor style and layout adjustments for better consistency and usability.
This commit is contained in:
g
2026-01-12 08:03:19 +00:00
parent 3ffb64cf9a
commit 7ddcd7afb6
4 changed files with 45 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/animated-stats-section.tsx
View File

@@ -20,12 +20,12 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
return (
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
<div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative flex flex-col items-center">
<Package className="h-6 w-6 text-[#D53F8C]" />
<Package className="h-6 w-6 text-indigo-500" />
<div className="mt-4 text-3xl font-bold text-white">
<AnimatedCounter
value={stats.orders.completed}
<AnimatedCounter
value={stats.orders.completed}
duration={2000}
suffix="+"
/>
@@ -38,14 +38,14 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
</p>
</div>
</div>
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
<div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative flex flex-col items-center">
<Users className="h-6 w-6 text-[#D53F8C]" />
<Users className="h-6 w-6 text-indigo-500" />
<div className="mt-4 text-3xl font-bold text-white">
<AnimatedCounter
value={stats.vendors.total}
<AnimatedCounter
value={stats.vendors.total}
duration={2000}
suffix="+"
/>
@@ -58,14 +58,14 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
</p>
</div>
</div>
<div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
<div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative flex flex-col items-center">
<CreditCard className="h-6 w-6 text-[#D53F8C]" />
<CreditCard className="h-6 w-6 text-indigo-500" />
<div className="mt-4 text-3xl font-bold text-white">
<AnimatedCounter
value={stats.transactions.volume}
<AnimatedCounter
value={stats.transactions.volume}
duration={2500}
formatter={formatCurrency}
/>