feat: apply light theme redesign to admin panel
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:
@@ -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,
|
||||
|
||||
@@ -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} />
|
||||
Выйти
|
||||
|
||||
@@ -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',
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -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,
|
||||
}}>
|
||||
|
||||
Reference in New Issue
Block a user