dark mode fix in safari

src/app/[name]/(Dialogs)/cart/components/CartSummary.tsx

@@ -102,7 +102,7 @@ const CartSummary = ({ isPremium }: CartSummaryProps) => {
                     }
                   }}
                 >
-                  <Button className='w-fit! px-10'>{t('ButtonCheckout')}</Button>
+                  <Button className='w-fit! px-10 dark:bg-white dark:text-black! dark:hover:bg-gray-100'>{t('ButtonCheckout')}</Button>
                 </Link>
               )}
             </div>

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-white dark:text-white hover:bg-primary/90 active:brightness-110',
+          disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white dark:text-black 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'
         )}

src/components/navigation/BottomNavBar.tsx

@@ -182,7 +182,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
               <div className="flex flex-col items-center gap-[5px]">
                 <div className="relative shrink-0">
                   <div className="w-5 h-5 opacity-0"></div>
-                  <span className="absolute sm:-top-1 sm:-right-1 top-0 -right-1 flex items-center justify-center min-w-[14px] min-h-[14px] px-1 text-[8px] font-medium text-white bg-primary rounded-full z-50">
+                  <span className="absolute sm:-top-1 sm:-right-1 top-0 -right-1 flex items-center justify-center min-w-[14px] min-h-[14px] px-1 text-[8px] font-medium text-white dark:bg-white dark:text-black bg-primary rounded-full z-50">
                     {cartItemsCount > 99 ? '99+' : cartItemsCount}
                   </span>
                 </div>

src/components/pager/PagerModal.tsx

@@ -72,20 +72,20 @@ export default function PagerModal({ visible, onClose }: PagerModalProps) {
           <div className='max-w-[123px] w-full flex justify-between items-center'>
 
             <button onClick={handleIncrement} className='size-8 bg-[#F2F2F2] rounded-[6px] flex justify-center items-center'>
-              <PlusIcon size={14} className="text-foreground" />
+              <PlusIcon size={14} className="currentColor dark:text-black" />
             </button>
 
             <div className='pt-1 font-semibold'>{tableNumber}</div>
 
             <button onClick={handleDecrement} className='size-8 bg-[#F2F2F2] rounded-[6px] flex justify-center items-center'>
-              <MinusIcon size={14} className="text-foreground" />
+              <MinusIcon size={14} className="currentColor dark:text-black" />
             </button>
           </div>
         </div>
 
         <div className='mt-3'>
           <textarea
-            className='w-full px-4 py-2.5 mt-4 text-sm2 leading-6 outline-0 border border-border rounded-normal resize-none focus:ring-0'
+            className='w-full px-4 py-2.5 mt-4 text-xs! leading-6 outline-0 border border-border rounded-normal resize-none focus:ring-0'
             placeholder='پیام خود را وارد کنید (اختیاری)'
             id='description'
             name='description'
@@ -96,7 +96,7 @@ export default function PagerModal({ visible, onClose }: PagerModalProps) {
 
         <div className='mt-7 flex gap-4 items-center'>
           <div className='flex-1'>
-            <Button className='h-10' pending={isPending} onClick={handlePage}>پیج کنید</Button>
+            <Button className='h-10 dark:bg-white dark:text-black' pending={isPending} onClick={handlePage}>پیج کنید</Button>
           </div>
           <div className='flex-1'>
             <OutlineButton onClick={handleClose} variant="outline" className="w-full bg-white rounded-normal h-10 font-normal text-sm">انصراف</OutlineButton>

src/components/topbar/TopBar.tsx

@@ -7,11 +7,12 @@ import { ArrowDown2, HambergerMenu, LogoutCurve, ProfileCircle, Setting2 } from
 import Dropdown from '../utils/Dropdown'
 import Seperator from '../utils/Seperator'
 import Link from 'next/link'
-import { useParams } from 'next/navigation'
+import { useParams, useRouter } from 'next/navigation'
 import useToggle from '@/hooks/helpers/useToggle'
 import LogoutPrompt from '@/features/general/LogoutPrompt'
 import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData'
 import { useGetNotificationsCount } from '@/app/[name]/(Main)/hooks/useMenuData'
+import { toast } from '../Toast'
 
 type Props = {
     profileDropState: boolean,
@@ -27,6 +28,7 @@ type Props = {
 function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: Props) {
 
     const params = useParams();
+    const router = useRouter();
     const { name } = params;
     const { state: logoutModal, toggle: toggleLogoutModal } = useToggle();
     const { data: profile, isSuccess } = useGetProfile();
@@ -35,6 +37,15 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
     const isLoggedIn = isSuccess && profileData;
     const fullName = profileData ? `${profileData.firstName} ${profileData.lastName}`.trim() : 'کاربر داناک';
 
+    const handleNotificationClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        if (!isLoggedIn) {
+            toast('ابتدا لاگین کنید', 'info');
+        } else {
+            router.push(`/${name}/notifications`);
+        }
+    };
+
     return (
         <div className="w-full">
             <div className='grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 xl:gap-8 items-center'>
@@ -67,14 +78,14 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                 <div className='flex items-center justify-end gap-3 xl:gap-6'>
                     {/* <NightModeSwitch checked={nightMode} onClick={toggleNightMode} /> */}
                     {/* <img className='hidden sm:block' src={rectangles} /> */}
-                    <Link
+                    <button
-                        href={`/${name}/notifications`}
+                        onClick={handleNotificationClick}
                         className='relative'>
                         <NotificationBellIcon className='size-4.5 text-icon-active dark:text-foreground' />
-                        <span className='absolute -right-1 -top-1 flex items-center justify-center bg-primary size-3 rounded-full text-[8px] text-container'>
+                        <span className='absolute -right-1 -top-1 flex items-center justify-center bg-primary size-3 rounded-full text-[8px] text-container dark:bg-white dark:text-black'>
                             <div className='mt-0.25 place-self-center'>{notificationsCount?.data?.count || '0'}</div>
                         </span>
-                    </Link>
+                    </button>
                     {isLoggedIn ? (
                         <button
                             id='profile-drop-toggle'