tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

feat(admin): design system audit fixes

Browse Source 
- Add CSS design tokens for consistency (--admin-danger-hover, --admin-accent-dot, shadow-md warm tone)
- Replace unicode icons with inline SVG (⋮, ✕, ▼, ▶)
- Consolidate duplicate PageHeader/AdminPageHeader components
- Standardize border-radius (rounded-xl → rounded-lg for ViewModeTabs)
- Remove hardcoded brand UUID in products page
- Replace hardcoded bg-red-600 with CSS variables in delete buttons
- Add AdminButton, AdminFilterTabs, AdminSearchInput, PageHeader design system components
- Fix GlassModal and AdminModal close button styling
- Remove duplicate 'New Lot' button on Route Trace dashboard
This commit is contained in:
default
2026-06-02 03:31:54 +00:00
parent 15e939ad7e
commit 7203cf1ead
65 changed files with 3478 additions and 3176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/GlassModal.tsx
+7 -28
View File
@@ -11,7 +11,7 @@ type Props = {
maxWidth?: string;
};
export default function GlassModal({ title, titleIcon, subtitle, onClose, children, maxWidth = "max-w-md" }: Props) {
export default function GlassModal({ title, titleIcon, subtitle, onClose, children, maxWidth = "max-w-lg" }: Props) {
// Lock body scroll
useEffect(() => {
document.body.style.overflow = "hidden";
@@ -39,24 +39,14 @@ export default function GlassModal({ title, titleIcon, subtitle, onClose, childr
>
{/* Modal card - solid white with shadow for high contrast */}
<div
className={`relative w-full ${maxWidth} rounded-2xl shadow-2xl`}
style={{
backgroundColor: "#ffffff",
border: "1px solid var(--admin-border)",
boxShadow: "0 25px 50px -12px rgba(60, 56, 37, 0.35), 0 12px 24px -8px rgba(60, 56, 37, 0.2)",
}}
className={`relative w-full ${maxWidth} rounded-2xl bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.15)]`}
>
{/* Subtle top border accent */}
<div
className="absolute top-0 left-0 right-0 h-1 rounded-t-2xl overflow-hidden"
style={{
background: "linear-gradient(90deg, var(--admin-accent) 0%, var(--admin-accent-hover) 100%)",
}}
/>
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[var(--admin-accent)] to-[var(--admin-accent-hover)] rounded-t-2xl" />
{/* Header */}
<div
className="flex items-center justify-between px-6 py-5"
className="flex items-center justify-between px-8 py-6"
style={{ borderBottom: "1px solid var(--admin-border-light)" }}
>
<div className="flex items-center gap-3">
@@ -82,19 +72,8 @@ export default function GlassModal({ title, titleIcon, subtitle, onClose, childr
</div>
<button
onClick={onClose}
className="flex h-9 w-9 items-center justify-center rounded-full transition-all"
style={{
backgroundColor: "rgba(60, 56, 37, 0.04)",
color: "rgba(60, 56, 37, 0.5)",
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "rgba(60, 56, 37, 0.08)";
e.currentTarget.style.color = "rgba(60, 56, 37, 0.7)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = "rgba(60, 56, 37, 0.04)";
e.currentTarget.style.color = "rgba(60, 56, 37, 0.5)";
}}
className="flex h-9 w-9 items-center justify-center rounded-full transition-all duration-150"
style={{ backgroundColor: "var(--admin-bg-subtle)", color: "var(--admin-text-muted)" }}
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -103,7 +82,7 @@ export default function GlassModal({ title, titleIcon, subtitle, onClose, childr
</div>
{/* Content */}
<div className="relative p-6">
<div className="relative px-8 py-8">
{children}
</div>
</div>