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;