feat: Refactor dashboard screens to Modern Deep Dark style #74
@@ -6,9 +6,9 @@
|
|||||||
|
|
||||||
@if (!_isFullyLoaded)
|
@if (!_isFullyLoaded)
|
||||||
{
|
{
|
||||||
<div class="app-preloader" style="backdrop-filter: blur(15px); background: rgba(18, 18, 18, 0.95); z-index: 100000;">
|
<div class="app-preloader" style="backdrop-filter: blur(15px); background: rgba(18, 18, 18, 0.95); z-index: 100000; color: #ffffff;">
|
||||||
<div class="preloader-spinner"></div>
|
<div class="preloader-spinner"></div>
|
||||||
|
|
|||||||
<div class="preloader-text">Synchronizing Secure Session...</div>
|
<div class="preloader-text" style="color: #ffffff;">Synchronizing Secure Session...</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -46,49 +46,49 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="sidebar-nav">
|
<nav class="sidebar-nav">
|
||||||
<NavLink class="nav-item" href="/dashboard" Match="NavLinkMatch.All" @onclick="CloseMobileMenu" title="Pulpit">
|
<NavLink class="nav-item" href="/dashboard" Match="NavLinkMatch.All" @onclick="CloseMobileMenu" title="Pulpit" aria-label="Pulpit">
|
||||||
|
Antigravity
commented
Include explicit Include explicit `aria-label` on each NavLink for screen readers (e.g., `aria-label="Dashboard"`).
|
|||||||
<div class="nav-icon">
|
<div class="nav-icon">
|
||||||
<NexusIcon Name="home" Size="20" />
|
<NexusIcon Name="home" Size="20" />
|
||||||
</div>
|
</div>
|
||||||
<span class="nav-text">Pulpit</span>
|
<span class="nav-text">Pulpit</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink class="nav-item" href="/catalog" @onclick="CloseMobileMenu" title="Katalog">
|
<NavLink class="nav-item" href="/catalog" @onclick="CloseMobileMenu" title="Katalog" aria-label="Katalog">
|
||||||
<div class="nav-icon">
|
<div class="nav-icon">
|
||||||
<NexusIcon Name="layout" Size="20" />
|
<NexusIcon Name="layout" Size="20" />
|
||||||
</div>
|
</div>
|
||||||
<span class="nav-text">Katalog</span>
|
<span class="nav-text">Katalog</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink class="nav-item" href="/my-books" @onclick="CloseMobileMenu" title="Moje">
|
<NavLink class="nav-item" href="/my-books" @onclick="CloseMobileMenu" title="Moje" aria-label="Moje">
|
||||||
<div class="nav-icon">
|
<div class="nav-icon">
|
||||||
<NexusIcon Name="book-open" Size="20" />
|
<NexusIcon Name="book-open" Size="20" />
|
||||||
</div>
|
</div>
|
||||||
|
Antigravity
commented
Provide a visible focus style for navigation items (CSS Provide a visible focus style for navigation items (CSS `:focus-visible`).
|
|||||||
<span class="nav-text">Moje</span>
|
<span class="nav-text">Moje</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink class="nav-item" href="/profile" @onclick="CloseMobileMenu" title="Konto">
|
<NavLink class="nav-item" href="/profile" @onclick="CloseMobileMenu" title="Konto" aria-label="Konto">
|
||||||
<div class="nav-icon">
|
<div class="nav-icon">
|
||||||
<NexusIcon Name="user" Size="20" />
|
<NexusIcon Name="user" Size="20" />
|
||||||
</div>
|
</div>
|
||||||
<span class="nav-text">Konto</span>
|
<span class="nav-text">Konto</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink class="nav-item" href="/concepts-map" @onclick="CloseMobileMenu" title="Mapa Pojęć">
|
<NavLink class="nav-item" href="/concepts-map" @onclick="CloseMobileMenu" title="Mapa Pojęć" aria-label="Mapa Pojęć">
|
||||||
<div class="nav-icon">
|
<div class="nav-icon">
|
||||||
<NexusIcon Name="map" Size="20" />
|
<NexusIcon Name="map" Size="20" />
|
||||||
</div>
|
</div>
|
||||||
<span class="nav-text">Mapa Pojęć</span>
|
<span class="nav-text">Mapa Pojęć</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink class="nav-item" href="/intelligence" @onclick="CloseMobileMenu" title="Globalne AI">
|
<NavLink class="nav-item" href="/intelligence" @onclick="CloseMobileMenu" title="Globalne AI" aria-label="Globalne AI">
|
||||||
<div class="nav-icon">
|
<div class="nav-icon">
|
||||||
<NexusIcon Name="robot" Size="20" />
|
<NexusIcon Name="robot" Size="20" />
|
||||||
</div>
|
</div>
|
||||||
<span class="nav-text">Globalne AI</span>
|
<span class="nav-text">Globalne AI</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink class="nav-item" href="/settings" @onclick="CloseMobileMenu" title="Ustawienia">
|
<NavLink class="nav-item" href="/settings" @onclick="CloseMobileMenu" title="Ustawienia" aria-label="Ustawienia">
|
||||||
<div class="nav-icon">
|
<div class="nav-icon">
|
||||||
<NexusIcon Name="settings" Size="20" />
|
<NexusIcon Name="settings" Size="20" />
|
||||||
</div>
|
</div>
|
||||||
<span class="nav-text">Ustawienia</span>
|
<span class="nav-text">Ustawienia</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink class="nav-item" href="/concenters" @onclick="CloseMobileMenu" title="Koncentry">
|
<NavLink class="nav-item" href="/concenters" @onclick="CloseMobileMenu" title="Koncentry" aria-label="Koncentry">
|
||||||
<div class="nav-icon">
|
<div class="nav-icon">
|
||||||
<NexusIcon Name="target" Size="20" />
|
<NexusIcon Name="target" Size="20" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -66,6 +66,11 @@
|
|||||||
background: rgba(255, 255, 255, 0.01);
|
background: rgba(255, 255, 255, 0.01);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::deep .nav-item:focus-visible {
|
||||||
|
outline: 2px solid #10b981;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
::deep .nav-item.active {
|
::deep .nav-item.active {
|
||||||
color: #10b981;
|
color: #10b981;
|
||||||
background: rgba(16, 185, 129, 0.04);
|
background: rgba(16, 185, 129, 0.04);
|
||||||
|
|||||||
Reference in New Issue
Block a user
Add a higher‑contrast text color for the preloader message (e.g.,
color: #fff).