d3m0k1d/HellreigN
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: themes and layout
ci-front / build (push) Successful in 2m3s
Details

Browse Source
This commit is contained in:
NikitaTorbenko
2026-04-04 00:01:01 +03:00
parent 88fb7a1888
commit 8cf0837f97
8 changed files with 665 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/layouts/DefaultLayout.tsx
+44 -9
View File
@@ -13,33 +13,53 @@ export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
const handleLogout = () => {
logout();
navigate("/login");
navigate("/auth");
};
return (
<div className="min-h-screen bg-white dark:bg-black transition-colors duration-200">
<div className="min-h-screen flex flex-col" style={{ backgroundColor: "var(--bg-primary)", color: "var(--text-primary)" }}>
{/* Header */}
<header className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-black sticky top-0 z-50">
<header
className="border-b sticky top-0 z-50"
style={{
backgroundColor: "var(--header-bg)",
borderColor: "var(--border)",
}}
>
<div className="container mx-auto px-4 py-3">
<div className="flex justify-between items-center">
{/* Logo */}
<div className="text-xl font-bold text-gray-900 dark:text-white">
<div
className="text-xl font-bold cursor-pointer hover:opacity-80 transition-opacity"
style={{ color: "var(--text-primary)" }}
onClick={() => navigate("/")}
>
HellreigN
</div>
{/* Right side */}
<div className="flex items-center gap-4">
<div className="flex items-center gap-3">
<ThemeToggle />
{user && (
<div className="flex items-center gap-3">
<span className="text-sm text-gray-600 dark:text-gray-400">
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>
{user.firstName} {user.lastName}
</span>
<button
onClick={handleLogout}
className="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
className="px-3 py-1.5 text-sm rounded-lg transition-colors font-medium"
style={{
backgroundColor: "var(--button-danger)",
color: "var(--button-danger-text)",
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "var(--button-danger-hover)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = "var(--button-danger)";
}}
>
Logout
Выйти
</button>
</div>
)}
@@ -49,7 +69,22 @@ export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
</header>
{/* Main content */}
<main className="min-h-[calc(100vh-61px)]">{children || <Outlet />}</main>
<main className="flex-1">{children || <Outlet />}</main>
{/* Footer */}
<footer
className="border-t py-4 mt-auto"
style={{
backgroundColor: "var(--bg-secondary)",
borderColor: "var(--border)",
}}
>
<div className="container mx-auto px-4">
<p className="text-center text-sm" style={{ color: "var(--text-muted)" }}>
© 2026 HellreigN. Все права защищены.
</p>
</div>
</footer>
</div>
);
};
frontend/src/shared/styles/themes.css
+242 -29
View File
@@ -1,16 +1,9 @@
@import "tailwindcss";
/* Кастомные темы для dark mode */
@custom-variant dark (&:where(.dark, .dark *));
/* Tailwind dark mode через data-theme атрибут */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
/* Базовые стили */
@layer base {
body {
@apply bg-white dark:bg-black text-gray-900 dark:text-white;
}
}
/* Кастомные утилиты (опционально) */
/* Кастомные утилиты */
@layer utilities {
.transition-theme {
transition-property: background-color, border-color, color, fill, stroke;
@@ -19,36 +12,256 @@
}
}
:root {
/* ===========================
БАЗОВЫЕ ТЕМЫ (Light/Dark)
=========================== */
/* Светлая тема (по умолчанию) */
:root,
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--text-primary: #000000;
--text-secondary: #333333;
--border: #e5e5e5;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--border: #e2e8f0;
--border-focus: #94a3b8;
--card-bg: #ffffff;
--input-bg: #ffffff;
--button-bg: #000000;
--button-text: #ffffff;
--button-hover: #333333;
--header-bg: #ffffff;
--button-primary: #0f172a;
--button-primary-text: #ffffff;
--button-primary-hover: #1e293b;
--button-danger: #ef4444;
--button-danger-text: #ffffff;
--button-danger-hover: #dc2626;
--error-bg: #fef2f2;
--error-border: #fecaca;
--error-text: #dc2626;
--shadow-color: rgba(0, 0, 0, 0.1);
--accent: #6366f1;
--accent-hover: #4f46e5;
--link: #0f172a;
--link-hover: #475569;
}
/* Темная тема */
[data-theme="dark"] {
--bg-primary: #000000;
--bg-secondary: #1a1a1a;
--text-primary: #ffffff;
--text-secondary: #cccccc;
--border: #333333;
--card-bg: #0a0a0a;
--input-bg: #1a1a1a;
--button-bg: #ffffff;
--button-text: #000000;
--button-hover: #cccccc;
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-muted: #64748b;
--border: #334155;
--border-focus: #64748b;
--card-bg: #1e293b;
--input-bg: #1e293b;
--header-bg: #0f172a;
--button-primary: #f8fafc;
--button-primary-text: #0f172a;
--button-primary-hover: #e2e8f0;
--button-danger: #ef4444;
--button-danger-text: #ffffff;
--button-danger-hover: #f87171;
--error-bg: rgba(239, 68, 68, 0.1);
--error-border: rgba(239, 68, 68, 0.3);
--error-text: #fca5a5;
--shadow-color: rgba(0, 0, 0, 0.3);
--accent: #818cf8;
--accent-hover: #a5b4fc;
--link: #f8fafc;
--link-hover: #cbd5e1;
}
/* ===========================
ЦВЕТНЫЕ ТЕМЫ
=========================== */
/* Night Owl */
[data-theme="nightowl"] {
--bg-primary: #011627;
--bg-secondary: #011e3c;
--bg-tertiary: #0d2f4f;
--text-primary: #d6deeb;
--text-secondary: #8892b0;
--text-muted: #4a5568;
--border: #1d3b53;
--border-focus: #7dd3fc;
--card-bg: #011e3c;
--input-bg: #011e3c;
--header-bg: #011627;
--button-primary: #7dd3fc;
--button-primary-text: #011627;
--button-primary-hover: #bae6fd;
--button-danger: #f87171;
--button-danger-text: #ffffff;
--button-danger-hover: #fca5a5;
--error-bg: rgba(248, 113, 113, 0.1);
--error-border: rgba(248, 113, 113, 0.3);
--error-text: #fca5a5;
--shadow-color: rgba(0, 0, 0, 0.4);
--accent: #7dd3fc;
--accent-hover: #bae6fd;
--link: #7dd3fc;
--link-hover: #bae6fd;
}
/* Sunset */
[data-theme="sunset"] {
--bg-primary: #1c1917;
--bg-secondary: #292524;
--bg-tertiary: #44403c;
--text-primary: #fafaf9;
--text-secondary: #d6d3d1;
--text-muted: #78716c;
--border: #57534e;
--border-focus: #f97316;
--card-bg: #292524;
--input-bg: #292524;
--header-bg: #1c1917;
--button-primary: #f97316;
--button-primary-text: #1c1917;
--button-primary-hover: #fb923c;
--button-danger: #ef4444;
--button-danger-text: #ffffff;
--button-danger-hover: #f87171;
--error-bg: rgba(239, 68, 68, 0.1);
--error-border: rgba(239, 68, 68, 0.3);
--error-text: #fca5a5;
--shadow-color: rgba(0, 0, 0, 0.4);
--accent: #f97316;
--accent-hover: #fb923c;
--link: #f97316;
--link-hover: #fb923c;
}
/* Forest */
[data-theme="forest"] {
--bg-primary: #052e16;
--bg-secondary: #14532d;
--bg-tertiary: #166534;
--text-primary: #f0fdf4;
--text-secondary: #bbf7d0;
--text-muted: #4ade80;
--border: #166534;
--border-focus: #22c55e;
--card-bg: #14532d;
--input-bg: #14532d;
--header-bg: #052e16;
--button-primary: #22c55e;
--button-primary-text: #052e16;
--button-primary-hover: #4ade80;
--button-danger: #ef4444;
--button-danger-text: #ffffff;
--button-danger-hover: #f87171;
--error-bg: rgba(239, 68, 68, 0.1);
--error-border: rgba(239, 68, 68, 0.3);
--error-text: #fca5a5;
--shadow-color: rgba(0, 0, 0, 0.4);
--accent: #22c55e;
--accent-hover: #4ade80;
--link: #22c55e;
--link-hover: #4ade80;
}
/* Ocean */
[data-theme="ocean"] {
--bg-primary: #164e63;
--bg-secondary: #0e7490;
--bg-tertiary: #0891b2;
--text-primary: #f0fdfd;
--text-secondary: #a5f3fc;
--text-muted: #22d3ee;
--border: #0891b2;
--border-focus: #06b6d4;
--card-bg: #0e7490;
--input-bg: #0e7490;
--header-bg: #164e63;
--button-primary: #06b6d4;
--button-primary-text: #164e63;
--button-primary-hover: #22d3ee;
--button-danger: #ef4444;
--button-danger-text: #ffffff;
--button-danger-hover: #f87171;
--error-bg: rgba(239, 68, 68, 0.1);
--error-border: rgba(239, 68, 68, 0.3);
--error-text: #fca5a5;
--shadow-color: rgba(0, 0, 0, 0.4);
--accent: #06b6d4;
--accent-hover: #22d3ee;
--link: #06b6d4;
--link-hover: #22d3ee;
}
/* Lavender */
[data-theme="lavender"] {
--bg-primary: #faf5ff;
--bg-secondary: #f3e8ff;
--bg-tertiary: #e9d5ff;
--text-primary: #581c87;
--text-secondary: #7e22ce;
--text-muted: #a855f7;
--border: #e9d5ff;
--border-focus: #a855f7;
--card-bg: #f3e8ff;
--input-bg: #f3e8ff;
--header-bg: #faf5ff;
--button-primary: #a855f7;
--button-primary-text: #faf5ff;
--button-primary-hover: #c084fc;
--button-danger: #ef4444;
--button-danger-text: #ffffff;
--button-danger-hover: #f87171;
--error-bg: rgba(239, 68, 68, 0.1);
--error-border: rgba(239, 68, 68, 0.3);
--error-text: #dc2626;
--shadow-color: rgba(88, 28, 135, 0.1);
--accent: #a855f7;
--accent-hover: #c084fc;
--link: #7e22ce;
--link-hover: #a855f7;
}
/* Coffee */
[data-theme="coffee"] {
--bg-primary: #292524;
--bg-secondary: #44403c;
--bg-tertiary: #57534e;
--text-primary: #f5f5f4;
--text-secondary: #d6d3d1;
--text-muted: #a8a29e;
--border: #57534e;
--border-focus: #d97706;
--card-bg: #44403c;
--input-bg: #44403c;
--header-bg: #292524;
--button-primary: #d97706;
--button-primary-text: #292524;
--button-primary-hover: #fbbf24;
--button-danger: #ef4444;
--button-danger-text: #ffffff;
--button-danger-hover: #f87171;
--error-bg: rgba(239, 68, 68, 0.1);
--error-border: rgba(239, 68, 68, 0.3);
--error-text: #fca5a5;
--shadow-color: rgba(0, 0, 0, 0.4);
--accent: #d97706;
--accent-hover: #fbbf24;
--link: #d97706;
--link-hover: #fbbf24;
}
/* ===========================
БАЗОВЫЕ СТИЛИ
=========================== */
body {
background-color: var(--bg-primary);
color: var(--text-primary);
transition:
background-color 0.3s ease,
color 0.3s ease;
color 0.3s ease,
border-color 0.3s ease;
}