From 289fb05a927303de2f36ae1d4f9a42a246c764c9 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Tue, 12 Aug 2025 23:43:06 +0330
Subject: [PATCH] fix: some dark theme styles

---
 src/app/[name]/(Main)/[id]/page.tsx            | 17 +++++++++--------
 src/app/[name]/(Profile)/profile/edit/page.tsx |  2 +-
 src/components/button/PrimaryButton.tsx        |  2 +-
 src/components/menu/SideMenu.tsx               |  6 +++---
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/app/[name]/(Main)/[id]/page.tsx b/src/app/[name]/(Main)/[id]/page.tsx
index 99583d9..75e290e 100644
--- a/src/app/[name]/(Main)/[id]/page.tsx
+++ b/src/app/[name]/(Main)/[id]/page.tsx
@@ -2,6 +2,7 @@
 
 import MinusIcon from '@/components/icons/MinusIcon'
 import PlusIcon from '@/components/icons/PlusIcon'
+import { ef } from '@/lib/helpers/utfNumbers'
 import { useReceiptStore } from '@/zustand/receiptStore'
 import { motion } from 'framer-motion'
 import { ArrowLeft, Clock, Cup, Heart, TruckTick } from 'iconsax-react'
@@ -39,24 +40,24 @@ function FoodPage({ }: Props) {
                 </div>
             </div>
 
-            <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-white w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
+            <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
                 <div className="w-full inline-flex justify-between items-center">
                     <h5 className="text-base font-bold">
                         کباب چوبی مخصوص
                     </h5>
-                    <button className='p-2 bg-[#EAECF0] rounded-lg'>
-                        <Heart size={24} className='fill-black' />
+                    <button className='p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg'>
+                        <Heart variant='Bold' size={24} className='fill-black dark:fill-foreground' />
                     </button>
                 </div>
 
                 <div className="mt-4 text-xs">
                     <div className='flex items-center gap-1'>
                         <Clock size={14} className='stroke-disabled-text' />
-                        <span className='text-disabled-text'>زمان پخت و آماده سازی: 25 دقیقه</span>
+                        <span className='text-disabled-text'>زمان پخت و آماده سازی: {ef('25')} دقیقه</span>
                     </div>
                     <div className='flex items-center gap-2 mt-2'>
                         <Cup size={14} className='stroke-disabled-text' />
-                        <span className='text-disabled-text'>1500 امتیاز برای هر بار خرید</span>
+                        <span className='text-disabled-text'>{ef('1500')} امتیاز برای هر بار خرید</span>
                     </div>
                     <div className='flex items-center gap-2 mt-2'>
                         <TruckTick size={14} className='stroke-disabled-text' />
@@ -81,13 +82,13 @@ function FoodPage({ }: Props) {
                                 className="inline-flex w-full justify-center items-center gap-2"
                             >
                                 <PlusIcon />
-                                <span className="text-sm2 pt-0.5 font-medium">افزودن</span>
+                                <span className="text-sm2 pt-0.5 font-normal">افزودن</span>
                             </button>
                         ) : (
                             <>
                                 <button
                                     onClick={() => increment(0)}
-                                    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 />
                                 </button>
@@ -102,7 +103,7 @@ function FoodPage({ }: Props) {
                                 </motion.div>
                                 <button
                                     onClick={() => decrement(0)}
-                                    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 />
                                 </button>
diff --git a/src/app/[name]/(Profile)/profile/edit/page.tsx b/src/app/[name]/(Profile)/profile/edit/page.tsx
index 03c220a..69007e0 100644
--- a/src/app/[name]/(Profile)/profile/edit/page.tsx
+++ b/src/app/[name]/(Profile)/profile/edit/page.tsx
@@ -119,7 +119,7 @@ function ProfileIndex({ }: Props) {
                                 <ShadButton
                                     variant="outline"
                                     id="date"
-                                    className="w-full bg-container dark:text-border justify-between font-normal relative h-11 rounded-normal hover:bg-white"
+                                    className="w-full bg-container text-border dark:text-border justify-between font-normal relative h-11 rounded-normal hover:bg-white"
                                 >
                                     <div className='text-foreground'>
                                         {dateOfBirth ? dateLib.format(dateOfBirth, "yyyy/MM/dd") : "انتخاب کنید"}
diff --git a/src/components/button/PrimaryButton.tsx b/src/components/button/PrimaryButton.tsx
index 477f362..d6bf423 100644
--- a/src/components/button/PrimaryButton.tsx
+++ b/src/components/button/PrimaryButton.tsx
@@ -16,7 +16,7 @@ function Button({ children, className, disabled, pending, ...rest }: Props) {
         disabled={disabled}
         className={clsx(
           className,
-          disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-background dark:text-foreground hover:bg-primary/60 active:brightness-110',
+          disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white dark:text-foreground hover:bg-primary/90 active:brightness-110',
           pending && 'bg-transparent! text-transparent! cursor-auto!',
           'relative transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm overflow-clip'
         )}
diff --git a/src/components/menu/SideMenu.tsx b/src/components/menu/SideMenu.tsx
index 8bfabde..018eb17 100644
--- a/src/components/menu/SideMenu.tsx
+++ b/src/components/menu/SideMenu.tsx
@@ -86,7 +86,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
             <section className="flex-1 overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between md:w-[160px] xl:w-[285px]">
                 <div className=''>
                     <header className="px-5 pt-6 mt-3 md:px-6 xl:px-12">
-                        <h6 className="text-start font-bold text-sm text-menu-header mt-2 mb-[19px] dark:text-neutral-400">منو</h6>
+                        <h6 className="text-start font-bold text-sm text-menu-header mt-2 mb-[19px] dark:text-disabled-text">منو</h6>
                     </header>
 
                     <nav aria-label={tMenu('NavAriaLabel')}>
@@ -111,7 +111,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                                     <Icon
                                                         variant={isActive ? 'Bold' : 'Linear'}
                                                         className={clsx(
-                                                            isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-neutral-400 text-neutral-400'
+                                                            isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-icon-deactive text-icon-deactive'
                                                         )}
                                                         size={20} width={20} height={20} />
                                                 }
@@ -146,7 +146,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                                 <Icon
                                                     variant={isActive ? 'Bold' : 'Linear'}
                                                     className={clsx(
-                                                        isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-neutral-400 text-neutral-400'
+                                                        isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-icon-deactive text-icon-deactive'
                                                     )}
                                                     size={20} width={20} height={20} />