Skip to content

Commit 300b269

Browse files
Alexisclaude
Alexis
and
claude
committed
feat(dashboard-next): apply Cursor AI/xAI theme + animated fee token hero card
- Update Tailwind config: electric cyan primary, neon green, purple/magenta, amber - Add keyframes: blinkOrange, blinkGreen, heroCardGlow, rotateBorder - FlywheelCard: orange pulse on liquidity dot, green pulse on fees dot, green glowing arrow, cyan fee badge, purple fees token panel - PumpCard: animated rotating gradient border (purple->cyan->green->purple) pulsing heroCardGlow animation, purple color scheme as page highlight - PoolCard: cyan glow border + inset shadow when fee data is present, fee/day text with cyan text-shadow - globals.css: wallet adapter colors updated, fee-hero-border CSS class Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
1 parent 0456dc4 commit 300b269

5 files changed

Lines changed: 118 additions & 61 deletions

File tree

‎dashboard-next/app/globals.css‎

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,61 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
/* Wallet adapter modal override — noir theme */
5+
/* Wallet adapter modal override */
66
.wallet-adapter-modal-wrapper {
7-
background: #0f0f0f !important;
8-
border: 1px solid #1c1c1c !important;
7+
background: #121218 !important;
8+
border: 1px solid #242430 !important;
99
}
1010
.wallet-adapter-button {
1111
background: transparent !important;
12-
border: 1px solid #1c1c1c !important;
13-
color: #ececec !important;
12+
border: 1px solid #242430 !important;
13+
color: #f0f0f7 !important;
1414
font-family: 'SF Mono', 'Fira Code', monospace !important;
1515
font-size: 11px !important;
1616
}
1717
.wallet-adapter-button:hover {
18-
border-color: #b8934a !important;
18+
border-color: #00dcff !important;
1919
}
2020
.wallet-adapter-modal-title {
21-
color: #ececec !important;
21+
color: #f0f0f7 !important;
2222
}
2323
.wallet-adapter-modal-list li {
24-
background: #0f0f0f !important;
24+
background: #121218 !important;
2525
}
2626

2727
/* Scrollbar */
2828
::-webkit-scrollbar { width: 4px; height: 4px; }
29-
::-webkit-scrollbar-track { background: #080808; }
30-
::-webkit-scrollbar-thumb { background: #1c1c1c; border-radius: 2px; }
31-
::-webkit-scrollbar-thumb:hover { background: #b8934a; }
29+
::-webkit-scrollbar-track { background: #0a0a0f; }
30+
::-webkit-scrollbar-thumb { background: #242430; border-radius: 2px; }
31+
::-webkit-scrollbar-thumb:hover { background: #00dcff; }
32+
33+
/* Animated rotating gradient border for fee token hero card */
34+
@keyframes rotateBorder {
35+
0% { background-position: 0% 50%; }
36+
50% { background-position: 100% 50%; }
37+
100% { background-position: 0% 50%; }
38+
}
39+
40+
.fee-hero-border {
41+
position: relative;
42+
border: 2px solid transparent;
43+
background-clip: padding-box;
44+
}
45+
46+
.fee-hero-border::before {
47+
content: '';
48+
position: absolute;
49+
inset: -2px;
50+
border-radius: inherit;
51+
padding: 2px;
52+
background: linear-gradient(90deg, #b844ff, #00dcff, #00ff88, #b844ff);
53+
background-size: 300% 300%;
54+
animation: rotateBorder 3s linear infinite;
55+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
56+
-webkit-mask-composite: xor;
57+
mask-composite: exclude;
58+
pointer-events: none;
59+
}
3260

3361
/* Film grain texture */
3462
body::before {

‎dashboard-next/components/cards/FlywheelCard.tsx‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ export function FlywheelCard() {
4747

4848
return (
4949
<div className="bg-bg-card border rounded-xl p-4 mb-3 relative overflow-hidden"
50-
style={{ borderColor: 'rgba(184,147,74,0.25)', boxShadow: '0 0 32px rgba(184,147,74,0.07)' }}>
50+
style={{ borderColor: 'rgba(0,220,255,0.2)', boxShadow: '0 0 32px rgba(0,220,255,0.08)' }}>
5151
{/* gradient overlay */}
5252
<div className="absolute inset-0 pointer-events-none"
53-
style={{ background: 'linear-gradient(135deg, rgba(184,147,74,0.05) 0%, rgba(184,147,74,0.03) 100%)' }} />
53+
style={{ background: 'linear-gradient(135deg, rgba(0,220,255,0.04) 0%, rgba(0,220,255,0.01) 100%)' }} />
5454

5555
{/* header */}
5656
<div className="flex items-center justify-between mb-4 relative">
@@ -69,7 +69,8 @@ export function FlywheelCard() {
6969
<div className="text-[11px] font-semibold flex items-center gap-1">
7070
REDACTED
7171
<span className="text-[9px] text-text-muted bg-bg-primary border border-border px-1 py-0.5 rounded">liquidity</span>
72-
<VolDot vol={v1Vol24h} />
72+
{/* orange blinking dot for liquidity */}
73+
<span className="inline-block rounded-full ml-1 align-middle animate-blinkOrange" style={{ width: 7, height: 7 }} />
7374
</div>
7475
<div className="text-[8px] text-text-muted mt-0.5">9a21gb7f…KgnM</div>
7576
</div>
@@ -83,43 +84,46 @@ export function FlywheelCard() {
8384
</div>
8485

8586
{/* Flow arrow */}
86-
<div className="flex flex-col items-center gap-1.5">
87-
{/* vol badge */}
88-
<div className="bg-white/[0.03] border border-border rounded-md px-2 py-1 text-center mb-1">
89-
<div className="text-[12px] font-bold text-text-primary">{fmt(v1Vol24h)}</div>
87+
<div className="flex flex-col items-center gap-2 px-3">
88+
{/* vol badge — orange indicator */}
89+
<div className="relative bg-white/[0.03] border border-border rounded-md px-2.5 py-1.5 text-center">
90+
<span className="absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full animate-blinkOrange" />
91+
<div className="text-[13px] font-bold text-text-primary">{fmt(v1Vol24h)}</div>
9092
<div className="text-[8px] text-text-muted mt-0.5">24H Vol</div>
9193
</div>
92-
{/* fee badge */}
93-
<div className="rounded-md px-2 py-1 text-center"
94-
style={{ background: 'rgba(184,147,74,0.1)', border: '1px solid rgba(184,147,74,0.2)' }}>
95-
<div className="text-[13px] font-bold text-accent">{fmt(fees24h)}</div>
94+
{/* fee badge — green indicator */}
95+
<div className="relative rounded-md px-2.5 py-1.5 text-center"
96+
style={{ background: 'rgba(0,220,255,0.08)', border: '1px solid rgba(0,220,255,0.25)' }}>
97+
<span className="absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full animate-blinkGreen" />
98+
<div className="text-[14px] font-bold text-accent">{fmt(fees24h)}</div>
9699
<div className="text-[8px] text-text-muted mt-0.5">fees / day</div>
97100
</div>
98-
{/* animated arrow */}
99-
<div className="relative flex flex-col items-center" style={{ width: 28, height: 44 }}>
100-
<div className="relative overflow-hidden rounded-sm" style={{ width: 2, height: '100%', background: 'rgba(255,255,255,0.06)' }}>
101-
<div className="absolute left-0 w-0.5 h-[40%] animate-flowDown rounded-sm"
102-
style={{ background: 'linear-gradient(to bottom, transparent, #b8934a, #d4aa62)' }} />
101+
{/* animated arrow — green */}
102+
<div className="relative flex flex-col items-center" style={{ width: 36, height: 52 }}>
103+
<div className="relative overflow-hidden rounded-sm" style={{ width: 2, height: '100%', background: 'rgba(255,255,255,0.08)' }}>
104+
<div className="absolute animate-flowDown rounded-sm"
105+
style={{ left: -1, width: 4, height: '45%', background: 'linear-gradient(to bottom, transparent, rgba(0,220,255,0.9), rgba(0,220,255,0.4))', boxShadow: '0 0 12px rgba(0,220,255,0.7)' }} />
103106
</div>
104107
<div className="mt-0.5 animate-arrowPulse"
105-
style={{ width: 0, height: 0, borderLeft: '5px solid transparent', borderRight: '5px solid transparent', borderTop: '7px solid #b8934a' }} />
108+
style={{ width: 0, height: 0, borderLeft: '6px solid transparent', borderRight: '6px solid transparent', borderTop: '8px solid #00ff88', filter: 'drop-shadow(0 0 4px rgba(0,255,136,0.8))' }} />
106109
</div>
107-
<div className="text-[8px] text-text-muted text-center">buys REDACTED</div>
110+
<div className="text-[9px] font-medium text-text-secondary text-center">buys REDACTED</div>
108111
{v2BuyPressure != null && (
109112
<div className="text-[9px] text-accent text-center">{fmtNum(v2BuyPressure)}<br />tokens/day</div>
110113
)}
111114
</div>
112115

113-
{/* Pump / fees token */}
116+
{/* Pump / fees token — purple highlight */}
114117
<div className="rounded-lg p-3"
115-
style={{ border: '1px solid rgba(184,147,74,0.3)', background: 'rgba(184,147,74,0.04)' }}>
118+
style={{ border: '1px solid rgba(184,68,255,0.35)', background: 'rgba(184,68,255,0.05)', boxShadow: '0 0 16px rgba(184,68,255,0.1)' }}>
116119
<div className="flex items-center gap-2 mb-3">
117120
<TokenIcon url={v2Data.image_url} size={36} />
118121
<div>
119-
<div className="text-[13px] font-semibold text-accent flex items-center gap-1">
122+
<div className="text-[13px] font-semibold flex items-center gap-1" style={{ color: '#b844ff' }}>
120123
REDACTED
121124
<span className="text-[9px] text-text-muted bg-bg-primary border border-border px-1 py-0.5 rounded">fees</span>
122-
<VolDot vol={v2Vol24h} />
125+
{/* green blinking dot for fees token */}
126+
<span className="inline-block rounded-full ml-1 align-middle animate-blinkGreen" style={{ width: 7, height: 7 }} />
123127
</div>
124128
<div className="text-[8px] text-text-muted mt-0.5">9mtKd1o8…pump</div>
125129
</div>
@@ -132,7 +136,7 @@ export function FlywheelCard() {
132136
].map(([l, v]) => (
133137
<div key={String(l)} className="flex justify-between items-baseline mb-1">
134138
<span className="text-[9px] text-text-muted">{l}</span>
135-
<span className="text-[13px] font-semibold text-accent">{v}</span>
139+
<span className="text-[13px] font-semibold" style={{ color: '#b844ff' }}>{v}</span>
136140
</div>
137141
))}
138142
</div>

‎dashboard-next/components/cards/PumpCard.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,22 +22,22 @@ export function PumpCard() {
2222
]
2323

2424
return (
25-
<div className="bg-bg-card border rounded-xl p-4 mb-3"
26-
style={{ borderColor: 'rgba(184,147,74,0.2)', boxShadow: '0 0 20px rgba(184,147,74,0.06)' }}>
25+
<div className="fee-hero-border rounded-xl p-4 mb-3 animate-heroCardGlow"
26+
style={{ background: 'linear-gradient(135deg, rgba(184,68,255,0.06), rgba(184,68,255,0.02))' }}>
2727
{/* top row */}
2828
<div className="flex items-center gap-3 mb-4">
2929
<div className="w-9 h-9 rounded-full overflow-hidden flex-shrink-0 flex items-center justify-center"
30-
style={{ background: 'rgba(184,147,74,0.12)' }}>
30+
style={{ background: 'rgba(184,68,255,0.15)' }}>
3131
<TokenIcon url={v2Data.image_url} size={36} />
3232
</div>
3333
<div>
34-
<div className="text-sm font-bold text-accent leading-tight">
34+
<div className="text-sm font-bold leading-tight" style={{ color: '#b844ff' }}>
3535
REDACTED <span className="text-[10px] font-normal text-text-muted">fees token</span>
3636
</div>
3737
<div className="text-[9px] text-text-muted mt-0.5">9mtKd1o8…pump</div>
3838
</div>
3939
<div className="ml-auto text-right">
40-
<div className="text-lg font-bold text-accent">{priceStr}</div>
40+
<div className="text-lg font-bold" style={{ color: '#b844ff' }}>{priceStr}</div>
4141
<div className={`text-[10px] mt-0.5 ${pctClass(ch24)}`}>{fmtPct(ch24)} 24h</div>
4242
</div>
4343
</div>
@@ -46,7 +46,7 @@ export function PumpCard() {
4646
<div className="grid grid-cols-3 gap-2">
4747
{stats.map(({ label, value, cls }) => (
4848
<div key={label} className="rounded-lg px-2.5 py-2"
49-
style={{ background: 'rgba(184,147,74,0.03)', border: '1px solid rgba(184,147,74,0.08)' }}>
49+
style={{ background: 'rgba(184,68,255,0.04)', border: '1px solid rgba(184,68,255,0.12)' }}>
5050
<div className="text-[9px] text-text-muted uppercase tracking-wide mb-1">{label}</div>
5151
<div className={`text-[13px] font-semibold ${cls ?? 'text-text-primary'}`}>{value}</div>
5252
</div>

‎dashboard-next/components/pools/PoolCard.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,13 @@ export function PoolCard({ pool, feeRates, pinned, pinnedLabel }: PoolCardProps)
2626
: feeLabel === 'MID' ? 'text-text-secondary border-border bg-bg-primary'
2727
: 'text-text-muted border-border bg-bg-primary'
2828

29+
const hasFees = fees24h != null
30+
2931
return (
30-
<div className={`bg-bg-card border rounded-xl p-4 transition-colors hover:border-accent/30 ${pinned ? 'border-accent/20' : 'border-border'}`}>
32+
<div className={`bg-bg-card rounded-xl p-4 transition-all hover:border-accent/50 ${
33+
pinned ? 'border-2' : 'border'
34+
} ${hasFees ? 'border-accent/30' : 'border-border'}`}
35+
style={hasFees ? { boxShadow: '0 0 16px rgba(0,220,255,0.1), inset 0 0 12px rgba(0,220,255,0.03)' } : {}}>
3136
{pinned && pinnedLabel && (
3237
<div className="text-[8px] text-accent uppercase tracking-widest mb-2">{pinnedLabel}</div>
3338
)}
@@ -62,7 +67,10 @@ export function PoolCard({ pool, feeRates, pinned, pinnedLabel }: PoolCardProps)
6267
<div className="h-full rounded-full" style={{ width: `${buyPct}%`, background: buyPressureColor(buyPct) }} />
6368
</div>
6469
{fees24h != null && (
65-
<span className="text-[10px] text-accent">{fmt(fees24h)}/day</span>
70+
<span className="text-[11px] font-semibold text-accent"
71+
style={{ textShadow: '0 0 8px rgba(0,220,255,0.5)' }}>
72+
{fmt(fees24h)}/day
73+
</span>
6674
)}
6775
</div>
6876
</div>

‎dashboard-next/tailwind.config.ts‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,28 @@ const config: Config = {
1111
extend: {
1212
colors: {
1313
bg: {
14-
primary: '#080808',
15-
card: '#0f0f0f',
16-
hover: '#161616',
14+
primary: '#0a0a0f',
15+
card: '#121218',
16+
hover: '#1a1a22',
1717
},
1818
border: {
19-
DEFAULT: '#1c1c1c',
20-
glow: 'rgba(184,147,74,0.25)',
19+
DEFAULT: '#242430',
20+
glow: 'rgba(0,220,255,0.15)',
2121
},
2222
text: {
23-
primary: '#ececec',
24-
secondary: '#888888',
25-
muted: '#444444',
23+
primary: '#f0f0f7',
24+
secondary: '#a0a0b0',
25+
muted: '#606070',
2626
},
2727
accent: {
28-
DEFAULT: '#b8934a',
29-
bright: '#d4aa62',
30-
dim: 'rgba(184,147,74,0.1)',
28+
DEFAULT: '#00dcff',
29+
bright: '#00ffff',
30+
dim: 'rgba(0,220,255,0.12)',
3131
},
32-
pos: '#4a9e6b',
33-
neg: '#a85050',
32+
purple: '#b844ff',
33+
amber: '#ff9d00',
34+
pos: '#00ff88',
35+
neg: '#ff4444',
3436
},
3537
fontFamily: {
3638
mono: ['SF Mono', 'Fira Code', 'Cascadia Code', 'monospace'],
@@ -42,28 +44,43 @@ const config: Config = {
4244
},
4345
flowDown: {
4446
'0%': { top: '-40%', opacity: '0' },
45-
'20%': { opacity: '1' },
46-
'80%': { opacity: '1' },
47-
'100%': { top: '110%', opacity: '0' },
47+
'15%': { opacity: '1' },
48+
'85%': { opacity: '1' },
49+
'100%': { top: '105%', opacity: '0' },
4850
},
4951
arrowPulse: {
50-
'0%, 100%': { opacity: '0.4', transform: 'translateY(0)' },
52+
'0%, 100%': { opacity: '0.5', transform: 'translateY(-1px)' },
5153
'50%': { opacity: '1', transform: 'translateY(2px)' },
5254
},
5355
volPulse: {
5456
'0%, 100%': { opacity: '1', transform: 'scale(1)' },
5557
'50%': { opacity: '0.6', transform: 'scale(1.4)' },
5658
},
59+
blinkOrange: {
60+
'0%, 100%': { background: 'rgba(255,157,0,0.4)', boxShadow: '0 0 8px rgba(255,157,0,0.6)' },
61+
'50%': { background: '#ff9d00', boxShadow: '0 0 16px rgba(255,157,0,1)' },
62+
},
63+
blinkGreen: {
64+
'0%, 100%': { background: 'rgba(0,255,136,0.4)', boxShadow: '0 0 8px rgba(0,255,136,0.6)' },
65+
'50%': { background: '#00ff88', boxShadow: '0 0 16px rgba(0,255,136,1)' },
66+
},
67+
heroCardGlow: {
68+
'0%, 100%': { borderColor: 'rgba(184,68,255,0.4)', boxShadow: '0 0 24px rgba(184,68,255,0.2), inset 0 0 24px rgba(184,68,255,0.05)' },
69+
'50%': { borderColor: 'rgba(184,68,255,0.8)', boxShadow: '0 0 48px rgba(184,68,255,0.4), inset 0 0 32px rgba(184,68,255,0.1)' },
70+
},
5771
shimmer: {
5872
'0%': { backgroundPosition: '-200% 0' },
5973
'100%': { backgroundPosition: '200% 0' },
6074
},
6175
},
6276
animation: {
6377
pulse2: 'pulse2 2s infinite',
64-
flowDown: 'flowDown 1.2s linear infinite',
65-
arrowPulse: 'arrowPulse 1.2s ease-in-out infinite',
78+
flowDown: 'flowDown 1.1s linear infinite',
79+
arrowPulse: 'arrowPulse 1.1s ease-in-out infinite',
6680
volPulse: 'volPulse 2s ease-in-out infinite',
81+
blinkOrange: 'blinkOrange 1.4s ease-in-out infinite',
82+
blinkGreen: 'blinkGreen 1.4s ease-in-out infinite',
83+
heroCardGlow: 'heroCardGlow 2.5s ease-in-out infinite',
6784
shimmer: 'shimmer 2s linear infinite',
6885
},
6986
},

0 commit comments

Comments
 (0)