# 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` |