Scrubs McBarkley
afde6b7857
Replace all hardcoded brand color hex values with CSS custom properties so BrandingContext drives both the customer portal and staff site. - index.css: add derived accent/primary vars using color-mix() (--color-accent-hover, --color-accent-dark, --color-accent-light, --color-accent-lighter, --color-primary-dark); fix focus ring styles to use var(--color-primary) instead of hardcoded hex - BrandingContext.tsx: also update <meta name="theme-color"> in sync with primaryColor so PWA theme-color tracks branding at runtime - portal/sections: replace bg-[#8b7355], text-[#6b5a42], bg-[#f0ebe4], bg-[#faf5ef], hover:bg-[#7a6549] etc. with Tailwind v4 CSS var utilities (bg-(--color-accent), text-(--color-accent-dark), etc.) - pages: replace inline style "#4f8a6f"/"#3d7a5f" with var(--color-primary) / var(--color-primary-dark) across Appointments, Book, Clients, GroupBooking, Invoices, Reports, Services, Staff, and DevSessionIndicator Closes #91 Co-Authored-By: Paperclip <noreply@paperclip.ing>
42 lines
896 B
TypeScript
42 lines
896 B
TypeScript
import { Link } from "react-router-dom";
|
|
import { getDevUser } from "../pages/DevLoginSelector.js";
|
|
|
|
export function DevSessionIndicator() {
|
|
const user = getDevUser();
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
background: "#1a202c",
|
|
color: "#e2e8f0",
|
|
padding: "0.4rem 1rem",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: "0.75rem",
|
|
fontSize: 12,
|
|
zIndex: 9999,
|
|
}}
|
|
>
|
|
<span>
|
|
Dev mode: acting as <strong>{user.name}</strong> ({user.type})
|
|
</span>
|
|
<Link
|
|
to="/login"
|
|
style={{
|
|
color: "var(--color-primary)",
|
|
textDecoration: "underline",
|
|
fontSize: 12,
|
|
}}
|
|
>
|
|
Switch user
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|