From 9a551f151825923828e8bf9071bd17f672d73ae0 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Fri, 11 Jul 2025 22:18:36 +0330
Subject: [PATCH] chore: change a few styles

---
 src/components/listview/MenuItem.tsx          |  2 +-
 .../menu/{Menu.tsx => SideMenu.tsx}           | 36 +++++++++----------
 .../menu/{MenuItem.tsx => SideMenuItem.tsx}   |  4 +--
 src/components/navigation/BottomNavBar.tsx    | 12 ++++---
 .../navigation/BottomNavLinkBig.tsx           |  2 +-
 .../wrapper/ClientMenuRouteWrapper.tsx.tsx    |  4 +--
 6 files changed, 31 insertions(+), 29 deletions(-)
 rename src/components/menu/{Menu.tsx => SideMenu.tsx} (71%)
 rename src/components/menu/{MenuItem.tsx => SideMenuItem.tsx} (73%)

diff --git a/src/components/listview/MenuItem.tsx b/src/components/listview/MenuItem.tsx
index 6e15db5..9bb6182 100644
--- a/src/components/listview/MenuItem.tsx
+++ b/src/components/listview/MenuItem.tsx
@@ -47,7 +47,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
                 className="inline-flex w-full justify-center items-center gap-2"
               >
                 <PlusIcon />
-                <div className="text-sm2 pt-0.5 font-semibold">افزودن</div>
+                <div className="text-sm2 pt-0.5 font-medium">افزودن</div>
               </button>
             ) : (
               <>
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/SideMenu.tsx
similarity index 71%
rename from src/components/menu/Menu.tsx
rename to src/components/menu/SideMenu.tsx
index 5af6fec..2f472c1 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/SideMenu.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import React, { useMemo } from 'react'
-import MenuItemType from './MenuItem'
-import MenuItem from './MenuItem';
+import MenuItemType from './SideMenuItem'
+import SideMenuItem from './SideMenuItem';
 import NotificationBellIcon from '../icons/NotificationBellIcon';
 import CupIcon from '../icons/CupIcon';
 import TicketDiscountIcon from '../icons/TickerDiscountIcon';
@@ -26,40 +26,40 @@ type MenuItemType = {
 const menuItems: Array<Array<MenuItemType>> = [
     [
         {
-            href: '/', title: 'صفحه اصلی', icon: <NotificationBellIcon className='text-icon-deactive' />
+            href: '/', title: 'صفحه اصلی', icon: <NotificationBellIcon width={20} height={20} className='text-icon-deactive' />
         },
         {
-            href: 'my-services', title: 'سرویس های من', icon: <CupIcon className='text-icon-deactive' />
+            href: 'my-services', title: 'سرویس های من', icon: <CupIcon width={20} height={20} className='text-icon-deactive' />
         },
         {
-            href: 'services', title: 'سایر سرویس ها', icon: <TicketDiscountIcon className='text-icon-deactive' />
+            href: 'services', title: 'سایر سرویس ها', icon: <TicketDiscountIcon width={20} height={20} className='text-icon-deactive' />
         },
         {
-            href: 'invoices', title: 'لیست', icon: <CalendarSearchIcon className='text-icon-deactive' />
+            href: 'invoices', title: 'لیست', icon: <CalendarSearchIcon width={20} height={20} className='text-icon-deactive' />
         },
         {
-            href: 'transactions', title: 'تراکنش ها', icon: <ReceiptIcon className='text-icon-deactive' />
+            href: 'transactions', title: 'تراکنش ها', icon: <ReceiptIcon width={20} height={20} className='text-icon-deactive' />
         },
         {
-            href: '/', title: 'صفحه اصلی', icon: <GameControllerIcon className='text-icon-deactive' />
+            href: '/', title: 'صفحه اصلی', icon: <GameControllerIcon width={20} height={20} className='text-icon-deactive' />
         },
         {
-            href: 'my-services', title: 'سرویس های من', icon: <ThumbsUpIcon className='text-icon-deactive' />
+            href: 'my-services', title: 'سرویس های من', icon: <ThumbsUpIcon width={20} height={20} className='text-icon-deactive' />
         },
         {
-            href: 'services', title: 'سایر سرویس ها', icon: <NoteBoardIcon className='text-icon-deactive' />
+            href: 'services', title: 'سایر سرویس ها', icon: <NoteBoardIcon width={20} height={20} className='text-icon-deactive' />
         },
         {
-            href: 'invoices', title: 'نصب اپلیکیشن', icon: <DirectboxReceiveIcon className='text-icon-deactive' />
+            href: 'invoices', title: 'نصب اپلیکیشن', icon: <DirectboxReceiveIcon width={20} height={20} className='text-icon-deactive' />
         },
     ],
     [],
     [
         {
-            href: undefined, title: 'تنظیمات', icon: <SettingIcon className='text-icon-deactive' />
+            href: undefined, title: 'تنظیمات', icon: <SettingIcon width={20} height={20} className='text-icon-deactive' />
         },
         {
-            href: undefined, title: 'خروج', icon: <ExitIcon className='text-icon-deactive' />
+            href: undefined, title: 'خروج', icon: <ExitIcon width={20} height={20} className='text-icon-deactive' />
         },
     ]
 ]
@@ -71,7 +71,7 @@ type Props = {
     togglenightModeState: React.MouseEventHandler<HTMLDivElement> | undefined
 }
 
-function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
+function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
     const menuStateMemo = useMemo(() => menuState, [menuState]);
 
     return (
@@ -87,16 +87,16 @@ function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState
                                 <div className='flex flex-col gap-[23px]'>
                                     <div className='pt-2 text-start px-12 text-menu-header'>منو</div>
                                     {menuItems[0].map((v, i) => {
-                                        return <MenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
+                                        return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
                                     })}
                                 </div>
                             </div>
                         </li>
                         <li className='flex flex-col gap-6 pt-16'>
                             {menuItems[2].map((v, i) => {
-                                return <MenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
+                                return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
                             })}
-                            <MenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /></MenuItem>
+                            <SideMenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /></SideMenuItem>
                         </li>
                     </ul>
                 </div>
@@ -105,4 +105,4 @@ function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState
     )
 }
 
-export default Menu;
+export default SideMenu;
diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/SideMenuItem.tsx
similarity index 73%
rename from src/components/menu/MenuItem.tsx
rename to src/components/menu/SideMenuItem.tsx
index 52e1f73..c9af430 100644
--- a/src/components/menu/MenuItem.tsx
+++ b/src/components/menu/SideMenuItem.tsx
@@ -6,12 +6,12 @@ type Props = {
     title: string
 } & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
 
-export default function MenuItem({ href, title, icon, className, children, ...restProps }: Props) {
+export default function SideMenuItem({ href, title, icon, className, children, ...restProps }: Props) {
     return (
         <Link
             {...restProps}
             href={href}
-            className={`inline-flex gap-2 ps-8 border-transparent text-disabled-text text-xs items-center font-light text-nowrap overflow-hidden h-6
+            className={`inline-flex gap-2 ps-8 border-transparent text-disabled-text text-[0.7rem] items-center font-light text-nowrap overflow-hidden h-6
                 data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black ${className}`}>
             {children}
             {icon}
diff --git a/src/components/navigation/BottomNavBar.tsx b/src/components/navigation/BottomNavBar.tsx
index b3afcc3..ef20dd8 100644
--- a/src/components/navigation/BottomNavBar.tsx
+++ b/src/components/navigation/BottomNavBar.tsx
@@ -36,18 +36,20 @@ function BottomNavBar() {
             <div
               className="absolute z-20 w-full h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
             >
-              <BottomNavLink href={`/${name}/orders`} icon={<BagIcon />} value="سبد خرید" />
-              <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon />} value="پیجر" />
+              <BottomNavLink href={`/${name}/orders`} icon={<BagIcon width={20} height={20} />} value="سبد خرید" />
+              <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value="پیجر" />
               <BottomNavHighlightLink
                 href={`/${name}`}
                 icon={
                   <HomeIcon className='transition-all duration-200'
                     fill={isHomeRoute ? 'white' : 'transparent'}
                     stroke={isHomeRoute ? 'black' : 'white'}
-                    strokeWidth={1} />}
+                    strokeWidth={1} 
+                    width={20} 
+                    height={20} />}
                 value="منو" />
-              <BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon />} value="اعلان ها" />
-              <BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" />
+              <BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon width={20} height={20} />} value="اعلان ها" />
+              <BottomNavLink href={'/auth'} icon={<HeartIcon width={20} height={20} />} value="پسند ها" />
             </div>
           </foreignObject>
 
diff --git a/src/components/navigation/BottomNavLinkBig.tsx b/src/components/navigation/BottomNavLinkBig.tsx
index de59304..1e546e7 100644
--- a/src/components/navigation/BottomNavLinkBig.tsx
+++ b/src/components/navigation/BottomNavLinkBig.tsx
@@ -20,7 +20,7 @@ function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
       restProps.className ?? '',
     )}>
       <div className={clsx(
-        'bg-primary text-white p-3 rounded-full',
+        'bg-primary text-white p-3.5 rounded-full',
       )}>
         {icon}
       </div>
diff --git a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx b/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
index 8813ca6..869412b 100644
--- a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
+++ b/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react'
 import TopBar from '../topbar/TopBar'
-import Menu from '../menu/Menu'
+import SideMenu from '../menu/SideMenu'
 import BottomNavBar from '../navigation/BottomNavBar'
 
 type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
@@ -49,7 +49,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
       </main>
       <aside>
 
-        <Menu 
+        <SideMenu 
           nightModeState={nightMode} togglenightModeState={toggleNightMode}
           menuState={menuState} toggleMenuState={toggleMenuState} />
       </aside>