Skip to content

Commit 0423ae3

Browse files
CopilotBoshen
Copilot
and
Boshen
committed
Complete UI consistency improvements - remove gradients, standardize colors and fonts
Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>
1 parent 38a7381 commit 0423ae3

2 files changed

Lines changed: 71 additions & 81 deletions

File tree

‎apps/dashboard/src/App.css‎

Lines changed: 69 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
}
77

88
.dashboard-header {
9-
background: #000000;
10-
border-bottom: 1px solid #e5e5e5;
9+
background: #1e293b;
10+
border-bottom: 1px solid #e2e8f0;
1111
color: white;
12-
padding: 1rem 2rem;
13-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
12+
padding: 1.5rem 2rem;
13+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
1414
}
1515

1616

@@ -31,19 +31,19 @@
3131

3232
.logo h1 {
3333
margin: 0;
34-
font-size: 1.5rem;
34+
font-size: 1.75rem;
3535
font-weight: 700;
3636
color: white;
3737
letter-spacing: -0.025em;
3838
}
3939

4040
.header-subtitle {
4141
margin: 0;
42-
opacity: 0.85;
43-
font-size: 0.875rem;
44-
font-weight: 500;
45-
color: #cccccc;
46-
display: none;
42+
opacity: 0.9;
43+
font-size: 1rem;
44+
font-weight: 400;
45+
color: #cbd5e1;
46+
display: block;
4747
letter-spacing: 0.025em;
4848
}
4949

@@ -80,21 +80,22 @@
8080
display: flex;
8181
align-items: center;
8282
gap: 0.625rem;
83-
padding: 1rem 1.5rem;
84-
border: 2px solid transparent;
85-
background: transparent;
83+
padding: 0.875rem 1.5rem;
84+
border: 2px solid #e2e8f0;
85+
background: #ffffff;
8686
border-radius: 0.75rem;
8787
cursor: pointer;
8888
font-weight: 600;
89-
font-size: 0.95rem;
90-
transition: all 0.3s ease;
91-
color: #64748b;
89+
font-size: 1rem;
90+
transition: all 0.2s ease;
91+
color: #475569;
9292
text-transform: capitalize;
9393
letter-spacing: -0.025em;
9494
position: relative;
9595
overflow: hidden;
9696
min-width: 160px;
9797
justify-content: center;
98+
text-decoration: none;
9899
}
99100

100101
.page-button::before {
@@ -104,43 +105,38 @@
104105
left: -100%;
105106
width: 100%;
106107
height: 100%;
107-
background: linear-gradient(90deg,
108-
transparent,
109-
rgba(16, 185, 129, 0.3),
110-
transparent);
111-
transition: left 0.5s ease;
108+
background: rgba(59, 130, 246, 0.1);
109+
transition: left 0.3s ease;
112110
}
113111

114112
.page-button:hover {
115-
background: transparent;
116-
border-color: #10b981;
117-
color: #059669;
118-
transform: translateY(-2px);
119-
box-shadow: 0 8px 16px rgba(16, 185, 129, 0.2);
113+
background: rgba(59, 130, 246, 0.05);
114+
border-color: #3b82f6;
115+
color: #1d4ed8;
116+
transform: translateY(-1px);
117+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
120118
}
121119

122120
.page-button:hover::before {
123121
left: 100%;
124122
}
125123

126124
.page-button.active {
127-
background: transparent;
128-
border-color: #10b981;
129-
color: #059669;
130-
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
125+
background: #3b82f6;
126+
border-color: #3b82f6;
127+
color: #ffffff;
128+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
131129
transform: translateY(-1px);
132130
}
133131

134132
.page-button.active::before {
135-
background: linear-gradient(90deg,
136-
transparent,
137-
rgba(16, 185, 129, 0.2),
138-
transparent);
133+
background: rgba(255, 255, 255, 0.1);
139134
}
140135

141136
.page-button.active:hover {
142-
transform: translateY(-3px);
143-
box-shadow: 0 12px 24px rgba(16, 185, 129, 0.4);
137+
background: #2563eb;
138+
transform: translateY(-2px);
139+
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
144140
}
145141

146142
/* Metric Navigation */
@@ -161,15 +157,15 @@
161157
display: flex;
162158
align-items: center;
163159
gap: 0.625rem;
164-
padding: 1rem 2rem;
165-
border: 2px solid transparent;
166-
background: transparent;
160+
padding: 0.875rem 1.5rem;
161+
border: 2px solid #e2e8f0;
162+
background: #ffffff;
167163
border-radius: 0.75rem;
168164
cursor: pointer;
169165
font-weight: 600;
170-
font-size: 0.95rem;
171-
transition: all 0.3s ease;
172-
color: #64748b;
166+
font-size: 1rem;
167+
transition: all 0.2s ease;
168+
color: #475569;
173169
text-transform: capitalize;
174170
letter-spacing: -0.025em;
175171
position: relative;
@@ -185,43 +181,38 @@
185181
left: -100%;
186182
width: 100%;
187183
height: 100%;
188-
background: linear-gradient(90deg,
189-
transparent,
190-
rgba(255, 255, 255, 0.6),
191-
transparent);
192-
transition: left 0.5s ease;
184+
background: rgba(59, 130, 246, 0.1);
185+
transition: left 0.3s ease;
193186
}
194187

195188
.nav-button:hover {
196-
background: transparent;
197-
border-color: #94a3b8;
198-
color: #475569;
199-
transform: translateY(-2px);
200-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
189+
background: rgba(59, 130, 246, 0.05);
190+
border-color: #3b82f6;
191+
color: #1d4ed8;
192+
transform: translateY(-1px);
193+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
201194
}
202195

203196
.nav-button:hover::before {
204197
left: 100%;
205198
}
206199

207200
.nav-button.active {
208-
background: transparent;
209-
border-color: #000000;
210-
color: #000000;
211-
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
201+
background: #3b82f6;
202+
border-color: #3b82f6;
203+
color: #ffffff;
204+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
212205
transform: translateY(-1px);
213206
}
214207

215208
.nav-button.active::before {
216-
background: linear-gradient(90deg,
217-
transparent,
218-
rgba(255, 255, 255, 0.2),
219-
transparent);
209+
background: rgba(255, 255, 255, 0.1);
220210
}
221211

222212
.nav-button.active:hover {
223-
transform: translateY(-3px);
224-
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
213+
background: #2563eb;
214+
transform: translateY(-2px);
215+
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
225216
}
226217

227218
/* Main Content */
@@ -237,19 +228,19 @@
237228
/* Chart Container */
238229
.chart-container {
239230
background: white;
240-
border: 1px solid #e5e5e5;
231+
border: 1px solid #e2e8f0;
241232
padding: 2rem;
242-
border-radius: 0.5rem;
243-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
233+
border-radius: 0.75rem;
234+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
244235
}
245236

246237

247238

248239
.chart-container h2 {
249240
margin: 0 0 1.5rem 0;
250-
color: #111827;
251-
font-size: 1.5rem;
252-
font-weight: 600;
241+
color: #1e293b;
242+
font-size: 1.75rem;
243+
font-weight: 700;
253244
letter-spacing: -0.025em;
254245
}
255246

@@ -262,11 +253,11 @@
262253

263254
.stat-card {
264255
background: white;
265-
border: 1px solid #e5e5e5;
256+
border: 1px solid #e2e8f0;
266257
padding: 1.75rem;
267-
border-radius: 0.5rem;
268-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
269-
border-left: 4px solid #000000;
258+
border-radius: 0.75rem;
259+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
260+
border-left: 4px solid #3b82f6;
270261
transition: all 0.2s ease;
271262
}
272263

@@ -279,7 +270,7 @@
279270

280271
.stat-card h3 {
281272
margin: 0 0 0.75rem 0;
282-
color: #6b7280;
273+
color: #64748b;
283274
font-size: 0.875rem;
284275
font-weight: 600;
285276
text-transform: uppercase;
@@ -290,7 +281,7 @@
290281
margin: 0 0 0.75rem 0;
291282
font-size: 2.25rem;
292283
font-weight: 700;
293-
color: #111827;
284+
color: #1e293b;
294285
letter-spacing: -0.025em;
295286
line-height: 1.1;
296287
}
@@ -366,13 +357,13 @@
366357

367358
.library-title {
368359
margin: 0 0 1rem 0;
369-
font-size: 1.125rem;
370-
font-weight: 600;
371-
color: #111827;
360+
font-size: 1.25rem;
361+
font-weight: 700;
362+
color: #1e293b;
372363
text-transform: capitalize;
373364
text-align: center;
374365
padding-bottom: 0.5rem;
375-
border-bottom: 2px solid #e5e7eb;
366+
border-bottom: 2px solid #e2e8f0;
376367
}
377368

378369
/* Responsive Design */

‎apps/dashboard/src/index.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
font-weight: 400;
55

66
color: #1e293b;
7-
background: linear-gradient(135deg, #0c1618 0%, #134e4a 50%, #1f2937 100%);
7+
background: #f8fafc;
88

99
font-synthesis: none;
1010
text-rendering: optimizeLegibility;
@@ -20,8 +20,7 @@ body {
2020
margin: 0;
2121
min-width: 320px;
2222
min-height: 100vh;
23-
background: linear-gradient(135deg, #0c1618 0%, #134e4a 50%, #1f2937 100%);
24-
background-attachment: fixed;
23+
background: #f8fafc;
2524
}
2625

2726
h1, h2, h3, h4, h5, h6 {

0 commit comments

Comments
 (0)