add: menu page dark theme

src/components/icons/MinusIcon.tsx

@@ -9,7 +9,7 @@ interface MinusIconProps {
 
 const MinusIcon: React.FC<MinusIconProps> = ({
   className = '',
-  stroke = '#333333',
+  stroke = 'currentColor',
   strokeWidth = 1.5,
   size = 10,
 }) => {

src/components/icons/PlusIcon.tsx

@@ -9,7 +9,7 @@ interface PlusIconProps {
 
 const PlusIcon: React.FC<PlusIconProps> = ({
   className = '',
-  stroke = '#333333',
+  stroke = 'currentColor',
   strokeWidth = 1.5,
   size = 10,
 }) => {

src/components/icons/TextAlignIcon.tsx

@@ -9,7 +9,7 @@ interface TextAlignIconProps {
 
 const TextAlignIcon: React.FC<TextAlignIconProps> = ({
   className = '',
-  stroke = '#333333',
+  stroke = 'currentColor',
   strokeWidth = 1.5,
   size = 20,
 }) => {

src/components/input/SearchBox.tsx

@@ -12,7 +12,7 @@ interface SearchboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 export default function SearchBox({ className, value, placeholder = '', onChange, ...props }: SearchboxProps) {
   return (
     <div className={clsx(
-      "bg-white inline-flex rounded-xl px-4 h-10 w-full items-center content-center",
+      "bg-container inline-flex rounded-xl px-4 h-10 w-full items-center content-center",
       className
     )}>
       <SearchIcon stroke="#8C90A3" />

src/components/listview/CategoryItemRenderer.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 function CategoryItemRenderer({ children, ...rest }: Props) {
     return (
-        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-white/40`}>
+        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40`}>
             <div
                 {...rest}
                 className="rounded-normal w-[88px] h-[88px] flex flex-col justify-center items-center gap-2"

src/components/listview/CategorySmallItemRenderer.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 function CategorySmallItemRenderer({ children, ...rest }: Props) {
     return (
-        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-white/40`}>
+        <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40 dark:bg-background`}>
             <div
                 {...rest}
                 className="rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2"

src/components/listview/MenuItem.tsx

@@ -32,7 +32,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
       />
       <div className="w-full inline-flex flex-col justify-between">
         <div>
-          <div className="text-sm2 font-normal text-black">{food.name}</div>
+          <div className="text-sm2 font-normal text-black dark:text-white">{food.name}</div>
           <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
             {food.contains}
           </div>
@@ -49,15 +49,15 @@ const MenuItem = ({ food }: MenuItemProps) => {
                 className="inline-flex w-full justify-center items-center gap-2"
               >
                 <PlusIcon />
-                <div className="text-sm2 pt-0.5 font-normal text-black">افزودن</div>
+                <div className="text-sm2 pt-0.5 font-normal text-foreground">افزودن</div>
               </button>
             ) : (
               <>
                 <button
                   onClick={() => increment(food.id)}
-                  className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
                 >
-                  <PlusIcon />
+                  <PlusIcon className="text-foreground" />
                 </button>
                 <motion.div
                   key={quantity}
@@ -72,9 +72,9 @@ const MenuItem = ({ food }: MenuItemProps) => {
 
                 <button
                   onClick={() => decrement(food.id)}
-                  className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
                 >
-                  <MinusIcon />
+                  <MinusIcon className="text-foreground" />
                 </button>
               </>
             )}

src/components/listview/MenuItemRenderer.tsx

@@ -10,10 +10,7 @@ function MenuItemRendererComponent({ children, ...rest }: Props) {
   return (
     <div
       {...rest}
-      className={`${rest.className} transition-all duration-200 ease-out w-full min-h-36 bg-white rounded-3xl px-4 flex items-center justify-between gap-4`}
-      style={{
-        boxShadow: '0px 2px 16px 0px #00000014'
-      }}>
+      className={`${rest.className} box-shadow-normal transition-all duration-200 ease-out w-full min-h-36 bg-container rounded-3xl px-4 flex items-center justify-between gap-4`}>
 
       {children}
     </div>

src/components/topbar/TopBar.tsx

@@ -1,10 +1,9 @@
 'use client'
 
 import React from 'react'
-import BurgerMenuIcon from '../icons/BurgerMenuIcon'
 import NotificationBellIcon from '../icons/NotificationBellIcon'
 import Image from 'next/image'
-import { ArrowDown2, LogoutCurve, ProfileCircle, Setting2 } from 'iconsax-react'
+import { ArrowDown2, HambergerMenu, LogoutCurve, ProfileCircle, Setting2 } from 'iconsax-react'
 import Dropdown from '../utils/Dropdown'
 import Seperator from '../utils/Seperator'
 import Link from 'next/link'
@@ -33,7 +32,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
             <div className='grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 xl:gap-8 items-center'>
                 <div className='inline-flex justify-between items-center'>
                     <button className='inline-block xl:hidden' onClick={toggleMenuState}>
-                        <BurgerMenuIcon />
+                        <HambergerMenu className='stroke-foreground' size={24} />
                     </button>
                     {/* <div onClick={toggleSearchModalState} className='xl:bg-[#EEF0F7] xl:hidden inline-flex rounded-xl px-4 h-12 xl:w-[370px] items-center content-center' >
                         S
@@ -54,7 +53,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                         width={73}
                         height={25}
                         alt='Profile avatar'
-                        className='rounded-full'
+                        className='rounded-full dark:invert-100'
                         src={'/assets/images/danak-logo.png'} />
                 </div>
                 <div className='flex items-center justify-end gap-3 xl:gap-6'>
@@ -63,8 +62,8 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                     <Link
                         href={`/${name}/notifications`}
                         className='relative'>
-                        <NotificationBellIcon className='size-4.5 text-icon-active' />
-                        <span className='absolute -right-1 -top-1 bg-red-500 size-3 rounded-full text-[8px] text-white'>
+                        <NotificationBellIcon className='size-4.5 text-icon-active dark:text-foreground' />
+                        <span className='absolute -right-1 -top-1 bg-red-500 size-3 rounded-full text-[8px] text-container'>
                             <div className='mt-0.25 place-self-center'>2</div>
                         </span>
                     </Link>