gitea_admin/zurich_kotak_pwa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The real mark in the app bar

Browse Source 
Same change as the console's masthead, in the two places this app draws the
brand: the app bar and the drawer head. The circled "Z" and the letter-spaced
wordmark were type imitating a logo; the asset is the logo, and it carries
both lines of the wordmark on its own plate, so nothing is set beside it.

26px on a 56px bar leaves the burger a thumb's width to its left and the
avatar to its right at 390px.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-10 18:55:52 +05:30
parent 3bc7d4c355
commit 5b30cfd647
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/layout/Shell.jsx
View File

@ -5,6 +5,7 @@ import { rolesOf, visibleStages } from '../api/permissions.js'
import { useStageCounts } from '../api/portfolio.jsx' import { useStageCounts } from '../api/portfolio.jsx'
import { useZino } from '../api/provider.jsx' import { useZino } from '../api/provider.jsx'
import AskDesk from '../components/AskDesk.jsx' import AskDesk from '../components/AskDesk.jsx'
import logo from '../assets/brand/zurich_logo.webp'
/** /**
@ -85,10 +86,10 @@ export default function Shell() {
<button type="button" className="appbar__burger" aria-label="Open the menu" onClick={() => setOpen(true)}> <button type="button" className="appbar__burger" aria-label="Open the menu" onClick={() => setOpen(true)}>
<svg viewBox="0 0 22 22" fill="none"><path d="M3 6h16M3 11h16M3 16h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg> <svg viewBox="0 0 22 22" fill="none"><path d="M3 6h16M3 11h16M3 16h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
</button> </button>
<div className="appbar__brand"> {/* The real mark rather than type set to look like it — see the
<span className="appbar__z" aria-hidden="true">Z</span> console's masthead. Bundled from src/assets, so the URL is
<span className="appbar__word">ZURICH <span>kotak</span></span> rewritten relative and resolves under the sub-path mount. */}
</div> <img className="appbar__logo" src={logo} alt="Zurich Kotak General Insurance" />
<button type="button" className="appbar__me" aria-label="Your account" onClick={() => setMe(true)}> <button type="button" className="appbar__me" aria-label="Your account" onClick={() => setMe(true)}>
{initials(user)} {initials(user)}
</button> </button>
@ -106,8 +107,7 @@ export default function Shell() {
<button type="button" className="drawer__x" aria-label="Close the menu" onClick={() => setOpen(false)}> <button type="button" className="drawer__x" aria-label="Close the menu" onClick={() => setOpen(false)}>
<svg viewBox="0 0 20 20" fill="none"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"/></svg> <svg viewBox="0 0 20 20" fill="none"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"/></svg>
</button> </button>
<span className="appbar__z" aria-hidden="true">Z</span> <img className="appbar__logo" src={logo} alt="Zurich Kotak General Insurance" />
<span className="appbar__word">ZURICH <span>kotak</span></span>
</div> </div>
<div className="drawer__body"> <div className="drawer__body">
<NavLink to="/" end onClick={() => setOpen(false)} className={({ isActive }) => 'nav' + (isActive ? ' is-on' : '')}> <NavLink to="/" end onClick={() => setOpen(false)} className={({ isActive }) => 'nav' + (isActive ? ' is-on' : '')}>

14
src/styles/app.css
View File

@ -33,14 +33,14 @@ button { font: inherit; }
} }
.appbar__burger svg { width: 22px; height: 22px; } .appbar__burger svg { width: 22px; height: 22px; }
.appbar__burger:active { background: rgba(255,255,255,.14); } .appbar__burger:active { background: rgba(255,255,255,.14); }
.appbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .appbar__logo {
.appbar__z { /* The mark as artwork, not as type. 26px on a 56px bar leaves a thumb-sized
width: 30px; height: 30px; flex: none; border-radius: 50%; burger to its left and the avatar to its right on a 390px screen; the
display: grid; place-items: center; asset carries its own plate and both lines of the wordmark, so nothing is
background: #fff; color: var(--zk-navy); font-weight: 700; font-size: 16px; set in type beside it. Used in the drawer head too, which is the same
navy bar. */
flex: none; display: block; height: 26px; width: auto; border-radius: 5px;
} }
.appbar__word { font-size: 16px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.appbar__word span { font-weight: 400; letter-spacing: 0; opacity: .85; }
.appbar__me { .appbar__me {
margin-left: auto; flex: none; margin-left: auto; flex: none;
width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;