Skip to content

Commit 669a61a

Browse files
CopilotBoshen
Copilot
and
Boshen
authored
Streamline dashboard header system with simplified navigation (#58)
Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: Boshen <[email protected]>
1 parent 9130723 commit 669a61a

File tree

4 files changed

+105
-163
lines changed

4 files changed

+105
-163
lines changed

‎apps/dashboard/src/App.css‎

Lines changed: 94 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,46 @@
55
color: #000000;
66
}
77

8-
.dashboard-header {
9-
background: #000000;
10-
border-bottom: 1px solid #e5e5e5;
11-
color: white;
12-
padding: 1rem 2rem;
13-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
8+
/* Header Banner System - Consistent Design Language */
9+
10+
/* Level 1: Dashboard Banner - Top-level app identifier */
11+
.dashboard-banner {
12+
background: #f1f5f9;
13+
border-bottom: 1px solid #cbd5e1;
14+
padding: 0.75rem 2rem;
15+
position: sticky;
16+
top: 0;
17+
z-index: 50;
1418
}
1519

20+
.banner-content {
21+
max-width: 1200px;
22+
margin: 0 auto;
23+
display: flex;
24+
align-items: center;
25+
gap: 0.625rem;
26+
font-size: 0.875rem;
27+
font-weight: 600;
28+
color: #475569;
29+
letter-spacing: -0.025em;
30+
}
1631

32+
/* Level 2: Page Header - Main page identification */
33+
.dashboard-header {
34+
background: #334155;
35+
border-bottom: 1px solid #475569;
36+
color: white;
37+
padding: 1.25rem 2rem;
38+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
39+
}
1740

1841
.header-content {
1942
max-width: 1200px;
2043
margin: 0 auto;
2144
display: flex;
2245
align-items: center;
23-
justify-content: space-between;
46+
justify-content: flex-start;
47+
gap: 1.5rem;
2448
}
2549

2650
.logo {
@@ -32,196 +56,120 @@
3256
.logo h1 {
3357
margin: 0;
3458
font-size: 1.5rem;
35-
font-weight: 700;
59+
font-weight: 600;
3660
color: white;
3761
letter-spacing: -0.025em;
3862
}
3963

4064
.header-subtitle {
4165
margin: 0;
42-
opacity: 0.85;
4366
font-size: 0.875rem;
44-
font-weight: 500;
45-
color: #cccccc;
46-
display: none;
67+
font-weight: 400;
68+
color: #cbd5e1;
4769
letter-spacing: 0.025em;
4870
}
4971

5072
@media (min-width: 768px) {
51-
.header-subtitle {
52-
display: block;
53-
}
54-
5573
.header-content {
56-
justify-content: flex-start;
5774
gap: 2rem;
5875
}
5976

6077
.logo h1 {
61-
font-size: 1.75rem;
78+
font-size: 1.5rem;
6279
}
6380
}
6481

65-
/* Page Navigation */
82+
/* Level 3: Page Navigation - Inter-page navigation */
6683
.page-nav {
67-
background: transparent;
84+
background: #f8fafc;
85+
border-bottom: 1px solid #e2e8f0;
6886
padding: 1rem 2rem;
6987
display: flex;
7088
gap: 0.5rem;
7189
max-width: 1200px;
7290
margin: 0 auto;
73-
border-radius: 0.75rem;
74-
margin-top: -0.5rem;
75-
position: relative;
76-
z-index: 10;
7791
}
7892

7993
.page-button {
8094
display: flex;
8195
align-items: center;
82-
gap: 0.625rem;
83-
padding: 1rem 1.5rem;
84-
border: 2px solid transparent;
85-
background: transparent;
86-
border-radius: 0.75rem;
96+
gap: 0.5rem;
97+
padding: 0.75rem 1.25rem;
98+
border: 1px solid #cbd5e1;
99+
background: #ffffff;
100+
border-radius: 0.5rem;
87101
cursor: pointer;
88-
font-weight: 600;
89-
font-size: 0.95rem;
90-
transition: all 0.3s ease;
91-
color: #64748b;
92-
text-transform: capitalize;
102+
font-weight: 500;
103+
font-size: 0.875rem;
104+
transition: all 0.2s ease;
105+
color: #475569;
93106
letter-spacing: -0.025em;
94-
position: relative;
95-
overflow: hidden;
96-
min-width: 160px;
107+
text-decoration: none;
108+
min-width: 140px;
97109
justify-content: center;
98110
}
99111

100-
.page-button::before {
101-
content: '';
102-
position: absolute;
103-
top: 0;
104-
left: -100%;
105-
width: 100%;
106-
height: 100%;
107-
background: linear-gradient(90deg,
108-
transparent,
109-
rgba(16, 185, 129, 0.3),
110-
transparent);
111-
transition: left 0.5s ease;
112-
}
113-
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);
120-
}
121-
122-
.page-button:hover::before {
123-
left: 100%;
113+
background: #f1f5f9;
114+
border-color: #94a3b8;
115+
color: #334155;
124116
}
125117

126118
.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);
131-
transform: translateY(-1px);
132-
}
133-
134-
.page-button.active::before {
135-
background: linear-gradient(90deg,
136-
transparent,
137-
rgba(16, 185, 129, 0.2),
138-
transparent);
119+
background: #475569;
120+
border-color: #475569;
121+
color: #ffffff;
139122
}
140123

141124
.page-button.active:hover {
142-
transform: translateY(-3px);
143-
box-shadow: 0 12px 24px rgba(16, 185, 129, 0.4);
125+
background: #334155;
126+
border-color: #334155;
144127
}
145128

146-
/* Metric Navigation */
129+
/* Level 4: Metric Navigation - Metric selection within pages */
147130
.dashboard-nav {
148-
background: transparent;
149-
padding: 1.25rem 2rem;
131+
background: #f8fafc;
132+
border-bottom: 1px solid #e2e8f0;
133+
padding: 1rem 2rem;
150134
display: flex;
151135
gap: 0.5rem;
152136
max-width: 1200px;
153137
margin: 0 auto;
154-
border-radius: 0.75rem;
155-
margin-top: -0.5rem;
156-
position: relative;
157-
z-index: 10;
158138
}
159139

160140
.nav-button {
161141
display: flex;
162142
align-items: center;
163-
gap: 0.625rem;
164-
padding: 1rem 2rem;
165-
border: 2px solid transparent;
166-
background: transparent;
167-
border-radius: 0.75rem;
143+
gap: 0.5rem;
144+
padding: 0.75rem 1.25rem;
145+
border: 1px solid #cbd5e1;
146+
background: #ffffff;
147+
border-radius: 0.5rem;
168148
cursor: pointer;
169-
font-weight: 600;
170-
font-size: 0.95rem;
171-
transition: all 0.3s ease;
172-
color: #64748b;
173-
text-transform: capitalize;
149+
font-weight: 500;
150+
font-size: 0.875rem;
151+
transition: all 0.2s ease;
152+
color: #475569;
174153
letter-spacing: -0.025em;
175-
position: relative;
176-
overflow: hidden;
177-
min-width: 140px;
154+
min-width: 120px;
178155
justify-content: center;
179156
}
180157

181-
.nav-button::before {
182-
content: '';
183-
position: absolute;
184-
top: 0;
185-
left: -100%;
186-
width: 100%;
187-
height: 100%;
188-
background: linear-gradient(90deg,
189-
transparent,
190-
rgba(255, 255, 255, 0.6),
191-
transparent);
192-
transition: left 0.5s ease;
193-
}
194-
195158
.nav-button:hover {
196-
background: transparent;
159+
background: #f1f5f9;
197160
border-color: #94a3b8;
198-
color: #475569;
199-
transform: translateY(-2px);
200-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
201-
}
202-
203-
.nav-button:hover::before {
204-
left: 100%;
161+
color: #334155;
205162
}
206163

207164
.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);
212-
transform: translateY(-1px);
213-
}
214-
215-
.nav-button.active::before {
216-
background: linear-gradient(90deg,
217-
transparent,
218-
rgba(255, 255, 255, 0.2),
219-
transparent);
165+
background: #475569;
166+
border-color: #475569;
167+
color: #ffffff;
220168
}
221169

222170
.nav-button.active:hover {
223-
transform: translateY(-3px);
224-
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
171+
background: #334155;
172+
border-color: #334155;
225173
}
226174

227175
/* Main Content */
@@ -237,19 +185,19 @@
237185
/* Chart Container */
238186
.chart-container {
239187
background: white;
240-
border: 1px solid #e5e5e5;
188+
border: 1px solid #e2e8f0;
241189
padding: 2rem;
242-
border-radius: 0.5rem;
243-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
190+
border-radius: 0.75rem;
191+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
244192
}
245193

246194

247195

248196
.chart-container h2 {
249197
margin: 0 0 1.5rem 0;
250-
color: #111827;
251-
font-size: 1.5rem;
252-
font-weight: 600;
198+
color: #1e293b;
199+
font-size: 1.75rem;
200+
font-weight: 700;
253201
letter-spacing: -0.025em;
254202
}
255203

@@ -262,11 +210,11 @@
262210

263211
.stat-card {
264212
background: white;
265-
border: 1px solid #e5e5e5;
213+
border: 1px solid #e2e8f0;
266214
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;
215+
border-radius: 0.75rem;
216+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
217+
border-left: 4px solid #3b82f6;
270218
transition: all 0.2s ease;
271219
}
272220

@@ -279,7 +227,7 @@
279227

280228
.stat-card h3 {
281229
margin: 0 0 0.75rem 0;
282-
color: #6b7280;
230+
color: #64748b;
283231
font-size: 0.875rem;
284232
font-weight: 600;
285233
text-transform: uppercase;
@@ -290,7 +238,7 @@
290238
margin: 0 0 0.75rem 0;
291239
font-size: 2.25rem;
292240
font-weight: 700;
293-
color: #111827;
241+
color: #1e293b;
294242
letter-spacing: -0.025em;
295243
line-height: 1.1;
296244
}
@@ -366,13 +314,13 @@
366314

367315
.library-title {
368316
margin: 0 0 1rem 0;
369-
font-size: 1.125rem;
370-
font-weight: 600;
371-
color: #111827;
317+
font-size: 1.25rem;
318+
font-weight: 700;
319+
color: #1e293b;
372320
text-transform: capitalize;
373321
text-align: center;
374322
padding-bottom: 0.5rem;
375-
border-bottom: 2px solid #e5e7eb;
323+
border-bottom: 2px solid #e2e8f0;
376324
}
377325

378326
/* Responsive Design */

‎apps/dashboard/src/components/Layout.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
import { Package, Zap } from 'lucide-react';
1+
import { BarChart3, Package, Zap } from 'lucide-react';
22
import { Link, Outlet, useLocation } from 'react-router-dom';
33

44
function Layout() {
55
const location = useLocation();
66

77
return (
88
<>
9+
{/* Rolldown-Vite Dashboard Banner */}
10+
<div className='dashboard-banner'>
11+
<div className='banner-content'>
12+
<BarChart3 size={16} />
13+
<span>Rolldown-Vite Dashboard</span>
14+
</div>
15+
</div>
16+
917
{/* Page Navigation */}
1018
<nav className='page-nav'>
1119
<Link

0 commit comments

Comments
 (0)