YOUreka/tools-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Youreka favicon, logout confirmation, nav active states, brand alignment

Browse Source 
- favicon is the Youreka logo (64px PNG generated from the source mark),
  on the tools pages and server error pages
- signing out asks first: a Carbon cds-modal (Cancel / danger Sign out)
  shared by the header and the mobile side nav; Cancel closes, Sign out
  confirms and logs out
- the current tool is now visibly selected: Carbon marks active nav via
  a[aria-current=page] INSIDE the shadow, but aria-current sits on the
  host, so the rule never matched — the header item now gets a blue
  underline and the side-nav link a blue left border (via ::part(link)
  for colour, plus the host for the marker)
- logo and wordmark are middle-aligned inside a flex brand wrapper
- tests: favicon/modal/signout-trigger markup and the active-tool marking
  on both navs (45 total)
This commit is contained in:
adebisi-fa
2026-10-01 04:08:09 +01:00
parent 17c407883d
commit 2e4a51d018
7 changed files with 83 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/public/assets/style.css
+15 -1
View File
@@ -29,9 +29,23 @@ cds-tile, cds-clickable-tile { display: block; }
/* ── header + side nav (Carbon ui-shell) ────────────────────────────────── */
cds-header:not(:defined), cds-side-nav:not(:defined) { visibility: hidden; }
.brand-logo { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cds-border-subtle, #e0e0e0); border-radius: 4px; padding: 2px; margin-right: 0.5rem; }
.brand-inner { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-logo { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cds-border-subtle, #e0e0e0); border-radius: 4px; padding: 2px; }
.brand-logo img { display: block; }
.brand-suffix { color: var(--cds-text-secondary, #525252); font-weight: 400; }
/* the current tool is marked on the hosts (aria-current sits outside the shadow,
so Carbon's own [aria-current=page] rule never matches) */
cds-header-nav-item[aria-current="page"] {
border-bottom: 2px solid var(--cds-border-interactive, #0f62fe);
font-weight: 600;
}
cds-header-nav-item[aria-current="page"]::part(link) { color: var(--cds-text-primary, #161616); }
cds-side-nav-link[aria-current="page"] {
border-left: 3px solid var(--cds-border-interactive, #0f62fe);
font-weight: 600;
}
cds-side-nav-link[aria-current="page"]::part(link) { color: var(--cds-text-primary, #161616); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; padding-right: 1rem; }
.header-agent { margin-left: 1rem; }
/* mobile: account actions live in the side nav, not the header */