feat: UI style refresh — Lucide icons, theme, slider, filters, buttons, VK

client/src/shared/ui/SchemeSwitcher/SchemeSwitcher.tsx

@@ -1,4 +1,3 @@
-import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'
 import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
 import { Cherry, Hammer, Trees, WavesHorizontal } from 'lucide-react'
@@ -11,10 +10,10 @@ type Props = {
 }
 
 const SCHEMES: { key: ColorScheme; color: string; label: string; icon: React.ReactNode }[] = [
-  { key: 'craft', color: '#6D4C41', label: 'Крафт', icon: <Hammer size={14} /> },
-  { key: 'forest', color: '#2E7D32', label: 'Лес', icon: <Trees size={14} /> },
-  { key: 'ocean', color: '#1565C0', label: 'Океан', icon: <WavesHorizontal size={14} /> },
-  { key: 'berry', color: '#7B1FA2', label: 'Ягоды', icon: <Cherry size={14} /> },
+  { key: 'craft', color: '#6D4C41', label: 'Крафт', icon: <Hammer size={16} /> },
+  { key: 'forest', color: '#2E7D32', label: 'Лес', icon: <Trees size={16} /> },
+  { key: 'ocean', color: '#1565C0', label: 'Океан', icon: <WavesHorizontal size={16} /> },
+  { key: 'berry', color: '#7B1FA2', label: 'Ягоды', icon: <Cherry size={16} /> },
 ]
 
 export function SchemeSwitcher({ value, onChange, orientation = 'horizontal' }: Props) {
@@ -36,23 +35,24 @@ export function SchemeSwitcher({ value, onChange, orientation = 'horizontal' }:
             size="small"
             title={s.label}
             sx={{
-              width: 30,
-              height: 30,
-              minWidth: 30,
-              bgcolor: s.color,
+              width: 36,
+              height: 36,
+              minWidth: 36,
+              bgcolor: 'transparent',
               border: 2,
-              borderColor: active ? 'common.white' : 'rgba(255,255,255,0.4)',
-              boxShadow: active ? `0 0 0 1.5px ${s.color}, 0 0 8px ${s.color}99` : 'none',
-              transform: active ? 'scale(1.1)' : 'scale(1)',
-              color: 'common.white',
+              borderColor: active ? s.color : 'transparent',
+              boxShadow: active ? `0 0 8px ${s.color}66` : 'none',
+              transform: active ? 'scale(1.15)' : 'scale(1)',
+              color: active ? s.color : 'text.secondary',
               transition: 'all 0.2s ease',
               '&:hover': {
                 transform: 'scale(1.2)',
-                bgcolor: s.color,
+                borderColor: s.color,
+                color: s.color,
               },
             }}
           >
-            {active ? <CheckCircleRoundedIcon sx={{ fontSize: 14 }} /> : s.icon}
+            {s.icon}
           </IconButton>
         )
       })}