Doormile/doormilxpress_astryx
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the changes and fix on the all the pages

Browse Source
This commit is contained in:
dharaneesh-r
2026-09-19 12:09:45 +05:30
parent 8e87947c5f
commit a044afc614
40 changed files with 232 additions and 2559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/layouts/AdminLayout.jsx
View File

@@ -2,12 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import {
Activity, Bell, Bike, Building2, Car, ChevronDown, Coins, FileSpreadsheet,
Activity, Bell, Bike, Car, ChevronDown, Coins, FileSpreadsheet,
FileText, IndianRupee, ListTodo, LogOut, Menu, Search, Settings, Shield,
ShieldAlert, User, UserCheck, Users, Warehouse,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { DOORMILE_MARK_URL, DOORMILE_WORDMARK_URL } from '@/assets/brand';
import { DOORMILE_MARK_URL } from '@/assets/brand';
import { Avatar } from '@/components/ds/Avatar';
import { Badge } from '@/components/ui/badge';
import {
@@ -416,30 +416,48 @@ export default function AdminLayout() {
aria-label={assistantOpen ? 'Close MileTruth' : 'Open MileTruth'}
aria-expanded={assistantOpen}
className={cn(
'grid h-8 w-8 place-items-center rounded-lg transition-colors cursor-pointer',
'grid h-8 w-8 place-items-center rounded-lg transition-all cursor-pointer',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50',
assistantOpen ? 'bg-brand-tint text-brand' : 'text-ink-3 hover:bg-surface-sunken hover:text-ink-1'
// A RING, not a background fill.
//
// The fill was what capped the mark's size: it renders
// behind the image, so a larger mark covered it and the
// control looked dead on hover. That is why the icon sat at
// 20px, then 24px — each bump ate the only affordance the
// button had.
//
// A ring draws at the button's edge instead, so it stays
// visible whatever the mark's size, and the icon is free to
// be as large as the 32px box allows. The tint is kept
// underneath for the open state, where it still shows
// around the mark's transparent corners.
assistantOpen
? 'bg-brand-tint text-brand ring-2 ring-brand/30'
: 'text-ink-3 hover:bg-surface-sunken hover:text-ink-1 hover:ring-2 hover:ring-brand/20'
)}
>
{/* 24px inside a 32px button.
{/* 28px, filling the 32px button.
Started at `h-9 w-9 max-w-none` — a 36px image in a 32px
button, so the mark overflowed its own control by 2px on
every side. That broke the row's alignment against the
bell and avatar AND covered the button completely, leaving
`hover:bg-surface-sunken` nowhere to render, so the control
looked dead on hover while its neighbours lit up.
The size history is worth keeping, because each step was
forced by the hover treatment rather than by taste. It
began at `h-9 w-9 max-w-none` — 36px inside a 32px button,
overflowing its own control by 2px on every side, which
broke the row's alignment against the bell and avatar and
covered the button so the hover fill had nowhere to show.
20px fixed both and read as too faint. 24px was as far as
it could go while a background fill was still the
affordance.
Dropped to 20px to fix both, which read as too faint next
to the bell. 24px is the ceiling that keeps the fix: it
leaves 4px of button on every side, which is what the
hover tint needs to be visible as a ring around the mark.
Anything larger and the tint disappears again.
Moving that affordance to a ring (see the button above)
removed the cap, so this is sized for legibility rather
than around a constraint: 28px in a 32px box, and
comfortably larger than the Bell's 16px — which is right,
because a brand mark carrying its own circular frame reads
smaller than its box where a stroked icon reads full-size.
Bigger than the Bell's 16px on purpose — this is a brand
mark carrying its own circular frame, so it reads smaller
than its box, where a stroked icon reads full-size. */}
<img className="h-6 w-6 object-contain" src={doormileMark} alt="" aria-hidden="true" />
`object-contain` with no `max-w-none`, so it can never
overflow the button again however the asset changes. */}
<img className="h-7 w-7 object-contain" src={doormileMark} alt="" aria-hidden="true" />
</button>
)}