admin/pos-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Update application theme with Inter font, new MudBlazor color palettes, refined loading indicator, and enhanced app bar navigation.

Browse Source
This commit is contained in:
Ho Ngoc Hai
2026-01-19 09:57:41 +07:00
parent ab9d202c6e
commit 31d8e0100c
4 changed files with 165 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor
View File

@@ -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;

10
apps/web-client-base-net/src/WebClientBase.Client/Layout/NavMenu.razor
View File

@@ -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>

95
apps/web-client-base-net/src/WebClientBase.Client/wwwroot/css/app.css
View File

@@ -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;
}
/* ═══════════════════════════════════════════════════════════════════════════════

75
apps/web-client-base-net/src/WebClientBase.Client/wwwroot/index.html
View File

@@ -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>