2a228ea659
Phase 2 of the "fully MUI" cleanup — eliminates two more stylesheets.
- base.css -> src/admin/GlobalStyles.tsx: the reset, typography,
scrollbar/::selection, theme cross-fade timing and all utility
classes now live in a single theme-aware MUI <GlobalStyles>, rendered
inside MuiProvider so every rule resolves against theme.vars (verified
reactive in both schemes). base.css deleted.
- attendance.css -> a styled("div") LocationMap in AttendanceLocation;
attendance.css deleted.
- App.tsx bootstrap loader is now fully self-contained (inline spinner
+ keyframes, theme-aware background read from the data-theme attr),
since it renders before MuiProvider/GlobalStyles mount — it no longer
depends on the removed .admin-spinner / var(--bg-primary).
tsc -b --noEmit and npm run build clean; verified in Chrome (light +
dark): body bg, text, fonts, .text-warning/.link-accent all correct.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { Suspense } from "react";
|
|
import { Routes, Route } from "react-router-dom";
|
|
import AdminApp from "./admin/AdminApp";
|
|
|
|
// Bootstrap loader: renders before MuiProvider (and its global styles) mount,
|
|
// so it must be fully self-contained — no theme vars, no global CSS classes.
|
|
// Background follows the persisted theme attribute set by ThemeContext.
|
|
function AdminLoader() {
|
|
const light =
|
|
typeof document !== "undefined" &&
|
|
document.documentElement.getAttribute("data-theme") === "light";
|
|
return (
|
|
<div
|
|
style={{
|
|
minHeight: "100dvh",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: light ? "#f4f3f1" : "#0f0f0f",
|
|
}}
|
|
>
|
|
<style>{"@keyframes boha-boot-spin{to{transform:rotate(360deg)}}"}</style>
|
|
<div
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
border: "2px solid #d63031",
|
|
borderTopColor: "transparent",
|
|
borderRadius: "50%",
|
|
animation: "boha-boot-spin 0.8s linear infinite",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<Suspense fallback={<AdminLoader />}>
|
|
<Routes>
|
|
<Route path="/*" element={<AdminApp />} />
|
|
</Routes>
|
|
</Suspense>
|
|
);
|
|
}
|