From 2e4a51d0186cc2415a6fa5e786acc645191585b5 Mon Sep 17 00:00:00 2001 From: "Foluso ADEBISI (DevBox Aux)" Date: Thu, 1 Oct 2026 04:08:09 +0100 Subject: [PATCH] feat(ui): Youreka favicon, logout confirmation, nav active states, brand alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- tools/public/assets/cropper/index.html | 3 +- tools/public/assets/fp/index.html | 3 +- tools/public/assets/style.css | 16 ++++++++- tools/public/assets/youreka-favicon.png | Bin 0 -> 4883 bytes tools/public/index.html | 3 +- tools/server.js | 43 ++++++++++++++++++++++-- tools/test/server.test.js | 23 ++++++++++++- 7 files changed, 83 insertions(+), 8 deletions(-) create mode 100644 tools/public/assets/youreka-favicon.png diff --git a/tools/public/assets/cropper/index.html b/tools/public/assets/cropper/index.html index ad0ebc7..40e9626 100644 --- a/tools/public/assets/cropper/index.html +++ b/tools/public/assets/cropper/index.html @@ -7,12 +7,13 @@ - + + diff --git a/tools/public/assets/fp/index.html b/tools/public/assets/fp/index.html index 8309c00..4945471 100644 --- a/tools/public/assets/fp/index.html +++ b/tools/public/assets/fp/index.html @@ -7,9 +7,10 @@ - + + diff --git a/tools/public/assets/style.css b/tools/public/assets/style.css index e270c6a..a0643d6 100644 --- a/tools/public/assets/style.css +++ b/tools/public/assets/style.css @@ -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 */ diff --git a/tools/public/assets/youreka-favicon.png b/tools/public/assets/youreka-favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..bd5da5f8740c9b8f89ea868fb1c4f8f9bbcffc97 GIT binary patch literal 4883 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 - + +