updates on the ui changes including the logo and header

This commit is contained in:
2026-07-18 10:54:13 +05:30
parent 6c70d5e15f
commit c4b1c580d8
2 changed files with 35 additions and 8 deletions

View File

@@ -1,7 +1,8 @@
// ==============================|| DOORMILE WORDMARK LOGO ||============================== // // ==============================|| DOORMILE WORDMARK LOGO ||============================== //
// Uses the brand wordmark asset (white PNG). `onDark` shows it as-is on dark/red // Uses the brand wordmark asset (white PNG). `onDark` shows it as-is on dark/red
// surfaces; on light surfaces it is recoloured to near-black. `compact` (e.g. the // surfaces; on light surfaces it is recoloured to near-black. `compact` (e.g. the
// navbar) renders the square navbar mark instead, since the wordmark won't fit. // collapsed navbar rail) pairs the round navbar mark with a "Doormile" text
// wordmark instead, since the full wordmark image is too wide to fit there.
const LOGO_SRC = '/Doormile-logo.png'; const LOGO_SRC = '/Doormile-logo.png';
const NAVBAR_MARK_SRC = '/navbarLogo.png'; const NAVBAR_MARK_SRC = '/navbarLogo.png';
@@ -9,18 +10,48 @@ const NAVBAR_MARK_SRC = '/navbarLogo.png';
export default function Logo({ onDark = false, compact = false, height = 26, size = 64, style = {} }) { export default function Logo({ onDark = false, compact = false, height = 26, size = 64, style = {} }) {
if (compact) { if (compact) {
return ( return (
<div style={{ display: 'flex', alignItems: 'center', ...style }}> <div
style={{
display: 'flex',
alignItems: 'center',
gap: 9,
// Nudges the mark so its optical centre lines up with the collapsed
// sidebar's icon column directly beneath it (measured ~2px apart —
// the two live in separate layout trees with their own padding, so
// this small correction keeps them reading as one straight column).
marginInlineStart: 2,
...style
}}
>
<img <img
src={NAVBAR_MARK_SRC} src={NAVBAR_MARK_SRC}
alt="Doormile" // Adjacent text already announces the brand name, so the mark stays
// decorative here rather than making screen readers say it twice.
alt=""
style={{ style={{
width: size, width: size,
height: size, height: size,
display: 'block', display: 'block',
objectFit: 'cover', objectFit: 'cover',
flexShrink: 0 flexShrink: 0,
// Matches the mark's original standalone (pre-wordmark) visual
// size exactly — scaling only the icon, not the row, keeps the
// new "Doormile" text at its own natural size beside it.
transform: 'scale(1.4)'
}} }}
/> />
<span
style={{
fontSize: 20,
fontWeight: 700,
letterSpacing: '-0.01em',
lineHeight: 1,
whiteSpace: 'nowrap',
color: onDark ? '#ffffff' : '#0A1317'
}}
>
Doormile
</span>
</div> </div>
); );
} }

View File

@@ -47,10 +47,6 @@ export default function Header({ isSidebarCollapsed }) {
compact={isSidebarCollapsed} compact={isSidebarCollapsed}
size={isSidebarCollapsed ? 36 : 32} size={isSidebarCollapsed ? 36 : 32}
height={28} height={28}
// Scaling visually enlarges the mark without growing its layout
// box, so the navbar row keeps its original width/height instead
// of stretching taller every time the logo gets bigger.
style={isSidebarCollapsed ? { transform: 'scale(1.4)' } : undefined}
/> />
} }
headingHref="/dashboard" headingHref="/dashboard"