Skip to content

Commit a668882

Browse files
NateIsernNateIsern
committed
Revert "feat(ui): Apple-clean redesign — neutral canvas, green as accent"
This reverts commit b008dd7.
1 parent b008dd7 commit a668882

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="#0e120f" media="(prefers-color-scheme: dark)" />
28-
<meta name="theme-color" content="#f4f7f5" media="(prefers-color-scheme: light)" />
27+
<meta name="theme-color" content="#23260C" media="(prefers-color-scheme: dark)" />
28+
<meta name="theme-color" content="#3d9948" 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:#0e120f;color:hsl(150,6%,90%);font-family:Inter,system-ui,sans-serif">
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">
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,80 +40,76 @@
4040
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
4141
}
4242

43-
/* ---- Light theme ----
44-
Clean, near-white neutral canvas; green stays an accent only. */
43+
/* ---- Light theme ---- */
4544
:root {
46-
--background: 150 14% 97%;
47-
--foreground: 155 20% 12%;
45+
--background: 0 0% 95%;
46+
--foreground: 67 52% 10%;
4847
--card: 0 0% 100%;
49-
--card-foreground: 155 20% 12%;
48+
--card-foreground: 67 52% 10%;
5049
--popover: 0 0% 100%;
51-
--popover-foreground: 155 20% 12%;
52-
--primary: 96 68% 26%;
50+
--popover-foreground: 67 52% 10%;
51+
--primary: 90 96% 18%;
5352
--primary-foreground: 0 0% 100%;
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%;
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%;
6160
--destructive-foreground: 0 0% 100%;
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%;
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%;
7069
--sidebar: 0 0% 100%;
71-
--sidebar-foreground: 155 20% 12%;
72-
--sidebar-primary: 96 68% 26%;
70+
--sidebar-foreground: 67 52% 10%;
71+
--sidebar-primary: 90 96% 18%;
7372
--sidebar-primary-foreground: 0 0% 100%;
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%;
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%;
7877
}
7978

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. */
79+
/* ---- Dark theme ---- */
8480
.dark {
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%;
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%;
10096
--destructive-foreground: 0 0% 100%;
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%;
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%;
117113
}
118114

119115
/* ---- Base styles ---- */
@@ -136,10 +132,10 @@ body {
136132
font-family: var(--font-sans);
137133
}
138134

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

145141
html::-webkit-scrollbar, body::-webkit-scrollbar {
@@ -148,25 +144,27 @@ html::-webkit-scrollbar, body::-webkit-scrollbar {
148144
}
149145

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

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

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

163161
html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
164-
background: transparent;
162+
background: hsl(var(--muted));
165163
}
166164

167165
.custom-scrollbar {
168166
scrollbar-width: thin;
169-
scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent;
167+
scrollbar-color: hsl(var(--primary)) hsl(var(--muted));
170168
}
171169

172170
.custom-scrollbar::-webkit-scrollbar {
@@ -175,20 +173,22 @@ html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
175173
}
176174

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

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

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

190190
.custom-scrollbar::-webkit-scrollbar-corner {
191-
background: transparent;
191+
background: hsl(var(--muted));
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 = 10
13-
const TX_FEED_LIMIT = 12
12+
const BLOCKS_LIMIT = 20
13+
const TX_FEED_LIMIT = 20
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-5">
21+
<div className="flex-1 space-y-4">
2222
<HomeHeader />
2323

2424
<StatStrip height={height} />
2525

2626
<SupplyBar />
2727

28-
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
28+
<div className="grid grid-cols-1 gap-3 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-4 lg:grid-cols-2">
35+
<div className="grid grid-cols-1 gap-3 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)