refactor(css): migrate Login + file icons off legacy vars, delete variables.css
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
@@ -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",
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user