updates on the ui changes including the logo and header
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user