Skip to content

Commit d0879b6

Browse files
kuco23claude
kuco23
and
claude
committed
claude:design: tighten ui/* style hygiene — tokens, motion prefs, transitions
Co-Authored-By: Claude <noreply@anthropic.com>
1 parent ede1c78 commit d0879b6

6 files changed

Lines changed: 117 additions & 90 deletions

File tree

‎src/assets/css/custom.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
align-items: center;
1414
z-index: 1000;
1515
opacity: 0;
16-
transition: opacity 1s;
16+
transition: opacity 200ms ease-out;
1717
}
1818

1919
/* VIDEO EMBED */

‎src/components/sections/scrollToTop.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ const ScrollToTop = () => {
55
const { pathname } = useLocation()
66

77
useEffect(() => {
8+
// Respect prefers-reduced-motion — jump instantly for users who
9+
// opt out of animation; smooth-scroll for everyone else.
10+
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
811
window.scrollTo({
912
top: 0,
10-
behavior: "smooth"
13+
behavior: reduced ? "auto" : "smooth"
1114
})
1215
}, [pathname])
1316

‎src/components/ui/diff.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@use '../../assets/css/tokens' as t;
2+
3+
// Inline percent-change indicator shown on the hero stats. Two variants:
4+
// the bare arrow + value (default), and a pill (boxed, tinted background).
5+
6+
.diff-pill {
7+
display: inline-flex;
8+
align-items: center;
9+
gap: 4px;
10+
padding: 3px 8px;
11+
border-radius: t.$radius-md;
12+
font-size: inherit;
13+
}
14+
15+
.diff-text { margin-left: 5px; }
16+
17+
.diff-pill .diff-text { margin-left: 0; }

‎src/components/ui/diff.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1+
import './diff.scss'
2+
3+
// Bespoke data-viz colours for percent change (positive/negative).
4+
// Tied to this component; not part of the theme palette.
5+
const COLOR_POSITIVE = '#50e3c2'
6+
const COLOR_NEGATIVE = '#ff3e55'
7+
const BG_POSITIVE = 'rgba(80, 227, 194, 0.12)'
8+
const BG_NEGATIVE = 'rgba(255, 62, 85, 0.12)'
9+
110
export const Diff = ({ diff, unit = "", pill = false }) => {
2-
let color = '#50e3c2'
3-
const neg = typeof diff == 'string' && diff.startsWith('-')
4-
if (neg) {
5-
diff = diff.slice(1)
6-
color = '#ff3e55'
7-
}
11+
const neg = typeof diff === 'string' && diff.startsWith('-')
12+
const value = neg ? diff.slice(1) : diff
13+
const color = neg ? COLOR_NEGATIVE : COLOR_POSITIVE
814

9-
const pillStyle = pill ? {
10-
display: 'inline-flex',
11-
alignItems: 'center',
12-
gap: 4,
13-
padding: '3px 8px',
14-
borderRadius: 6,
15-
backgroundColor: neg ? 'rgba(255, 62, 85, 0.12)' : 'rgba(80, 227, 194, 0.12)',
16-
fontSize: 'inherit',
17-
} : {}
15+
const pillStyle = pill ? { backgroundColor: neg ? BG_NEGATIVE : BG_POSITIVE } : undefined
1816

19-
return <span style={{ color, ...pillStyle }}>
20-
<svg width="10" height="10" viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
21-
<path d={neg ? "M4 8L12 18L20 8Z" : "M4 16L12 6L20 16Z"} />
22-
</svg>
23-
<span style={{ marginLeft: pill ? 0 : 5 }}>{diff} {unit}</span>
24-
</span>
17+
return (
18+
<span className={pill ? 'diff-pill' : undefined} style={{ color, ...pillStyle }}>
19+
<svg width="10" height="10" viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
20+
<path d={neg ? "M4 8L12 18L20 8Z" : "M4 16L12 6L20 16Z"} />
21+
</svg>
22+
<span className="diff-text">{value} {unit}</span>
23+
</span>
24+
)
2525
}

‎src/components/ui/epochProgress.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@use '../../assets/css/tokens' as t;
2+
3+
// Linear epoch progress bar shown on the protocol stats pages. Each
4+
// instance has a coloured fill (passed via the `color` prop) and a row
5+
// of metadata pills above the bar.
6+
7+
.epoch-progress {
8+
width: 100%;
9+
}
10+
11+
.epoch-progress-meta {
12+
display: flex;
13+
flex-wrap: wrap;
14+
gap: 8px;
15+
margin-bottom: 10px;
16+
}
17+
18+
.epoch-progress-pill {
19+
display: inline-flex;
20+
align-items: center;
21+
gap: 6px;
22+
background: rgba(255, 255, 255, 0.06);
23+
border-radius: t.$radius-md;
24+
padding: 4px 10px;
25+
font-size: t.$text-xs;
26+
}
27+
28+
.epoch-progress-pill-label {
29+
color: rgba(255, 255, 255, 0.45);
30+
text-transform: uppercase;
31+
letter-spacing: 0.04em;
32+
font-weight: t.$weight-medium;
33+
}
34+
35+
.epoch-progress-pill-value {
36+
color: rgba(255, 255, 255, 0.9);
37+
font-variant-numeric: tabular-nums;
38+
font-weight: t.$weight-semibold;
39+
}
40+
41+
.epoch-progress-bar {
42+
width: 100%;
43+
height: 6px;
44+
border-radius: 3px;
45+
background: rgba(255, 255, 255, 0.08);
46+
overflow: hidden;
47+
}
48+
49+
.epoch-progress-fill {
50+
height: 100%;
51+
border-radius: 3px;
52+
transition: width 1s linear;
53+
}
54+
55+
.epoch-progress-footer {
56+
display: flex;
57+
justify-content: space-between;
58+
margin-top: 6px;
59+
font-size: t.$text-xs;
60+
color: rgba(255, 255, 255, 0.5);
61+
font-variant-numeric: tabular-nums;
62+
}

‎src/components/ui/epochProgress.tsx‎

Lines changed: 12 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect, useState } from "react"
22
import { Formatter } from "~/utils/misc/formatter"
3+
import './epochProgress.scss'
34

45
type MetadataItem = { label: string; value: string | number }
56

@@ -31,87 +32,31 @@ const EpochProgress = ({ period, color = "white" }: Props) => {
3132
const remaining = Math.max(endMs - now, 0)
3233

3334
return (
34-
<div style={styles.wrapper}>
35+
<div className="epoch-progress">
3536
{metadata.length > 0 && (
36-
<div style={styles.metaRow}>
37+
<div className="epoch-progress-meta">
3738
{metadata.map((m) => (
38-
<span key={m.label} style={styles.pill}>
39-
<span style={styles.pillLabel}>{m.label}</span>
40-
<span style={styles.pillValue}>{m.value}</span>
39+
<span key={m.label} className="epoch-progress-pill">
40+
<span className="epoch-progress-pill-label">{m.label}</span>
41+
<span className="epoch-progress-pill-value">{m.value}</span>
4142
</span>
4243
))}
4344
</div>
4445
)}
4546

46-
<div style={styles.barOuter}>
47+
<div className="epoch-progress-bar">
4748
<div
48-
style={{
49-
...styles.barFill,
50-
width: `${progress}%`,
51-
background: color,
52-
}}
49+
className="epoch-progress-fill"
50+
style={{ width: `${progress}%`, background: color }}
5351
/>
5452
</div>
5553

56-
<div style={styles.footer}>
57-
<span style={styles.footerText}>{progress.toFixed(1)}%</span>
58-
<span style={styles.footerText}>{Formatter.duration(remaining)} remaining</span>
54+
<div className="epoch-progress-footer">
55+
<span>{progress.toFixed(1)}%</span>
56+
<span>{Formatter.duration(remaining)} remaining</span>
5957
</div>
6058
</div>
6159
)
6260
}
6361

64-
const styles: Record<string, React.CSSProperties> = {
65-
wrapper: {
66-
width: "100%",
67-
},
68-
metaRow: {
69-
display: "flex",
70-
flexWrap: "wrap",
71-
gap: 8,
72-
marginBottom: 10.5,
73-
},
74-
pill: {
75-
display: "inline-flex",
76-
alignItems: "center",
77-
gap: 6,
78-
background: "rgba(255,255,255,0.06)",
79-
borderRadius: 6,
80-
padding: "4px 10px",
81-
fontSize: 13,
82-
},
83-
pillLabel: {
84-
color: "rgba(255,255,255,0.45)",
85-
textTransform: "uppercase" as const,
86-
letterSpacing: "0.04em",
87-
fontWeight: 500,
88-
},
89-
pillValue: {
90-
color: "rgba(255,255,255,0.9)",
91-
fontVariantNumeric: "tabular-nums",
92-
fontWeight: 600,
93-
},
94-
barOuter: {
95-
width: "100%",
96-
height: 6,
97-
borderRadius: 3,
98-
background: "rgba(255,255,255,0.08)",
99-
overflow: "hidden",
100-
},
101-
barFill: {
102-
height: "100%",
103-
borderRadius: 3,
104-
transition: "width 1s linear",
105-
},
106-
footer: {
107-
display: "flex",
108-
justifyContent: "space-between",
109-
marginTop: 6,
110-
fontSize: 12,
111-
color: "rgba(255,255,255,0.5)",
112-
fontVariantNumeric: "tabular-nums",
113-
},
114-
footerText: {},
115-
}
116-
11762
export default EpochProgress

0 commit comments

Comments
 (0)