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

client/src/shared/config/index.ts

@@ -15,4 +15,4 @@ export const STORE_PUBLIC_SITE_URL = (() => {
 /** Демо-контакты для футера; при необходимости задайте через VITE_* в `.env`. */
 export const STORE_EMAIL = import.meta.env.VITE_STORE_EMAIL ?? 'hello@example.com'
 export const STORE_PHONE = import.meta.env.VITE_STORE_PHONE ?? '+7 (900) 000-00-00'
-export const STORE_SOCIAL_NOTE = import.meta.env.VITE_STORE_SOCIAL_NOTE ?? 'Соцсети: укажите ссылки при публикации'
+export const VK_URL = import.meta.env.VITE_VK_URL ?? '#'

client/src/shared/ui/ModeSwitcher/ModeSwitcher.tsx

@@ -1,5 +1,4 @@
-import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined'
-import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined'
+import { Monitor, Moon, Sun } from 'lucide-react'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
 import type { ThemeModePreference } from '@/shared/model/theme'
@@ -22,10 +21,12 @@ function getModeLabel(mode: ThemeModePreference, resolvedMode: 'light' | 'dark')
 }
 
 export function ModeSwitcher({ mode, resolvedMode, onCycleMode }: Props) {
+  const icon = mode === 'system' ? <Monitor /> : resolvedMode === 'dark' ? <Sun /> : <Moon />
+
   return (
     <Tooltip title={`Тема: ${getModeLabel(mode, resolvedMode)}`}>
       <IconButton color="inherit" onClick={onCycleMode} aria-label="Переключить тему">
-        {resolvedMode === 'dark' ? <LightModeOutlinedIcon /> : <DarkModeOutlinedIcon />}
+        {icon}
       </IconButton>
     </Tooltip>
   )

client/src/shared/ui/RichTextMessageEditor.tsx

@@ -1,7 +1,5 @@
 import { useEffect } from 'react'
-import FormatBoldOutlinedIcon from '@mui/icons-material/FormatBoldOutlined'
-import FormatItalicOutlinedIcon from '@mui/icons-material/FormatItalicOutlined'
-import FormatListBulletedOutlinedIcon from '@mui/icons-material/FormatListBulletedOutlined'
+import { Bold, Italic, List } from 'lucide-react'
 import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
 import Stack from '@mui/material/Stack'
@@ -59,7 +57,7 @@ export function RichTextMessageEditor({
           disabled={disabled}
           aria-label="Жирный"
         >
-          <FormatBoldOutlinedIcon fontSize="small" />
+          <Bold size={18} />
         </IconButton>
         <IconButton
           size="small"
@@ -68,7 +66,7 @@ export function RichTextMessageEditor({
           disabled={disabled}
           aria-label="Курсив"
         >
-          <FormatItalicOutlinedIcon fontSize="small" />
+          <Italic size={18} />
         </IconButton>
         <IconButton
           size="small"
@@ -77,7 +75,7 @@ export function RichTextMessageEditor({
           disabled={disabled}
           aria-label="Список"
         >
-          <FormatListBulletedOutlinedIcon fontSize="small" />
+          <List size={18} />
         </IconButton>
       </Stack>
 

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>
         )
       })}