Transform dashboard UI to clean black on white theme with modern styling and enhanced accessibility (#39)

* Initial plan

* Transform UI with modern dark theme and glass morphism effects

Co-authored-by: Boshen <[email protected]>

* Modernize dashboard header with sleek compact design

Co-authored-by: Boshen <[email protected]>

* Transform UI to modern green/teal theme with improved text contrast and enhanced navigation

Co-authored-by: Boshen <[email protected]>

* Enhance UI consistency with modern theme, improved typography, and accessible chart styling

Co-authored-by: Boshen <[email protected]>

* Transform UI to clean black on white theme with modern styling

Co-authored-by: Boshen <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: Boshen <[email protected]>

Author: Copilot

apps/dashboard/src/App.css

@@ -1,74 +1,120 @@
 /* Dashboard Layout */
 .dashboard {
   min-height: 100vh;
-  background-color: #f8fafc;
-  color: #1a202c;
+  background: #ffffff;
+  color: #000000;
 }
 
 .dashboard-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #000000;
+  border-bottom: 1px solid #e5e5e5;
   color: white;
-  padding: 2rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  padding: 1rem 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+
+
 .header-content {
   max-width: 1200px;
   margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .logo {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  margin-bottom: 0.5rem;
 }
 
 .logo h1 {
   margin: 0;
-  font-size: 2rem;
+  font-size: 1.5rem;
   font-weight: 700;
+  color: white;
+  letter-spacing: -0.025em;
 }
 
-.header-content p {
+.header-subtitle {
   margin: 0;
-  opacity: 0.9;
-  font-size: 1.1rem;
+  opacity: 0.85;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #cccccc;
+  display: none;
+  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;
+  }
 }
 
 /* Navigation */
 .dashboard-nav {
   background: white;
-  padding: 1rem 2rem;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e5e5;
+  padding: 1.25rem 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   display: flex;
   gap: 1rem;
   max-width: 1200px;
   margin: 0 auto;
 }
 
+
+
 .nav-button {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  border: none;
-  background: transparent;
+  gap: 0.625rem;
+  padding: 1rem 2rem;
+  border: 1px solid #d1d5db;
+  background: white;
   border-radius: 0.5rem;
   cursor: pointer;
-  font-weight: 500;
-  transition: all 0.2s;
-  color: #64748b;
+  font-weight: 600;
+  font-size: 0.95rem;
+  transition: all 0.2s ease;
+  color: #374151;
+  text-transform: capitalize;
+  letter-spacing: -0.025em;
 }
 
+
+
 .nav-button:hover {
-  background-color: #f1f5f9;
-  color: #334155;
+  background: #f9fafb;
+  border-color: #6b7280;
+  color: #111827;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .nav-button.active {
-  background-color: #3b82f6;
+  background: #000000;
+  border-color: #000000;
   color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.nav-button.active::before {
+  background: linear-gradient(90deg, 
+    transparent, 
+    rgba(255, 255, 255, 0.2), 
+    transparent);
 }
 
 /* Main Content */
@@ -81,18 +127,23 @@
   gap: 2rem;
 }
 
+/* Chart Container */
 .chart-container {
   background: white;
+  border: 1px solid #e5e5e5;
   padding: 2rem;
-  border-radius: 0.75rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+
+
 .chart-container h2 {
   margin: 0 0 1.5rem 0;
-  color: #1a202c;
+  color: #111827;
   font-size: 1.5rem;
   font-weight: 600;
+  letter-spacing: -0.025em;
 }
 
 /* Stats Grid */
@@ -104,43 +155,59 @@
 
 .stat-card {
   background: white;
-  padding: 1.5rem;
-  border-radius: 0.75rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  border-left: 4px solid #3b82f6;
+  border: 1px solid #e5e5e5;
+  padding: 1.75rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-left: 4px solid #000000;
+  transition: all 0.2s ease;
+}
+
+
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 .stat-card h3 {
-  margin: 0 0 0.5rem 0;
-  color: #64748b;
+  margin: 0 0 0.75rem 0;
+  color: #6b7280;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.1em;
 }
 
 .stat-value {
-  margin: 0 0 0.5rem 0;
-  font-size: 2rem;
+  margin: 0 0 0.75rem 0;
+  font-size: 2.25rem;
   font-weight: 700;
-  color: #1a202c;
+  color: #111827;
+  letter-spacing: -0.025em;
+  line-height: 1.1;
 }
 
 .stat-change {
   font-size: 0.875rem;
-  font-weight: 500;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
+  font-weight: 600;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
 .stat-change.positive {
   color: #059669;
-  background-color: #d1fae5;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.2);
 }
 
 .stat-change.negative {
   color: #dc2626;
-  background-color: #fee2e2;
+  background: rgba(220, 38, 38, 0.1);
+  border: 1px solid rgba(220, 38, 38, 0.2);
 }
 
 /* Responsive Design */