Skip to content

Commit b3f6c6c

Browse files
tsmlukytsmluky
committed
feat(ui): elite glass overhaul for dashboard cards
1 parent 13c08d7 commit b3f6c6c

2 files changed

Lines changed: 41 additions & 37 deletions

File tree

‎web/src/components/dashboard/MetricCard.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,27 @@ interface MetricCardProps {
99
}
1010

1111
export const MetricCard: React.FC<MetricCardProps> = ({ label, value, trend, icon: Icon }) => (
12-
<div className="group relative overflow-hidden rounded-2xl bg-[#020617]/60 backdrop-blur-xl border border-white/5 p-5 shadow-lg transition-all duration-300 hover:border-brand-500/30 hover:shadow-[0_0_20px_-5px_rgba(99,102,241,0.3)] hover:-translate-y-1">
13-
{/* Top Gradient Line (Similar to Sidebar Active) */}
14-
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-brand-500/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
12+
<div className="group relative overflow-hidden rounded-2xl bg-slate-900/40 backdrop-blur-xl border border-white/10 p-5 shadow-2xl transition-all duration-300 hover:border-brand-500/50 hover:shadow-[0_0_30px_-10px_rgba(99,102,241,0.3)] hover:-translate-y-1">
13+
{/* Top Highlight - "Glass Edge" */}
14+
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50 group-hover:via-brand-400/50 group-hover:opacity-100 transition-all duration-500" />
1515

16-
{/* Glow Blob */}
17-
<div className={`absolute -right-6 -top-6 w-24 h-24 rounded-full blur-3xl opacity-10 transition-opacity duration-500 group-hover:opacity-20 ${trend >= 0 ? 'bg-emerald-500' : 'bg-rose-500'}`} />
16+
{/* Deep ambient glow */}
17+
<div className={`absolute -right-10 -top-10 w-40 h-40 rounded-full blur-[60px] opacity-20 transition-all duration-500 group-hover:opacity-30 ${trend >= 0 ? 'bg-emerald-500' : 'bg-rose-500'}`} />
1818

1919
<div className="relative z-10 flex items-start justify-between mb-4">
20-
<div className={`p-2.5 rounded-xl ${trend >= 0 ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'} transition-transform group-hover:scale-110 duration-300`}>
21-
<Icon size={20} strokeWidth={2.5} />
20+
<div className={`p-3 rounded-xl ${trend >= 0 ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 shadow-[0_0_15px_-5px_rgba(16,185,129,0.3)]' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20 shadow-[0_0_15px_-5px_rgba(244,63,94,0.3)]'} transition-transform group-hover:scale-110 duration-300 group-hover:rotate-3`}>
21+
<Icon size={22} strokeWidth={2.5} />
2222
</div>
2323
{trend !== 0 && (
24-
<div className={`flex items-center text-[10px] font-bold px-2 py-0.5 rounded-full border ${trend > 0 ? 'text-emerald-400 border-emerald-500/20 bg-emerald-500/5' : 'text-rose-400 border-rose-500/20 bg-rose-500/5'}`}>
24+
<div className={`flex items-center text-[10px] font-bold px-2 py-1 rounded-full border backdrop-blur-sm ${trend > 0 ? 'text-emerald-300 border-emerald-500/20 bg-emerald-500/10' : 'text-rose-300 border-rose-500/20 bg-rose-500/10'}`}>
2525
{trend > 0 ? '↗' : '↘'} {Math.abs(trend)}%
2626
</div>
2727
)}
2828
</div>
2929

3030
<div className="relative z-10">
31-
<div className="text-[10px] text-slate-400 uppercase font-bold tracking-widest mb-1 group-hover:text-brand-300 transition-colors">{label}</div>
32-
<div className="text-3xl font-black text-white tracking-tight flex items-baseline gap-1 shadow-black drop-shadow-sm">
31+
<div className="text-[11px] text-slate-400 uppercase font-bold tracking-widest mb-1 group-hover:text-brand-200 transition-colors">{label}</div>
32+
<div className="text-3xl font-black text-white tracking-tight flex items-baseline gap-1 drop-shadow-md">
3333
{value}
3434
</div>
3535
</div>

‎web/src/components/dashboard/StrategyCard.tsx‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -30,39 +30,43 @@ export const StrategyCard: React.FC<StrategyCardProps> = ({
3030

3131
return (
3232
<div className={`
33-
glass-card relative overflow-hidden rounded-2xl p-5 transition-all duration-300 group
34-
hover:border-gold-500/30 hover:-translate-y-1
33+
glass-card relative overflow-hidden rounded-2xl p-6 transition-all duration-300 group
34+
hover:border-gold-500/50 hover:shadow-[0_0_40px_-10px_rgba(234,179,8,0.2)] hover:-translate-y-1
35+
bg-slate-900/40 backdrop-blur-xl border border-white/10
3536
`}>
37+
{/* Top Shine */}
38+
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-white/10 to-transparent opacity-100 group-hover:via-gold-400/50 transition-all duration-500" />
39+
3640
{/* Background Glow Effect */}
37-
<div className={`absolute top-0 right-0 w-32 h-32 bg-${isCustom ? 'brand' : 'emerald'}-500/10 blur-3xl rounded-full -mr-16 -mt-16 transition-opacity opacity-40 group-hover:opacity-100`} />
41+
<div className={`absolute top-0 right-0 w-64 h-64 bg-${isCustom ? 'brand' : 'emerald'}-500/5 blur-[80px] rounded-full -mr-20 -mt-20 transition-all duration-500 group-hover:opacity-100 opacity-20`} />
3842

3943
{/* Custom Badge (Corner Position) */}
4044
{isCustom && (
41-
<div className="absolute top-0 right-0 mt-3 mr-3 px-1.5 py-0.5 bg-brand-500 text-white text-[9px] font-bold uppercase tracking-wider rounded shadow-lg z-20">
45+
<div className="absolute top-0 right-0 mt-4 mr-4 px-2 py-1 bg-brand-500 text-white text-[9px] font-bold uppercase tracking-wider rounded-lg shadow-lg shadow-brand-500/30 z-20 ring-1 ring-white/20">
4246
CUSTOM
4347
</div>
4448
)}
4549

46-
<div className="flex justify-between items-start mb-4 relative z-10">
47-
<div className="space-y-2">
50+
<div className="flex justify-between items-start mb-6 relative z-10">
51+
<div className="space-y-3">
4852
{/* Status Pill */}
49-
<div className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[9px] font-bold border uppercase tracking-wider shadow-sm
53+
<div className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold border uppercase tracking-wider shadow-sm backdrop-blur-md
5054
${isActive
51-
? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20 shadow-emerald-500/10'
52-
: 'bg-slate-800 text-slate-400 border-slate-700'
55+
? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20 shadow-[0_0_10px_-3px_rgba(16,185,129,0.3)]'
56+
: 'bg-slate-800/50 text-slate-400 border-slate-700/50'
5357
}
5458
`}>
55-
<div className={`w-1.5 h-1.5 rounded-full ${isActive ? 'bg-emerald-400 animate-pulse' : 'bg-slate-500'}`} />
59+
<div className={`w-1.5 h-1.5 rounded-full ${isActive ? 'bg-emerald-400 animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.8)]' : 'bg-slate-500'}`} />
5660
{status}
5761
</div>
5862

5963
{/* Title & Meta */}
6064
<div>
61-
<h3 className="text-lg font-black text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-gold-300 transition-all leading-tight">
65+
<h3 className="text-xl font-black text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-gold-300 transition-all leading-tight duration-300 drop-shadow-sm">
6266
{name}
6367
</h3>
64-
<div className="flex items-center gap-2 text-slate-500 text-[10px] mt-1.5 font-medium">
65-
<span className="px-1.5 py-0.5 bg-white/5 rounded text-slate-300 border border-white/10">{cleanText(timeframe)}</span>
68+
<div className="flex items-center gap-2 text-slate-500 text-[11px] mt-2 font-medium">
69+
<span className="px-2 py-0.5 bg-white/5 rounded-md text-slate-300 border border-white/10 font-mono">{cleanText(timeframe)}</span>
6670
<span className="text-slate-600">•</span>
6771
<span className="text-slate-400">{cleanText(type)}</span>
6872
</div>
@@ -71,38 +75,38 @@ export const StrategyCard: React.FC<StrategyCardProps> = ({
7175

7276
{/* Type Icon */}
7377
<div className="flex flex-col items-end gap-2">
74-
<div className={`p-2 rounded-xl border transition-colors ${type === 'Trend'
75-
? 'bg-brand-500/10 border-brand-500/20 text-brand-400 group-hover:bg-brand-500/20'
76-
: (type && type.includes('SOL') ? 'bg-brand-500/10 border-brand-500/20 text-brand-400' : 'bg-white/5 border-white/10 text-slate-400')
78+
<div className={`p-3 rounded-2xl border transition-all duration-300 shadow-lg ${type === 'Trend'
79+
? 'bg-brand-500/10 border-brand-500/20 text-brand-400 group-hover:bg-brand-500/20 group-hover:shadow-[0_0_15px_-5px_rgba(99,102,241,0.4)]'
80+
: (type && type.includes('SOL') ? 'bg-brand-500/10 border-brand-500/20 text-brand-400' : 'bg-white/5 border-white/10 text-slate-400 group-hover:border-white/20')
7781
}`}>
78-
{type === 'Trend' || name.includes('Trend') ? <TrendingUp size={18} /> : <Activity size={18} />}
82+
{type === 'Trend' || name.includes('Trend') ? <TrendingUp size={20} strokeWidth={2} /> : <Activity size={20} />}
7983
</div>
8084
</div>
8185
</div>
8286

83-
<p className="text-slate-400/80 text-[11px] mb-5 line-clamp-2 min-h-[2.4em] leading-relaxed font-medium">
87+
<p className="text-slate-400/90 text-xs mb-6 line-clamp-2 min-h-[3em] leading-relaxed font-medium group-hover:text-slate-300 transition-colors">
8488
{description}
8589
</p>
8690

8791
{/* Stats Grid */}
88-
<div className="grid grid-cols-2 gap-2 relative z-10">
89-
<div className="bg-[#020617]/40 rounded-xl p-3 border border-white/5 group-hover:border-white/10 transition-colors relative overflow-hidden backdrop-blur-sm">
92+
<div className="grid grid-cols-2 gap-3 relative z-10">
93+
<div className="bg-[#020617]/30 rounded-xl p-3 border border-white/5 group-hover:border-white/20 transition-all duration-300 overflow-hidden relative group/stat">
9094
<div className="relative z-10">
91-
<div className="text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-0.5 flex items-center gap-1">
92-
<BarChart2 className="w-2.5 h-2.5" /> Win Rate
95+
<div className="text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-1 flex items-center gap-1.5">
96+
<BarChart2 className="w-3 h-3 group-hover/stat:text-brand-400 transition-colors" /> Win Rate
9397
</div>
94-
<div className={`text-xl font-black font-mono tracking-tight ${winRate >= 50 ? 'text-emerald-400' : 'text-slate-200'}`}>
98+
<div className={`text-2xl font-black font-mono tracking-tighter ${winRate >= 50 ? 'text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.3)]' : 'text-slate-200'}`}>
9599
{winRate}%
96100
</div>
97101
</div>
98102
</div>
99103

100-
<div className="bg-[#020617]/40 rounded-xl p-3 border border-white/5 group-hover:border-white/10 transition-colors relative overflow-hidden backdrop-blur-sm">
104+
<div className="bg-[#020617]/30 rounded-xl p-3 border border-white/5 group-hover:border-white/20 transition-all duration-300 overflow-hidden relative group/stat">
101105
<div className="relative z-10">
102-
<div className="text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-0.5 flex items-center gap-1">
103-
<TrendingUp className="w-2.5 h-2.5" /> Total PnL
106+
<div className="text-slate-500 text-[9px] font-bold uppercase tracking-wider mb-1 flex items-center gap-1.5">
107+
<TrendingUp className="w-3 h-3 group-hover/stat:text-gold-400 transition-colors" /> Total PnL
104108
</div>
105-
<div className={`text-xl font-black font-mono tracking-tight ${isProfitable ? 'text-emerald-400' : (pnl < 0 ? 'text-rose-400' : 'text-slate-200')}`}>
109+
<div className={`text-2xl font-black font-mono tracking-tighter ${isProfitable ? 'text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.3)]' : (pnl < 0 ? 'text-rose-400 drop-shadow-[0_0_8px_rgba(244,63,94,0.3)]' : 'text-slate-200')}`}>
106110
{pnl > 0 ? '+' : ''}{pnl}R
107111
</div>
108112
</div>

0 commit comments

Comments
 (0)