Skip to content

Commit b008dd7

Browse files
NateIsernclaude
NateIsern
and
claude
committed
feat(ui): Apple-clean redesign — neutral canvas, green as accent
Dark theme: replace the all-green wash (green background + 96%-saturation green cards) with a near-black, very-low-saturation neutral canvas and reserve the FairCoin green for accents only (primary, active nav, links, focus, live dot). Light theme refined to a clean near-white neutral. Neutralize the brand-green scrollbars to a subtle gray, update the boot splash + theme-color, trim the home block/tx lists (20->10/12) and add a little more spacing for breathing room. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent e51fcdb commit b008dd7

3 files changed

Lines changed: 84 additions & 84 deletions

File tree

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
<meta name="msapplication-TileColor" content="#3d9948" />
2525
<meta name="msapplication-tap-highlight" content="no" />
2626

27-
<meta name="theme-color" content="#23260C" media="(prefers-color-scheme: dark)" />
28-
<meta name="theme-color" content="#3d9948" media="(prefers-color-scheme: light)" />
27+
<meta name="theme-color" content="#0e120f" media="(prefers-color-scheme: dark)" />
28+
<meta name="theme-color" content="#f4f7f5" media="(prefers-color-scheme: light)" />
2929

3030
<link rel="manifest" href="/manifest.json" />
3131
<link rel="icon" type="image/jpeg" href="/images/FairCoin-Logo.jpg" />
@@ -102,7 +102,7 @@
102102
<body>
103103
<div id="root">
104104
<!-- macOS-style boot splash shown while JS loads -->
105-
<div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#23260C;color:hsl(80,10%,90%);font-family:Inter,system-ui,sans-serif">
105+
<div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0e120f;color:hsl(150,6%,90%);font-family:Inter,system-ui,sans-serif">
106106
<div style="display:flex;flex-direction:column;align-items:center">
107107
<img src="/images/FairCoin-Logo.jpg" alt="FairCoin" width="64" height="64" style="width:64px;height:64px;border-radius:14px;object-fit:cover" />
108108
<div style="width:140px;height:3px;margin-top:28px;border-radius:999px;background:rgba(161,242,80,0.15);overflow:hidden">

‎src/index.css‎

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -40,76 +40,80 @@
4040
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
4141
}
4242

43-
/* ---- Light theme ---- */
43+
/* ---- Light theme ----
44+
Clean, near-white neutral canvas; green stays an accent only. */
4445
:root {
45-
--background: 0 0% 95%;
46-
--foreground: 67 52% 10%;
46+
--background: 150 14% 97%;
47+
--foreground: 155 20% 12%;
4748
--card: 0 0% 100%;
48-
--card-foreground: 67 52% 10%;
49+
--card-foreground: 155 20% 12%;
4950
--popover: 0 0% 100%;
50-
--popover-foreground: 67 52% 10%;
51-
--primary: 90 96% 18%;
51+
--popover-foreground: 155 20% 12%;
52+
--primary: 96 68% 26%;
5253
--primary-foreground: 0 0% 100%;
53-
--secondary: 84 15% 90%;
54-
--secondary-foreground: 67 52% 10%;
55-
--muted: 84 10% 92%;
56-
--muted-foreground: 67 20% 40%;
57-
--accent: 84 59% 63%;
58-
--accent-foreground: 67 52% 10%;
59-
--destructive: 0 84% 60%;
54+
--secondary: 150 14% 94%;
55+
--secondary-foreground: 155 20% 14%;
56+
--muted: 150 14% 95%;
57+
--muted-foreground: 155 8% 42%;
58+
--accent: 150 14% 93%;
59+
--accent-foreground: 155 20% 14%;
60+
--destructive: 0 74% 52%;
6061
--destructive-foreground: 0 0% 100%;
61-
--border: 84 10% 85%;
62-
--input: 84 10% 85%;
63-
--ring: 90 96% 18%;
64-
--chart-1: 90 60% 78%;
65-
--chart-2: 90 55% 65%;
66-
--chart-3: 90 60% 50%;
67-
--chart-4: 90 70% 38%;
68-
--chart-5: 90 80% 28%;
62+
--border: 150 12% 89%;
63+
--input: 150 12% 89%;
64+
--ring: 96 68% 26%;
65+
--chart-1: 92 55% 74%;
66+
--chart-2: 94 52% 60%;
67+
--chart-3: 98 58% 46%;
68+
--chart-4: 102 64% 34%;
69+
--chart-5: 106 72% 26%;
6970
--sidebar: 0 0% 100%;
70-
--sidebar-foreground: 67 52% 10%;
71-
--sidebar-primary: 90 96% 18%;
71+
--sidebar-foreground: 155 20% 12%;
72+
--sidebar-primary: 96 68% 26%;
7273
--sidebar-primary-foreground: 0 0% 100%;
73-
--sidebar-accent: 84 10% 92%;
74-
--sidebar-accent-foreground: 67 52% 10%;
75-
--sidebar-border: 84 10% 85%;
76-
--sidebar-ring: 90 96% 18%;
74+
--sidebar-accent: 150 14% 94%;
75+
--sidebar-accent-foreground: 155 20% 14%;
76+
--sidebar-border: 150 12% 89%;
77+
--sidebar-ring: 96 68% 26%;
7778
}
7879

79-
/* ---- Dark theme ---- */
80+
/* ---- Dark theme ----
81+
Apple-style neutral canvas: a near-black, very-low-saturation base with the
82+
FairCoin green reserved purely as an accent (primary / links / active nav /
83+
focus). Surfaces separate by lightness, not by hue. */
8084
.dark {
81-
--background: 75 60% 6%;
82-
--foreground: 80 10% 90%;
83-
--card: 90 96% 18%;
84-
--card-foreground: 80 10% 90%;
85-
--popover: 90 96% 18%;
86-
--popover-foreground: 80 10% 90%;
87-
--primary: 90 86% 63%;
88-
--primary-foreground: 67 52% 10%;
89-
--secondary: 90 40% 14%;
90-
--secondary-foreground: 80 10% 90%;
91-
--muted: 90 50% 15%;
92-
--muted-foreground: 80 10% 60%;
93-
--accent: 84 59% 63%;
94-
--accent-foreground: 67 52% 10%;
95-
--destructive: 0 72% 51%;
85+
--background: 156 8% 6%;
86+
--foreground: 150 6% 94%;
87+
--card: 155 7% 9%;
88+
--card-foreground: 150 6% 94%;
89+
--popover: 155 8% 10%;
90+
--popover-foreground: 150 6% 94%;
91+
--primary: 88 82% 62%;
92+
--primary-foreground: 150 45% 8%;
93+
--secondary: 152 6% 14%;
94+
--secondary-foreground: 150 6% 92%;
95+
--muted: 152 6% 13%;
96+
--muted-foreground: 150 5% 60%;
97+
--accent: 152 6% 16%;
98+
--accent-foreground: 150 6% 94%;
99+
--destructive: 0 72% 55%;
96100
--destructive-foreground: 0 0% 100%;
97-
--border: 90 30% 22%;
98-
--input: 90 30% 24%;
99-
--ring: 90 86% 63%;
100-
--chart-1: 90 70% 75%;
101-
--chart-2: 90 60% 62%;
102-
--chart-3: 90 55% 50%;
103-
--chart-4: 90 50% 40%;
104-
--chart-5: 90 45% 30%;
105-
--sidebar: 90 97% 13%;
106-
--sidebar-foreground: 80 10% 90%;
107-
--sidebar-primary: 90 86% 63%;
108-
--sidebar-primary-foreground: 67 52% 10%;
109-
--sidebar-accent: 90 50% 15%;
110-
--sidebar-accent-foreground: 80 10% 90%;
111-
--sidebar-border: 90 30% 22%;
112-
--sidebar-ring: 90 86% 63%;
101+
--border: 150 6% 15%;
102+
--input: 150 6% 18%;
103+
--ring: 88 82% 62%;
104+
--chart-1: 90 72% 72%;
105+
--chart-2: 92 62% 60%;
106+
--chart-3: 96 55% 48%;
107+
--chart-4: 100 50% 40%;
108+
--chart-5: 104 46% 32%;
109+
--sidebar: 156 8% 7%;
110+
--sidebar-foreground: 150 6% 88%;
111+
--sidebar-primary: 88 82% 62%;
112+
--sidebar-primary-foreground: 150 45% 8%;
113+
--sidebar-accent: 152 6% 13%;
114+
--sidebar-accent-foreground: 150 6% 94%;
115+
--sidebar-border: 150 6% 13%;
116+
--sidebar-ring: 88 82% 62%;
113117
}
114118

115119
/* ---- Base styles ---- */
@@ -132,10 +136,10 @@ body {
132136
font-family: var(--font-sans);
133137
}
134138

135-
/* ---- Scrollbar ---- */
139+
/* ---- Scrollbar (subtle, neutral — not the brand accent) ---- */
136140
html, body {
137141
scrollbar-width: thin;
138-
scrollbar-color: hsl(var(--primary)) hsl(var(--muted));
142+
scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent;
139143
}
140144

141145
html::-webkit-scrollbar, body::-webkit-scrollbar {
@@ -144,27 +148,25 @@ html::-webkit-scrollbar, body::-webkit-scrollbar {
144148
}
145149

146150
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
147-
background: hsl(var(--muted));
148-
border-radius: 4px;
151+
background: transparent;
149152
}
150153

151154
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
152-
background: hsl(var(--primary));
153-
border-radius: 4px;
154-
border: 1px solid hsl(var(--muted));
155+
background: hsl(var(--muted-foreground) / 0.3);
156+
border-radius: 999px;
155157
}
156158

157159
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
158-
background: hsl(var(--accent));
160+
background: hsl(var(--muted-foreground) / 0.5);
159161
}
160162

161163
html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
162-
background: hsl(var(--muted));
164+
background: transparent;
163165
}
164166

165167
.custom-scrollbar {
166168
scrollbar-width: thin;
167-
scrollbar-color: hsl(var(--primary)) hsl(var(--muted));
169+
scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent;
168170
}
169171

170172
.custom-scrollbar::-webkit-scrollbar {
@@ -173,22 +175,20 @@ html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
173175
}
174176

175177
.custom-scrollbar::-webkit-scrollbar-track {
176-
background: hsl(var(--muted));
177-
border-radius: 4px;
178+
background: transparent;
178179
}
179180

180181
.custom-scrollbar::-webkit-scrollbar-thumb {
181-
background: hsl(var(--primary));
182-
border-radius: 4px;
183-
border: 1px solid hsl(var(--muted));
182+
background: hsl(var(--muted-foreground) / 0.3);
183+
border-radius: 999px;
184184
}
185185

186186
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
187-
background: hsl(var(--accent));
187+
background: hsl(var(--muted-foreground) / 0.5);
188188
}
189189

190190
.custom-scrollbar::-webkit-scrollbar-corner {
191-
background: hsl(var(--muted));
191+
background: transparent;
192192
}
193193

194194
/* ---- Utilities ---- */

‎src/pages/home.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,30 @@ import { NetworkCard } from '@/components/home/network-card'
99
import { RecentBlocksList } from '@/components/home/recent-blocks-list'
1010
import { LatestTxList } from '@/components/home/latest-tx-list'
1111

12-
const BLOCKS_LIMIT = 20
13-
const TX_FEED_LIMIT = 20
12+
const BLOCKS_LIMIT = 10
13+
const TX_FEED_LIMIT = 12
1414

1515
export default function HomePage() {
1616
const { data, isLoading, isError } = useRecentBlocks(BLOCKS_LIMIT)
1717
const blocks = data?.blocks
1818
const height = data?.height
1919

2020
return (
21-
<div className="flex-1 space-y-4">
21+
<div className="flex-1 space-y-5">
2222
<HomeHeader />
2323

2424
<StatStrip height={height} />
2525

2626
<SupplyBar />
2727

28-
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
28+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
2929
<PriceCard />
3030
<GithubCard />
3131
<WfairCard />
3232
<NetworkCard />
3333
</div>
3434

35-
<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
35+
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
3636
<RecentBlocksList blocks={blocks} isLoading={isLoading} isError={isError} />
3737
<LatestTxList max={TX_FEED_LIMIT} />
3838
</div>

0 commit comments

Comments
 (0)