Skip to content

Streamline dashboard header system with simplified navigation #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Boshen merged 6 commits into from
Sep 5, 2025
Merged

Streamline dashboard header system with simplified navigation #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
38a7381
Initial plan
Copilot Sep 5, 2025
0423ae3
Complete UI consistency improvements - remove gradients, standardize …
Copilot Sep 5, 2025
4b3b7d3
Add small and clean rolldown-vite dashboard banner at top of page
Copilot Sep 5, 2025
4ea6902
Fix header order: change page header from 'Rolldown-Vite Dashboard' t…
Copilot Sep 5, 2025
e7bf52a
Redesign header banners for consistency - unified typography, color s…
Copilot Sep 5, 2025
7d3aa84
Remove Rolldown Stats banner as requested
Copilot Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
240 changes: 94 additions & 146 deletions apps/dashboard/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,46 @@
color: #000000;
}

.dashboard-header {
background: #000000;
border-bottom: 1px solid #e5e5e5;
color: white;
padding: 1rem 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* Header Banner System - Consistent Design Language */

/* Level 1: Dashboard Banner - Top-level app identifier */
.dashboard-banner {
background: #f1f5f9;
border-bottom: 1px solid #cbd5e1;
padding: 0.75rem 2rem;
position: sticky;
top: 0;
z-index: 50;
}

.banner-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.875rem;
font-weight: 600;
color: #475569;
letter-spacing: -0.025em;
}

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

.header-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
gap: 1.5rem;
}

.logo {
Expand All @@ -32,196 +56,120 @@
.logo h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
font-weight: 600;
color: white;
letter-spacing: -0.025em;
}

.header-subtitle {
margin: 0;
opacity: 0.85;
font-size: 0.875rem;
font-weight: 500;
color: #cccccc;
display: none;
font-weight: 400;
color: #cbd5e1;
letter-spacing: 0.025em;
}

@media (min-width: 768px) {
.header-subtitle {
display: block;
}

.header-content {
justify-content: flex-start;
gap: 2rem;
}

.logo h1 {
font-size: 1.75rem;
font-size: 1.5rem;
}
}

/* Page Navigation */
/* Level 3: Page Navigation - Inter-page navigation */
.page-nav {
background: transparent;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 1rem 2rem;
display: flex;
gap: 0.5rem;
max-width: 1200px;
margin: 0 auto;
border-radius: 0.75rem;
margin-top: -0.5rem;
position: relative;
z-index: 10;
}

.page-button {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 1rem 1.5rem;
border: 2px solid transparent;
background: transparent;
border-radius: 0.75rem;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border: 1px solid #cbd5e1;
background: #ffffff;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
color: #64748b;
text-transform: capitalize;
font-weight: 500;
font-size: 0.875rem;
transition: all 0.2s ease;
color: #475569;
letter-spacing: -0.025em;
position: relative;
overflow: hidden;
min-width: 160px;
text-decoration: none;
min-width: 140px;
justify-content: center;
}

.page-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(16, 185, 129, 0.3),
transparent);
transition: left 0.5s ease;
}

.page-button:hover {
background: transparent;
border-color: #10b981;
color: #059669;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(16, 185, 129, 0.2);
}

.page-button:hover::before {
left: 100%;
background: #f1f5f9;
border-color: #94a3b8;
color: #334155;
}

.page-button.active {
background: transparent;
border-color: #10b981;
color: #059669;
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
transform: translateY(-1px);
}

.page-button.active::before {
background: linear-gradient(90deg,
transparent,
rgba(16, 185, 129, 0.2),
transparent);
background: #475569;
border-color: #475569;
color: #ffffff;
}

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

/* Metric Navigation */
/* Level 4: Metric Navigation - Metric selection within pages */
.dashboard-nav {
background: transparent;
padding: 1.25rem 2rem;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 1rem 2rem;
display: flex;
gap: 0.5rem;
max-width: 1200px;
margin: 0 auto;
border-radius: 0.75rem;
margin-top: -0.5rem;
position: relative;
z-index: 10;
}

.nav-button {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 1rem 2rem;
border: 2px solid transparent;
background: transparent;
border-radius: 0.75rem;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border: 1px solid #cbd5e1;
background: #ffffff;
border-radius: 0.5rem;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
color: #64748b;
text-transform: capitalize;
font-weight: 500;
font-size: 0.875rem;
transition: all 0.2s ease;
color: #475569;
letter-spacing: -0.025em;
position: relative;
overflow: hidden;
min-width: 140px;
min-width: 120px;
justify-content: center;
}

.nav-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent);
transition: left 0.5s ease;
}

.nav-button:hover {
background: transparent;
background: #f1f5f9;
border-color: #94a3b8;
color: #475569;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.nav-button:hover::before {
left: 100%;
color: #334155;
}

.nav-button.active {
background: transparent;
border-color: #000000;
color: #000000;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
}

.nav-button.active::before {
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent);
background: #475569;
border-color: #475569;
color: #ffffff;
}

.nav-button.active:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
background: #334155;
border-color: #334155;
}

/* Main Content */
Expand All @@ -237,19 +185,19 @@
/* Chart Container */
.chart-container {
background: white;
border: 1px solid #e5e5e5;
border: 1px solid #e2e8f0;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}



.chart-container h2 {
margin: 0 0 1.5rem 0;
color: #111827;
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.025em;
}

Expand All @@ -262,11 +210,11 @@

.stat-card {
background: white;
border: 1px solid #e5e5e5;
border: 1px solid #e2e8f0;
padding: 1.75rem;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-left: 4px solid #000000;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-left: 4px solid #3b82f6;
transition: all 0.2s ease;
}

Expand All @@ -279,7 +227,7 @@

.stat-card h3 {
margin: 0 0 0.75rem 0;
color: #6b7280;
color: #64748b;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
Expand All @@ -290,7 +238,7 @@
margin: 0 0 0.75rem 0;
font-size: 2.25rem;
font-weight: 700;
color: #111827;
color: #1e293b;
letter-spacing: -0.025em;
line-height: 1.1;
}
Expand Down Expand Up @@ -366,13 +314,13 @@

.library-title {
margin: 0 0 1rem 0;
font-size: 1.125rem;
font-weight: 600;
color: #111827;
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
text-transform: capitalize;
text-align: center;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e5e7eb;
border-bottom: 2px solid #e2e8f0;
}

/* Responsive Design */
Expand Down
10 changes: 9 additions & 1 deletion apps/dashboard/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import { Package, Zap } from 'lucide-react';
import { BarChart3, Package, Zap } from 'lucide-react';
import { Link, Outlet, useLocation } from 'react-router-dom';

function Layout() {
const location = useLocation();

return (
<>
{/* Rolldown-Vite Dashboard Banner */}
<div className='dashboard-banner'>
<div className='banner-content'>
<BarChart3 size={16} />
<span>Rolldown-Vite Dashboard</span>
</div>
</div>

{/* Page Navigation */}
<nav className='page-nav'>
<Link
Expand Down
Loading