houseassassin/glass
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply light theme redesign to admin panel

Browse Source 
Replace dark sidebar and glass-panel aesthetic with clean light dashboard
style: white sidebar (#FFFFFF) with indigo (#4361EE) accent, #F5F7FA page
background, flat white cards, and scoped .admin-panel CSS overrides so the
public landing page is not affected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
houseassassin
2026-05-10 16:57:13 +03:00
parent 8dae7f5d3b
commit 5412a70f83
5 changed files with 187 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/admin/layout/AdminLayout.jsx
+2 -2
View File
@@ -34,13 +34,13 @@ const AdminLayout = () => {
}, []);
return (
<div style={{ display: 'flex', minHeight: '100vh', background: 'var(--bg-light)' }}>
<div className="admin-panel" style={{ display: 'flex', minHeight: '100vh' }}>
<Sidebar />
<div style={{ marginLeft: '240px', flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
{/* Header */}
<header style={{
height: '60px', background: '#fff',
borderBottom: '1px solid var(--border-light)',
borderBottom: '1px solid #E9ECEF',
display: 'flex', alignItems: 'center',
justifyContent: 'space-between', padding: '0 28px',
position: 'sticky', top: 0, zIndex: 50,
src/admin/layout/Sidebar.jsx
+16 -20
View File
@@ -16,32 +16,28 @@ const Sidebar = () => {
const navigate = useNavigate();
const handleLogout = async () => {
try {
await logout();
} catch (err) {
console.error('Logout failed:', err);
}
try { await logout(); } catch (err) { console.error('Logout failed:', err); }
navigate('/admin/login');
};
return (
<aside style={{
width: '240px', minHeight: '100vh',
background: '#0f172a',
background: '#FFFFFF',
display: 'flex', flexDirection: 'column',
position: 'fixed', top: 0, left: 0,
zIndex: 100,
borderRight: '1px solid rgba(255,255,255,0.06)',
borderRight: '1px solid #E9ECEF',
}}>
{/* Logo */}
<div style={{ padding: '22px 20px', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
<div style={{ padding: '22px 20px', borderBottom: '1px solid #E9ECEF' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<Shield size={20} color="var(--accent-blue)" />
<span style={{ fontFamily: 'var(--font-heading)', fontWeight: 800, color: '#fff', fontSize: '1.05rem' }}>
Осколкам.<span style={{ color: 'var(--accent-blue)' }}>Нет</span>
<Shield size={20} color="#4361EE" />
<span style={{ fontFamily: 'var(--font-heading)', fontWeight: 800, color: '#1E1E2D', fontSize: '1.05rem' }}>
Осколкам.<span style={{ color: '#4361EE' }}>Нет</span>
</span>
</div>
<p style={{ fontSize: '0.72rem', color: 'rgba(255,255,255,0.35)', marginTop: '3px', marginLeft: '30px' }}>
<p style={{ fontSize: '0.72rem', color: '#8C9097', marginTop: '3px', marginLeft: '30px' }}>
Панель управления
</p>
</div>
@@ -55,12 +51,12 @@ const Sidebar = () => {
style={({ isActive }) => ({
display: 'flex', alignItems: 'center', gap: '12px',
padding: '11px 14px', borderRadius: '8px', marginBottom: '2px',
color: isActive ? '#fff' : 'rgba(255,255,255,0.45)',
background: isActive ? 'rgba(14, 165, 233, 0.15)' : 'transparent',
color: isActive ? '#4361EE' : '#1E1E2D',
background: isActive ? '#EEF2FF' : 'transparent',
textDecoration: 'none',
fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.88rem',
transition: 'all 0.15s',
borderLeft: isActive ? '3px solid var(--accent-blue)' : '3px solid transparent',
borderLeft: isActive ? '3px solid #4361EE' : '3px solid transparent',
})}
>
<Icon size={17} />
@@ -70,9 +66,9 @@ const Sidebar = () => {
</nav>
{/* User + logout */}
<div style={{ padding: '14px 18px', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
<div style={{ padding: '14px 18px', borderTop: '1px solid #E9ECEF' }}>
<p style={{
fontSize: '0.75rem', color: 'rgba(255,255,255,0.35)',
fontSize: '0.75rem', color: '#8C9097',
marginBottom: '10px', overflow: 'hidden',
textOverflow: 'ellipsis', whiteSpace: 'nowrap',
}}>
@@ -83,12 +79,12 @@ const Sidebar = () => {
style={{
display: 'flex', alignItems: 'center', gap: '8px',
background: 'none', border: 'none', cursor: 'pointer',
color: 'rgba(255,255,255,0.45)',
color: '#8C9097',
fontFamily: 'var(--font-body)', fontSize: '0.82rem', padding: '4px 0',
transition: 'color 0.15s',
}}
onMouseEnter={(e) => e.currentTarget.style.color = '#fff'}
onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.45)'}
onMouseEnter={(e) => e.currentTarget.style.color = '#1E1E2D'}
onMouseLeave={(e) => e.currentTarget.style.color = '#8C9097'}
>
<LogOut size={15} />
Выйти
src/admin/orders/KanbanColumn.jsx
+2 -2
View File
@@ -43,8 +43,8 @@ const KanbanColumn = ({ status, orders, onCardClick }) => {
display: 'flex', flexDirection: 'column', gap: '8px',
padding: '6px',
borderRadius: '10px',
background: isOver ? 'rgba(14, 165, 233, 0.05)' : 'transparent',
border: isOver ? '2px dashed rgba(14, 165, 233, 0.3)' : '2px dashed transparent',
background: isOver ? 'rgba(67, 97, 238, 0.05)' : 'transparent',
border: isOver ? '2px dashed rgba(67, 97, 238, 0.3)' : '2px dashed transparent',
transition: 'all 0.15s',
}}
>
src/admin/orders/OrderCard.jsx
+1 -1
View File
@@ -54,7 +54,7 @@ const OrderCard = ({ order, onClick }) => {
{order.object_type && (
<span style={{
fontSize: '0.72rem',
background: 'rgba(14, 165, 233, 0.08)',
background: 'rgba(67, 97, 238, 0.08)',
color: 'var(--accent-blue)',
padding: '2px 7px', borderRadius: '50px', fontWeight: 600,
}}>
src/index.css
+166
View File
@@ -0,0 +1,166 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');
:root {
--bg-light: #f8fafc;
--bg-lighter: #ffffff;
--bg-panel: rgba(255, 255, 255, 0.7);
--accent-yellow: #f59e0b; /* Warmer amber/yellow for light theme */
--accent-orange: #ea580c; /* Deep orange */
--accent-blue: #0ea5e9; /* Modern blue accent */
--text-main: #0f172a; /* Slate 900 */
--text-muted: #475569; /* Slate 600 */
--border-light: rgba(15, 23, 42, 0.05);
--glass-bg: rgba(255, 255, 255, 0.85);
--glass-border: rgba(255, 255, 255, 0.6);
--glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Roboto', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-body);
background-color: var(--bg-light);
color: var(--text-main);
line-height: 1.6;
overflow-x: hidden;
/* Modern clean background pattern */
background-image:
radial-gradient(var(--border-light) 2px, transparent 2px);
background-size: 30px 30px;
background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
letter-spacing: -0.02em;
}
a {
color: inherit;
text-decoration: none;
}
button {
cursor: pointer;
font-family: var(--font-heading);
font-weight: 600;
border: none;
outline: none;
}
/* Utilities */
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: var(--glass-shadow);
}
.text-accent-yellow {
color: var(--accent-yellow);
}
.text-accent-orange {
color: var(--accent-orange);
}
.text-accent-blue {
color: var(--accent-blue);
}
.btn-primary {
background: linear-gradient(135deg, var(--accent-orange), #f97316);
color: #ffffff;
padding: 16px 36px;
border-radius: 50px;
font-size: 1.1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 25px rgba(234, 88, 12, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 30px rgba(234, 88, 12, 0.4);
}
.btn-outline {
background: transparent;
color: var(--text-main);
border: 2px solid var(--border-light);
padding: 14px 34px;
border-radius: 50px;
font-size: 1.1rem;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
}
.btn-outline:hover {
border-color: var(--text-main);
background: rgba(15, 23, 42, 0.05);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 100px 0;
}
/* ── Admin Panel Theme ─────────────────────────────────────── */
.admin-panel {
--bg-light: #F5F7FA;
--bg-lighter: #FFFFFF;
--bg-panel: #FFFFFF;
--accent-blue: #4361EE;
--accent-yellow: #F59E0B;
--accent-orange: #F95959;
--text-main: #1E1E2D;
--text-muted: #8C9097;
--border-light: #E9ECEF;
--glass-bg: #FFFFFF;
--glass-border: #E9ECEF;
--glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
background: #F5F7FA;
}
.admin-panel .glass-panel {
background: #FFFFFF;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid #E9ECEF;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.admin-panel .btn-primary {
background: #4361EE;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(67, 97, 238, 0.25);
padding: 8px 18px;
font-size: 0.88rem;
transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.admin-panel .btn-primary:hover {
background: #3451D1;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(67, 97, 238, 0.35);
}
.admin-panel .btn-outline {
border-radius: 8px;
border-color: #E9ECEF;
}