boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

refactor(css): migrate Login + file icons off legacy vars, delete variables.css

Browse Source 
Phase 4 (final) of the "fully MUI" cleanup — no custom stylesheets remain
in src/admin (only the third-party quill.snow.css + leaflet.css imports).

- Login.tsx: every var(--glass-*/bg-*/text-*/accent-*/orb-*/border-*/
  font-*/transition) in its sx/inline styles is now an MUI token
  (bgcolor/color/borderColor: "background.paper" / "text.secondary" /
  "divider" / "primary.main"), a channel-alpha (rgba(var(--mui-palette-
  primary-mainChannel) / a)) for tints, or theme.applyStyles("dark", …)
  for the glass-card shadow. The card sx is now a (theme)=>({}) callback.
- Restores the orb drift animation via the MUI keyframes() helper — the
  @keyframes float had been dropped in Phase 1 (the dead-CSS scan missed
  its use inside an sx animation string); recovered verbatim from git.
- ProjectFileManager: the fallback file-icon color uses
  var(--mui-palette-text-secondary).
- variables.css deleted; its import removed from AdminApp (last one).

tsc -b --noEmit + npm run build clean. applyStyles dark-scheme output and
the channel-alpha pattern were both verified live in Chrome via the Quill
editor, which uses the identical constructs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-07 17:45:36 +02:00
parent d424ef8c15
commit 03285c6ff6
4 changed files with 44 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/admin/AdminApp.tsx
View File

@@ -11,7 +11,6 @@ import MuiProvider from "./ui/MuiProvider";
import { LoadingState } from "./ui";
import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";
import "./variables.css";
const Users = lazy(() => import("./pages/Users"));
const Attendance = lazy(() => import("./pages/Attendance"));

2
src/admin/components/ProjectFileManager.tsx
View File

@@ -135,7 +135,7 @@ function getFileIcon(type: string, extension?: string) {
};
const cfg = iconMap[ext] || {
color: "var(--text-muted)",
color: "var(--mui-palette-text-secondary)",
path: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z",
};

78
src/admin/pages/Login.tsx
View File

@@ -5,6 +5,8 @@ import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import CircularProgress from "@mui/material/CircularProgress";
import { keyframes } from "@mui/system";
import type { Theme } from "@mui/material/styles";
import { useAuth } from "../context/AuthContext";
import { useAlert } from "../context/AlertContext";
import { useTheme } from "../../context/ThemeContext";
@@ -14,6 +16,12 @@ import {
} from "../utils/api";
import { TextField, Button, CheckboxField, Field } from "../ui";
// Drift animation for the decorative background orbs (was @keyframes float).
const float = keyframes({
"0%, 100%": { transform: "translate(0, 0)" },
"50%": { transform: "translate(30px, -30px)" },
});
export default function Login() {
const { login, verify2FA, isAuthenticated, loading: authLoading } = useAuth();
const alert = useAlert();
@@ -142,7 +150,7 @@ export default function Login() {
display: "flex",
alignItems: "center",
justifyContent: "center",
bgcolor: "var(--bg-primary)",
bgcolor: "background.default",
}}
>
<CircularProgress />
@@ -155,20 +163,24 @@ export default function Login() {
}
// Shared glass card sx (replaces .admin-login-card)
const cardSx = {
const cardSx = (theme: Theme) => ({
width: "100%",
maxWidth: 420,
maxHeight: "calc(100dvh - 2rem)",
p: { xs: 4, sm: 5 },
background: "var(--glass-bg)",
bgcolor: "background.paper",
backdropFilter: "blur(20px)",
border: "1px solid var(--glass-border)",
borderRadius: "var(--border-radius-lg)",
boxShadow: "var(--glass-shadow)",
border: "1px solid",
borderColor: "divider",
borderRadius: "16px",
boxShadow: "0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04)",
...theme.applyStyles("dark", {
boxShadow: "0 1px 3px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.15)",
}),
position: "relative" as const,
zIndex: 1,
overflowY: "auto" as const,
};
});
// Framer entrance + shake choreography for the card panels (unchanged)
const cardMotion = {
@@ -199,7 +211,7 @@ export default function Login() {
alignItems: "center",
justifyContent: "center",
p: 2,
background: "var(--bg-primary)",
bgcolor: "background.default",
position: "relative",
overflow: "hidden",
boxSizing: "border-box",
@@ -215,10 +227,10 @@ export default function Login() {
pointerEvents: "none",
width: 400,
height: 400,
background: "var(--orb-color-1)",
background: "rgba(var(--mui-palette-primary-mainChannel) / 0.16)",
top: "10%",
left: "20%",
animation: "float 20s ease-in-out infinite",
animation: `${float} 20s ease-in-out infinite`,
}}
/>
<Box
@@ -230,10 +242,10 @@ export default function Login() {
pointerEvents: "none",
width: 320,
height: 320,
background: "var(--orb-color-2)",
background: "rgba(120, 119, 198, 0.13)",
bottom: "20%",
right: "15%",
animation: "float 25s ease-in-out infinite reverse",
animation: `${float} 25s ease-in-out infinite reverse`,
}}
/>
@@ -247,17 +259,18 @@ export default function Login() {
right: "1rem",
width: 44,
height: 44,
background: "var(--glass-bg)",
bgcolor: "background.paper",
backdropFilter: "blur(10px)",
border: "1px solid var(--glass-border)",
color: "var(--text-secondary)",
border: "1px solid",
borderColor: "divider",
color: "text.secondary",
overflow: "hidden",
zIndex: 10,
transition: "var(--transition)",
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
"&:hover": {
background: "var(--glass-bg-solid)",
color: "var(--text-primary)",
borderColor: "var(--border-color-hover)",
bgcolor: "background.paper",
color: "text.primary",
borderColor: "rgba(var(--mui-palette-text-primaryChannel) / 0.15)",
transform: "scale(1.05)",
},
}}
@@ -313,16 +326,13 @@ export default function Login() {
sx={{
fontSize: "1.5rem",
fontWeight: 700,
color: "var(--text-primary)",
fontFamily: "var(--font-heading)",
color: "text.primary",
mb: 1,
}}
>
Interní systém
</Typography>
<Typography
sx={{ color: "var(--text-secondary)", fontSize: "0.95rem" }}
>
<Typography sx={{ color: "text.secondary", fontSize: "0.95rem" }}>
Přihlaste se ke svému účtu
</Typography>
</Box>
@@ -388,8 +398,9 @@ export default function Login() {
width: 56,
height: 56,
borderRadius: "50%",
background: "var(--accent-light)",
color: "var(--accent-color)",
background:
"rgba(var(--mui-palette-primary-mainChannel) / 0.1)",
color: "primary.main",
mb: 2,
}}
>
@@ -410,16 +421,13 @@ export default function Login() {
sx={{
fontSize: "1.5rem",
fontWeight: 700,
color: "var(--text-primary)",
fontFamily: "var(--font-heading)",
color: "text.primary",
mb: 1,
}}
>
Dvoufaktorové ověření
</Typography>
<Typography
sx={{ color: "var(--text-secondary)", fontSize: "0.95rem" }}
>
<Typography sx={{ color: "text.secondary", fontSize: "0.95rem" }}>
{useBackupCode
? "Zadejte jeden ze záložních kódů"
: "Zadejte 6místný kód z autentizační aplikace"}
@@ -492,12 +500,12 @@ export default function Login() {
setTotpCode("");
}}
sx={{
color: "var(--text-secondary)",
color: "text.secondary",
fontSize: "0.875rem",
fontWeight: 400,
textTransform: "none",
"&:hover": {
color: "var(--text-primary)",
color: "text.primary",
textDecoration: "underline",
background: "transparent",
},
@@ -511,12 +519,12 @@ export default function Login() {
variant="text"
onClick={handleBack}
sx={{
color: "var(--text-secondary)",
color: "text.secondary",
fontSize: "0.875rem",
fontWeight: 400,
textTransform: "none",
"&:hover": {
color: "var(--text-primary)",
color: "text.primary",
textDecoration: "underline",
background: "transparent",
},

164
src/admin/variables.css
View File

@@ -1,164 +0,0 @@
/* ============================================================================
CSS Variables
============================================================================ */
:root {
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
/* Shared colors */
--accent-color: #d63031;
--accent-hover: #b52626;
--success: #22c55e;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
--error: var(--danger);
--muted: #9ca3af;
--gradient: #d63031;
--gradient-subtle: rgba(214, 48, 49, 0.9);
/* Shared layout */
--border-radius: 10px;
--border-radius-sm: 8px;
--border-radius-lg: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
/* Motion durations (respect prefers-reduced-motion in code) */
--motion-fast: 0.2s;
--motion-base: 0.25s;
--motion-slow: 0.5s;
--font-heading: "Urbanist", sans-serif;
--font-body: "Plus Jakarta Sans", sans-serif;
--font-mono: "DM Mono", "Menlo", monospace;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--navbar-height: calc(76px + var(--safe-top));
}
/* ---- Dark theme ---- */
[data-theme="dark"] {
--bg-primary: #0f0f0f;
--bg-secondary: #171717;
--bg-tertiary: #1e1e1e;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--text-muted: #666666;
--text-tertiary: #555555;
--border-color: rgba(255, 255, 255, 0.08);
--border-color-hover: rgba(255, 255, 255, 0.15);
--glass-bg: #171717;
--glass-bg-solid: #171717;
--glass-border: rgba(255, 255, 255, 0.08);
--glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
--card-bg: #1a1a1a;
--card-bg-hover: #1e1e1e;
--input-bg: #1a1a1a;
--glow-color: rgba(214, 48, 49, 0.15);
--accent-light: rgba(214, 48, 49, 0.1);
--accent-soft: #2a1a1a;
--accent-glow: rgba(214, 48, 49, 0.3);
--success-light: rgba(34, 197, 94, 0.1);
--success-soft: #1a2a1e;
--warning-light: rgba(245, 158, 11, 0.1);
--warning-soft: #2a2518;
--danger-light: rgba(239, 68, 68, 0.1);
--danger-soft: #2a1a1a;
--info-light: rgba(59, 130, 246, 0.1);
--info-soft: #1a1e2a;
--muted-light: rgba(107, 114, 128, 0.15);
--orb-color-1: rgba(214, 48, 49, 0.2);
--orb-color-2: rgba(120, 119, 198, 0.15);
--calendar-icon-filter: invert(1);
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
--table-row-hover: rgba(255, 255, 255, 0.02);
--row-current: color-mix(in srgb, var(--success) 5%, transparent);
--row-current-hover: color-mix(in srgb, var(--success) 8%, transparent);
--row-draft: color-mix(in srgb, var(--warning) 6%, transparent);
--row-expired: color-mix(in srgb, var(--danger) 5%, transparent);
}
/* ---- Light theme ---- */
[data-theme="light"] {
--success: #15803d;
--warning: #b45309;
--danger: #b91c1c;
--info: #1d4ed8;
--accent-color: #c73030;
--accent-hover: #b52828;
--muted: #6b7280;
--bg-primary: #f4f3f1;
--bg-secondary: #ffffff;
--bg-tertiary: #eeecea;
--text-primary: #1a1a1a;
--text-secondary: #555555;
--text-muted: #717180;
--text-tertiary: #8a8a96;
--border-color: rgba(0, 0, 0, 0.1);
--border-color-hover: rgba(0, 0, 0, 0.18);
--glass-bg: #ffffff;
--glass-bg-solid: #ffffff;
--glass-border: rgba(0, 0, 0, 0.08);
--glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
--card-bg: #ffffff;
--card-bg-hover: #ffffff;
--input-bg: #ffffff;
--glow-color: rgba(222, 58, 58, 0.08);
--accent-light: rgba(222, 58, 58, 0.08);
--accent-soft: #fff0f0;
--accent-glow: rgba(222, 58, 58, 0.15);
--success-light: rgba(34, 197, 94, 0.1);
--success-soft: #e8fbf7;
--warning-light: rgba(245, 158, 11, 0.1);
--warning-soft: #fef9ec;
--danger-light: rgba(239, 68, 68, 0.1);
--danger-soft: #fef2f2;
--info-light: rgba(59, 130, 246, 0.1);
--info-soft: #ebf3fd;
--muted-light: rgba(107, 114, 128, 0.12);
--calendar-icon-filter: none;
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
--table-row-hover: rgba(0, 0, 0, 0.03);
--row-current: var(--success-soft);
--row-current-hover: color-mix(in srgb, var(--success) 12%, transparent);
--row-draft: var(--warning-soft);
--row-expired: var(--danger-soft);
--orb-color-1: rgba(214, 48, 49, 0.12);
--orb-color-2: rgba(120, 119, 198, 0.1);
}
/* Light mode - jemnejsi stiny */
[data-theme="light"] .admin-toast {
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .react-datepicker {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .admin-rich-editor .ql-snow .ql-picker-options,
[data-theme="light"] .admin-rich-editor .ql-snow .ql-tooltip {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .admin-customer-dropdown,
[data-theme="light"] .offers-template-menu {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .dash-quick-btn:hover {
filter: brightness(0.9);
}