From 8a39eb9ce771e1aa190bd1a0b18663df907f54d9 Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Thu, 14 May 2026 21:46:41 +0500
Subject: [PATCH] fix: icon spacing, scheme bg, drawer layout, filter margin,
 cart icon states

---
 client/src/app/layout/AppHeader.tsx                | 14 +++++++++++++-
 .../cart/toggle-cart-icon/ui/ToggleCartIcon.tsx    |  4 ++--
 client/src/pages/home/ui/HomePage.tsx              | 12 +++++++-----
 .../navigation-drawer/ui/NavigationDrawer.tsx      |  4 ++--
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/client/src/app/layout/AppHeader.tsx b/client/src/app/layout/AppHeader.tsx
index 83c7825..6f606f8 100644
--- a/client/src/app/layout/AppHeader.tsx
+++ b/client/src/app/layout/AppHeader.tsx
@@ -156,7 +156,19 @@ export function AppHeader() {
 
           {!isMobile && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ml: 1.5 }}>
-              <SchemeSwitcher value={scheme} onChange={(s: ColorScheme) => setScheme(s)} />
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 0.5,
+                  bgcolor: 'action.hover',
+                  borderRadius: 3,
+                  px: 0.5,
+                  py: 0.25,
+                }}
+              >
+                <SchemeSwitcher value={scheme} onChange={(s: ColorScheme) => setScheme(s)} />
+              </Box>
               <ModeSwitcher mode={mode} resolvedMode={resolvedMode} onCycleMode={cycleMode} />
             </Box>
           )}
diff --git a/client/src/features/cart/toggle-cart-icon/ui/ToggleCartIcon.tsx b/client/src/features/cart/toggle-cart-icon/ui/ToggleCartIcon.tsx
index ba618e3..db5d786 100644
--- a/client/src/features/cart/toggle-cart-icon/ui/ToggleCartIcon.tsx
+++ b/client/src/features/cart/toggle-cart-icon/ui/ToggleCartIcon.tsx
@@ -2,7 +2,7 @@ import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useUnit } from 'effector-react'
-import { ShoppingCart } from 'lucide-react'
+import { CirclePlus, ShoppingCart } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import { addToCart, fetchMyCart, removeCartItem } from '@/entities/cart/api/cart-api'
 import { $user } from '@/shared/model/auth'
@@ -63,7 +63,7 @@ export function ToggleCartIcon(props: {
     <Tooltip title={tooltip}>
       <span>
         <IconButton size={size} onClick={onClick} disabled={disabled || busy} aria-label={tooltip} type="button">
-          {user ? inCart ? <ShoppingCart /> : <ShoppingCart /> : <ShoppingCart />}
+          {user ? (inCart ? <ShoppingCart /> : <CirclePlus />) : <ShoppingCart />}
         </IconButton>
       </span>
     </Tooltip>
diff --git a/client/src/pages/home/ui/HomePage.tsx b/client/src/pages/home/ui/HomePage.tsx
index 42acf25..70498bd 100644
--- a/client/src/pages/home/ui/HomePage.tsx
+++ b/client/src/pages/home/ui/HomePage.tsx
@@ -79,11 +79,13 @@ export function HomePage() {
         Игрушки, сувениры и другие изделия ручной работы.
       </Typography>
 
-      <ProductFilters
-        {...filters}
-        categories={categoriesQuery.data ?? []}
-        categoriesLoading={categoriesQuery.isLoading}
-      />
+      <Box sx={{ mb: 3 }}>
+        <ProductFilters
+          {...filters}
+          categories={categoriesQuery.data ?? []}
+          categoriesLoading={categoriesQuery.isLoading}
+        />
+      </Box>
 
       {productsQuery.isLoading && (
         <Grid container spacing={2} sx={{ mt: 2 }}>
diff --git a/client/src/widgets/navigation-drawer/ui/NavigationDrawer.tsx b/client/src/widgets/navigation-drawer/ui/NavigationDrawer.tsx
index 42968b7..2d61e6a 100644
--- a/client/src/widgets/navigation-drawer/ui/NavigationDrawer.tsx
+++ b/client/src/widgets/navigation-drawer/ui/NavigationDrawer.tsx
@@ -92,8 +92,8 @@ export function NavigationDrawer({
 
         <Divider sx={{ my: 2 }} />
 
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'flex-start' }}>
-          <SchemeSwitcher value={scheme} onChange={onSchemeChange} orientation="vertical" />
+        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+          <SchemeSwitcher value={scheme} onChange={onSchemeChange} orientation="horizontal" />
           <ModeSwitcher mode={mode} resolvedMode={resolvedMode} onCycleMode={onCycleMode} />
         </Box>
       </Box>