Kirill
3.0 KiB
UI Style Refresh
Дата: 2026-05-14 Статус: Утверждён
Мотивация
Освежить визуальный стиль сайта: заменить иконки на Lucide, переработать тему/переключатели схем, добавить VK в футер, обновить стиль каталога, слайдера и кнопок.
1. Иконки: MUI → Lucide React (везде)
Удалить зависимость @mui/icons-material из client/package.json. Все иконки MUI заменить на Lucide React.
2. Theme/SchemeSwitcher
Горизонтальное расположение. ModeSwitcher: Sun/Moon/Monitor. SchemeSwitcher: без bgcolor, цветная обводка у активной.
3. VK в футер
Кастомный SVG-логотип VK (SvgIcon), ссылка href={VITE_VK_URL}, удалить STORE_SOCIAL_NOTE.
4. ProductFilters (каталог)
Визуальный редизайн: Search с иконкой, Chips категорий, компактные фильтры, Material 3 стиль.
5. CatalogSlider (слайдер)
Подложка rgba(0,0,0,0.7) под текст, новый размер/вес шрифта, убрать WebkitTextStroke.
6. Кнопки (MUI-тема)
MuiButton: тени, градиент, hover-эффект. MuiIconButton: scale на hover.
Файлы для изменения
| Файл | Изменение |
|---|---|
client/package.json |
Удалить @mui/icons-material |
client/src/app/providers/AppProviders.tsx |
MuiButton/MuiIconButton styleOverrides |
client/src/shared/config/index.ts |
Добавить VK_URL, удалить SOCIAL_NOTE |
client/src/app/layout/AppHeader.tsx |
MUI→Lucide иконки |
client/src/app/layout/MainLayout.tsx |
VK иконка, удалить SOCIAL_NOTE |
client/src/shared/ui/ModeSwitcher/ModeSwitcher.tsx |
Lucide + 3 режима |
client/src/shared/ui/SchemeSwitcher/SchemeSwitcher.tsx |
Убрать bgcolor, обводка |
client/src/features/cart/cart-badge/ui/CartBadge.tsx |
Lucide ShoppingCart |
client/src/features/cart/toggle-cart-icon/ui/ToggleCartIcon.tsx |
Lucide иконки |
client/src/features/user/user-menu/ui/UserMenu.tsx |
Lucide User |
client/src/widgets/navigation-drawer/ui/NavigationDrawer.tsx |
Lucide иконки |
client/src/widgets/catalog-slider/ui/CatalogSlider.tsx |
Подложка текста |
client/src/pages/home/ui/ProductFilters.tsx |
Визуальный редизайн |
client/src/pages/admin-layout/ui/AdminLayoutPage.tsx |
Lucide иконки |
client/src/pages/me/ui/MeLayoutPage.tsx |
Lucide иконки |
client/src/pages/products/ui/ProductPage.tsx |
Lucide Star, X |
client/src/pages/cart/ui/CartPage.tsx |
Lucide Trash2, Plus, Minus |
client/src/shared/ui/RichTextMessageEditor.tsx |
Lucide Bold, Italic, List |