diff --git a/src/admin/AdminApp.tsx b/src/admin/AdminApp.tsx
index 2e1ccd1..77d6bde 100644
--- a/src/admin/AdminApp.tsx
+++ b/src/admin/AdminApp.tsx
@@ -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"));
diff --git a/src/admin/components/ProjectFileManager.tsx b/src/admin/components/ProjectFileManager.tsx
index 3050a8a..a5b0e25 100644
--- a/src/admin/components/ProjectFileManager.tsx
+++ b/src/admin/components/ProjectFileManager.tsx
@@ -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",
};
diff --git a/src/admin/pages/Login.tsx b/src/admin/pages/Login.tsx
index 6eeebe9..a330d36 100644
--- a/src/admin/pages/Login.tsx
+++ b/src/admin/pages/Login.tsx
@@ -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",
}}
>
@@ -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`,
}}
/>
@@ -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
-
+
Přihlaste se ke svému účtu
@@ -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í
-
+
{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",
},
diff --git a/src/admin/variables.css b/src/admin/variables.css
deleted file mode 100644
index cfb5741..0000000
--- a/src/admin/variables.css
+++ /dev/null
@@ -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);
-}