From 31d8e0100c8da4bbd0a449eb99844bb9267f9be0 Mon Sep 17 00:00:00 2001
From: Ho Ngoc Hai <hongochai10@icloud.com>
Date: Mon, 19 Jan 2026 09:57:41 +0700
Subject: [PATCH] style: Update application theme with Inter font, new
 MudBlazor color palettes, refined loading indicator, and enhanced app bar
 navigation.

---
 .../Layout/MainLayout.razor                   | 66 +++++++++----
 .../WebClientBase.Client/Layout/NavMenu.razor | 10 +-
 .../WebClientBase.Client/wwwroot/css/app.css  | 95 ++++++++++++-------
 .../WebClientBase.Client/wwwroot/index.html   | 75 ++++++++++-----
 4 files changed, 165 insertions(+), 81 deletions(-)

diff --git a/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor b/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor
index c7ce3bcb..9fbe9def 100644
--- a/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor
+++ b/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor
@@ -6,12 +6,20 @@
 <MudSnackbarProvider />
 
 <MudLayout>
-    <MudAppBar Elevation="1" Color="Color.Primary">
-        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
-        <MudText Typo="Typo.h5" Class="ml-3">GoodGo</MudText>
+    <MudAppBar Elevation="0" Class="border-b border-solid mud-border-lines-default">
+        <MudIconButton Icon="@Icons.Material.Rounded.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
+        <MudText Typo="Typo.h6" Class="ml-3 font-weight-bold">GoodGo</MudText>
         <MudSpacer />
-        <MudIconButton Icon="@(_isDarkMode ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)" 
+        <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mr-4 d-none d-md-flex">Features</MudButton>
+        <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mr-4 d-none d-md-flex">Enterprise</MudButton>
+        <MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mr-4 d-none d-md-flex">Pricing</MudButton>
+        <MudStack Row="true" Spacing="2">
+            <MudButton Variant="Variant.Outlined" Color="Color.Inherit" Class="rounded-lg">Sign in</MudButton>
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="rounded-lg">Download</MudButton>
+        </MudStack>
+        <MudIconButton Icon="@(_isDarkMode ? Icons.Material.Rounded.LightMode : Icons.Material.Rounded.DarkMode)" 
                        Color="Color.Inherit" 
+                       Class="ml-2"
                        OnClick="@ToggleDarkMode" />
     </MudAppBar>
 
@@ -28,32 +36,52 @@
 
 @code {
     private bool _drawerOpen = true;
-    private bool _isDarkMode = true;
+    private bool _isDarkMode = false;
 
     private MudTheme _theme = new()
     {
         PaletteLight = new PaletteLight()
         {
-            Primary = "#7c3aed",
-            Secondary = "#06b6d4",
-            Tertiary = "#f59e0b",
-            AppbarBackground = "#7c3aed",
+            Primary = "#18181b", // Zinc-900 (almost black)
+            AppbarBackground = "#f7f7f4",
+            AppbarText = "#18181b",
+            Background = "#f7f7f4",
+            Surface = "#ffffff",
+            DrawerBackground = "#f7f7f4",
+            DrawerText = "#52525b", // Zinc-600
+            TextPrimary = "#18181b",
+            TextSecondary = "#52525b",
+            ActionDefault = "#52525b",
+            Divider = "#e4e4e7", // Zinc-200
+            LinesDefault = "#e4e4e7"
         },
         PaletteDark = new PaletteDark()
         {
-            Primary = "#7c3aed",
-            Secondary = "#06b6d4",
-            Tertiary = "#f59e0b",
-            AppbarBackground = "#1e1e2e",
-            Background = "#1e1e2e",
-            Surface = "#313244",
-            DrawerBackground = "#181825",
-            DrawerText = "#cdd6f4",
-            TextPrimary = "#cdd6f4",
-            TextSecondary = "#a6adc8",
+            Primary = "#fafafa", // Zinc-50
+            AppbarBackground = "#09090b", // Zinc-950
+            AppbarText = "#fafafa",
+            Background = "#09090b",
+            Surface = "#18181b", // Zinc-900
+            DrawerBackground = "#09090b",
+            DrawerText = "#a1a1aa", // Zinc-400
+            TextPrimary = "#fafafa",
+            TextSecondary = "#a1a1aa",
+            ActionDefault = "#a1a1aa",
+            Divider = "#27272a", // Zinc-800
+            LinesDefault = "#27272a"
         },
+        LayoutProperties = new LayoutProperties()
+        {
+            DefaultBorderRadius = "6px",
+            AppbarHeight = "64px"
+        }
     };
 
+    protected override void OnInitialized()
+    {
+        _theme.Typography.Default.FontFamily = new[] { "Inter", "Helvetica", "Arial", "sans-serif" };
+    }
+
     private void ToggleDrawer()
     {
         _drawerOpen = !_drawerOpen;
diff --git a/apps/web-client-base-net/src/WebClientBase.Client/Layout/NavMenu.razor b/apps/web-client-base-net/src/WebClientBase.Client/Layout/NavMenu.razor
index 0d401b79..e0887b8d 100644
--- a/apps/web-client-base-net/src/WebClientBase.Client/Layout/NavMenu.razor
+++ b/apps/web-client-base-net/src/WebClientBase.Client/Layout/NavMenu.razor
@@ -1,17 +1,17 @@
 <MudNavMenu>
-    <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">
+    <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Rounded.Home">
         Home
     </MudNavLink>
-    <MudNavLink Href="/products" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.ShoppingCart">
+    <MudNavLink Href="/products" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Rounded.ShoppingCart">
         Products
     </MudNavLink>
-    <MudNavLink Href="/auth" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Person">
+    <MudNavLink Href="/auth" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Rounded.Person">
         Auth
     </MudNavLink>
-    <MudNavLink Href="/counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">
+    <MudNavLink Href="/counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Rounded.Add">
         Counter
     </MudNavLink>
-    <MudNavLink Href="/weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Cloud">
+    <MudNavLink Href="/weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Rounded.Cloud">
         Weather
     </MudNavLink>
 </MudNavMenu>
diff --git a/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/css/app.css b/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/css/app.css
index df578f35..6957c01f 100644
--- a/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/css/app.css
+++ b/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/css/app.css
@@ -9,32 +9,33 @@
    ═══════════════════════════════════════════════════════════════════════════════ */
 :root {
     /* Light Mode Colors */
-    --bg-primary: #ffffff;
-    --bg-secondary: #f5f5f7;
-    --bg-tertiary: #e5e5ea;
+    --bg-primary: #f7f7f4;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #f0f0f0;
     --bg-elevated: #ffffff;
 
-    --text-primary: #1d1d1f;
-    --text-secondary: #6e6e73;
-    --text-tertiary: #8e8e93;
+    --text-primary: #18181b;
+    --text-secondary: #52525b;
+    --text-tertiary: #a1a1aa;
 
-    --accent-primary: #3b82f6;
-    --accent-primary-hover: #2563eb;
-    --accent-success: #22c55e;
+    --accent-primary: #18181b;
+    --accent-primary-hover: #000000;
+    --accent-success: #10b981;
     --accent-warning: #f59e0b;
     --accent-error: #ef4444;
 
-    --border-default: rgba(0, 0, 0, 0.1);
-    --border-strong: rgba(0, 0, 0, 0.2);
+    --border-default: #e4e4e7;
+    --border-strong: #d4d4d8;
 
     /* Glass Effects */
-    --glass-bg: rgba(255, 255, 255, 0.7);
-    --glass-border: rgba(255, 255, 255, 0.3);
-    --glass-blur: 20px;
-    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    --glass-bg: rgba(255, 255, 255, 0.8);
+    --glass-border: rgba(0, 0, 0, 0.05);
+    --glass-blur: 12px;
+    --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
     /* Brand */
-    --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+    --brand-gradient: #18181b;
+    /* Solid black for light mode */
 
     /* Typography */
     --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -59,36 +60,64 @@
 
     /* Border Radius */
     --radius-sm: 0.25rem;
-    --radius-md: 0.5rem;
-    --radius-lg: 0.75rem;
-    --radius-xl: 1rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
     --radius-full: 9999px;
 
     /* Transitions */
-    --transition-fast: 150ms ease;
-    --transition-normal: 250ms ease;
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
 
     /* Sidebar */
-    --sidebar-width: 280px;
+    --sidebar-width: 260px;
 }
 
 /* Dark Mode */
 [data-theme="dark"] {
-    --bg-primary: #000000;
-    --bg-secondary: #1c1c1e;
-    --bg-tertiary: #2c2c2e;
-    --bg-elevated: #1c1c1e;
+    --bg-primary: #09090b;
+    --bg-secondary: #18181b;
+    --bg-tertiary: #27272a;
+    --bg-elevated: #18181b;
 
-    --text-primary: #f5f5f7;
-    --text-secondary: #a1a1a6;
-    --text-tertiary: #6e6e73;
+    --text-primary: #fafafa;
+    --text-secondary: #a1a1aa;
+    --text-tertiary: #71717a;
 
-    --border-default: rgba(255, 255, 255, 0.1);
-    --border-strong: rgba(255, 255, 255, 0.2);
+    --accent-primary: #fafafa;
+    --accent-primary-hover: #ffffff;
 
-    --glass-bg: rgba(28, 28, 30, 0.8);
+    --border-default: #27272a;
+    --border-strong: #3f3f46;
+
+    --glass-bg: rgba(24, 24, 27, 0.8);
     --glass-border: rgba(255, 255, 255, 0.1);
-    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
+
+    --brand-gradient: #fafafa;
+    /* Solid white for dark mode */
+}
+
+/* MudBlazor Overrides for Monochrome Nav */
+.mud-nav-link {
+    border-radius: var(--radius-md) !important;
+    transition: all var(--transition-fast) !important;
+    color: var(--text-secondary) !important;
+}
+
+.mud-nav-link:hover {
+    background-color: var(--bg-tertiary) !important;
+    color: var(--text-primary) !important;
+}
+
+.mud-nav-link.active {
+    background-color: var(--accent-primary) !important;
+    color: var(--bg-primary) !important;
+    /* Invert text color on active */
+}
+
+.mud-nav-link.active .mud-icon-root {
+    color: var(--bg-primary) !important;
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════════
diff --git a/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/index.html b/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/index.html
index 5b372c49..8c6b3b28 100644
--- a/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/index.html
+++ b/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/index.html
@@ -6,19 +6,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GoodGo Web Client Base</title>
     <base href="/" />
-    
-    <!-- EN: Google Fonts - Roboto for MudBlazor -->
-    <!-- VI: Google Fonts - Roboto cho MudBlazor -->
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
-    
+
+    <!-- EN: Google Fonts - Inter -->
+    <!-- VI: Google Fonts - Inter -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- EN: Material Design Icons -->
     <!-- VI: Icons Material Design -->
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
-    
+    <link
+        href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
+        rel="stylesheet">
+
     <!-- EN: MudBlazor CSS -->
     <!-- VI: CSS MudBlazor -->
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
-    
+
     <!-- EN: Custom CSS -->
     <!-- VI: CSS tùy chỉnh -->
     <link rel="stylesheet" href="css/app.css" />
@@ -28,38 +32,61 @@
 
 <body>
     <div id="app">
-        <!-- EN: MudBlazor Loading indicator -->
-        <!-- VI: Chỉ báo đang tải MudBlazor -->
-        <div style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; gap: 1rem; background: #1e1e2e;">
-            <svg class="loading-progress" width="80" height="80" viewBox="0 0 80 80">
-                <circle cx="40" cy="40" r="32" fill="none" stroke="#313244" stroke-width="4" />
-                <circle cx="40" cy="40" r="32" fill="none" stroke="#7c3aed" stroke-width="4" 
-                        stroke-dasharray="200" stroke-dashoffset="60" 
-                        style="animation: spin 1s linear infinite; transform-origin: center;">
+        <!-- EN: Loading indicator -->
+        <!-- VI: Chỉ báo đang tải -->
+        <div
+            style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; gap: 1rem; background: #f7f7f4; color: #26251e;">
+            <svg class="loading-progress" width="48" height="48" viewBox="0 0 80 80">
+                <circle cx="40" cy="40" r="32" fill="none" stroke="#e5e5e5" stroke-width="6" />
+                <circle cx="40" cy="40" r="32" fill="none" stroke="#26251e" stroke-width="6" stroke-dasharray="200"
+                    stroke-dashoffset="60" style="animation: spin 1s linear infinite; transform-origin: center;">
                 </circle>
             </svg>
-            <p style="color: #a6adc8; font-family: Roboto, sans-serif;">Loading GoodGo... / Đang tải...</p>
+            <p style="color: #666; font-family: 'Inter', sans-serif; font-size: 0.875rem;">Loading GoodGo...</p>
         </div>
-        
+
         <style>
+            @media (prefers-color-scheme: dark) {
+                #app>div {
+                    background: #09090b !important;
+                    color: #fafafa !important;
+                }
+
+                .loading-progress circle:first-child {
+                    stroke: #27272a !important;
+                }
+
+                .loading-progress circle:last-child {
+                    stroke: #fafafa !important;
+                }
+
+                #app p {
+                    color: #a1a1aa !important;
+                }
+            }
+
             @keyframes spin {
-                to { transform: rotate(360deg); }
+                to {
+                    transform: rotate(360deg);
+                }
             }
         </style>
     </div>
 
-    <div id="blazor-error-ui" style="display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem; background: #f38ba8; color: #1e1e2e; text-align: center;">
+    <div id="blazor-error-ui"
+        style="display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem; background: #f38ba8; color: #1e1e2e; text-align: center;">
         An unhandled error has occurred. / Đã xảy ra lỗi.
-        <a href="." class="reload" style="color: #1e1e2e; text-decoration: underline; margin-left: 1rem;">Reload / Tải lại</a>
+        <a href="." class="reload" style="color: #1e1e2e; text-decoration: underline; margin-left: 1rem;">Reload / Tải
+            lại</a>
         <span class="dismiss" style="cursor: pointer; margin-left: 1rem;">✕</span>
     </div>
-    
+
     <!-- EN: Blazor WebAssembly -->
     <script src="_framework/blazor.webassembly.js"></script>
-    
+
     <!-- EN: MudBlazor JavaScript -->
     <!-- VI: JavaScript MudBlazor -->
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file