Design updates

This commit is contained in:
MarcWieland
2026-06-08 23:52:22 +02:00
parent f92dd2659c
commit 2029524379
12 changed files with 436 additions and 48 deletions
@@ -14,13 +14,13 @@
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 2px solid #3F51B5;
border: 2px solid #0EA5E9;
}
.timebot-launcher:hover {
transform: scale(1.1) translateY(-4px);
box-shadow: 0 12px 28px rgba(63, 81, 181, 0.4);
border-color: #1A237E;
box-shadow: 0 12px 28px rgba(14, 165, 233, 0.4);
border-color: #0284C7;
}
.timebot-launcher img {
@@ -83,7 +83,7 @@
/* Header */
.timebot-header {
background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%);
background: #0F172A;
padding: 14px 16px;
display: flex;
align-items: center;
@@ -211,10 +211,10 @@
}
.user-bubble {
background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%);
background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
color: white;
border-bottom-right-radius: 4px;
box-shadow: 0 4px 12px rgba(63, 81, 181, 0.2);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}
/* Typing Indicator */
@@ -271,8 +271,8 @@
}
.timebot-suggestions button:hover {
background: rgba(63, 81, 181, 0.15);
border-color: #3F51B5;
background: rgba(14, 165, 233, 0.15);
border-color: #0EA5E9;
color: white;
transform: translateY(-1px);
}
@@ -300,9 +300,9 @@
}
.timebot-input:focus {
border-color: #3F51B5;
border-color: #0EA5E9;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}
.timebot-send-btn {
@@ -319,7 +319,7 @@
}
.timebot-send-btn:hover {
background: #e3e6ff;
background: #e0f2fe;
transform: scale(1.05);
}
@@ -11,7 +11,7 @@
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="2" Style="background: linear-gradient(90deg, #3F51B5 0%, #1A237E 100%);">
<MudAppBar Elevation="2" Style="background: #0F172A;">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="ToggleDrawer" />
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="ml-2">
<MudIcon Icon="@Icons.Material.Filled.AccessTime" Style="color:white; font-size:1.6rem" />
@@ -64,17 +64,17 @@
{
PaletteLight = new PaletteLight
{
Primary = "#3F51B5",
PrimaryDarken = "#1A237E",
PrimaryLighten = "#7986CB",
Secondary = "#009688",
SecondaryDarken = "#00695C",
AppbarBackground = "#3F51B5",
Background = "#F4F6F9",
Primary = "#1E293B",
PrimaryDarken = "#0F172A",
PrimaryLighten = "#475569",
Secondary = "#0EA5E9",
SecondaryDarken = "#0284C7",
AppbarBackground = "#0F172A",
Background = "#F8FAFC",
DrawerBackground = "#FFFFFF",
Surface = "#FFFFFF",
TextPrimary = "#212121",
TextSecondary = "#757575",
TextPrimary = "#0F172A",
TextSecondary = "#475569",
}
};
@@ -1,8 +1,9 @@
<div style="display:flex; flex-direction:column; height:100%;">
<div style="display:flex; flex-direction:column; height:100%;">
<MudNavMenu Style="flex:1">
<MudDivider Class="mb-2" />
<MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.CalendarMonth">Wochenübersicht</MudNavLink>
<MudNavLink Href="month" Icon="@Icons.Material.Filled.CalendarViewMonth">Monatsübersicht</MudNavLink>
<MudNavLink Href="stats" Icon="@Icons.Material.Filled.BarChart">Statistiken</MudNavLink>
<MudNavLink Href="feiertage" Icon="@Icons.Material.Filled.Celebration">Feiertage</MudNavLink>
<MudNavLink Href="urlaub-maximizer" Icon="@Icons.Material.Filled.AutoAwesome">Urlaubs-Maximizer</MudNavLink>
<MudNavLink Href="settings" Icon="@Icons.Material.Filled.Settings">Einstellungen</MudNavLink>
@@ -16,21 +17,25 @@
<AuthorizeView>
<Authorized>
<MudDivider />
<MudStack Row="true" AlignItems="AlignItems.Center" Class="px-4 py-2" Spacing="1">
<MudIcon Icon="@Icons.Material.Filled.AccountCircle" Color="Color.Primary" Size="Size.Small" />
<MudText Typo="Typo.body2" Style="font-weight:600">@context.User.Identity?.Name</MudText>
</MudStack>
<MudNavMenu>
<MudNavLink Href="/auth/logout" Icon="@Icons.Material.Filled.Logout">Abmelden</MudNavLink>
</MudNavMenu>
@* Username Display - Styled to match NavLink layout exactly *@
<div class="mud-nav-link px-4 py-3" style="display: flex; align-items: center; color: var(--mud-palette-text-secondary); cursor: default; user-select: none;">
<MudIcon Icon="@Icons.Material.Filled.AccountCircle" Class="mr-6" Size="Size.Medium" Style="color: var(--mud-palette-text-secondary);" />
<MudText Typo="Typo.body2" Style="font-weight: 600; color: var(--mud-palette-text-primary);">@context.User.Identity?.Name</MudText>
</div>
</Authorized>
</AuthorizeView>
<MudTooltip Text="Changelog anzeigen" Placement="Placement.Top">
<MudNavMenu>
<MudNavMenu>
<AuthorizeView>
<Authorized>
<MudNavLink Href="/auth/logout" Icon="@Icons.Material.Filled.Logout">Abmelden</MudNavLink>
</Authorized>
</AuthorizeView>
<MudTooltip Text="Changelog anzeigen" Placement="Placement.Top">
<MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases"
Style="color: var(--mud-palette-text-disabled); font-size:0.75rem;">
Version 1.4
</MudNavLink>
</MudNavMenu>
</MudTooltip>
</MudTooltip>
</MudNavMenu>
</div>