fix design bug

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

@@ -7,6 +7,7 @@ import { useGetFoods } from '@/app/[name]/(Main)/hooks/useMenuData';
 import type { Food } from '@/app/[name]/(Main)/types/Types';
 import { useCart } from '../hook/useCart';
 import { useTranslation } from 'react-i18next';
+import { CartItemsSkeleton } from './CartSkeleton';
 
 const CartItemsList = () => {
   const { data: foodsResponse, isFetching } = useGetFoods();
@@ -25,12 +26,7 @@ const CartItemsList = () => {
   }, [foods, items]);
 
   if (isFetching && !foods.length) {
-    return (
+    return <CartItemsSkeleton />;
-      <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
-        <span className='h-4 w-4 animate-spin rounded-full border border-dashed border-foreground border-t-transparent'></span>
-        <p>{t('LoadingCart', { defaultValue: 'در حال دریافت سبد خرید...' })}</p>
-      </div>
-    );
   }
 
   if (cartFoods.length === 0) {

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

@@ -0,0 +1,67 @@
+'use client';
+
+import { Skeleton } from '@/components/ui/skeleton';
+import MenuItemRenderer from '@/components/listview/MenuItemRenderer';
+
+export const CartItemsSkeleton = () => {
+  return (
+    <div className='flex-1 space-y-4'>
+      {[...Array(3)].map((_, index) => (
+        <MenuItemRenderer key={index}>
+          <div className='flex gap-4 w-full h-full items-center'>
+            <Skeleton className='min-w-28 w-28 h-28 rounded-xl' />
+            <div className='w-full inline-flex flex-col justify-between'>
+              <div>
+                <Skeleton className='h-5 w-32 rounded-md mb-2' />
+                <Skeleton className='h-4 w-full rounded-md mb-1' />
+                <Skeleton className='h-4 w-3/4 rounded-md' />
+              </div>
+              <div className='inline-flex mt-2 gap-2 justify-between w-full items-center'>
+                <div className='w-full flex flex-col gap-1'>
+                  <Skeleton className='h-4 w-16 rounded-md' />
+                  <Skeleton className='h-4 w-20 rounded-md mt-1' />
+                </div>
+                <Skeleton className='max-w-[115px] w-full h-8 rounded-md' />
+              </div>
+            </div>
+          </div>
+        </MenuItemRenderer>
+      ))}
+    </div>
+  );
+};
+
+export const CartSummarySkeleton = () => {
+  return (
+    <>
+      <div className='mt-2'>
+        <div className='relative'>
+          <Skeleton className='h-5 w-32 rounded-md mb-4' />
+          <Skeleton className='w-full h-24 rounded-normal' />
+        </div>
+      </div>
+
+      <div className='fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-border p-4 w-full'>
+        <div className='flex justify-between items-center gap-4'>
+          <div className='flex flex-col'>
+            <Skeleton className='h-3 w-24 rounded-md mb-2' />
+            <Skeleton className='h-5 w-32 rounded-md' />
+          </div>
+          <Skeleton className='h-10 w-32 rounded-md' />
+        </div>
+      </div>
+    </>
+  );
+};
+
+const CartSkeleton = () => {
+  return (
+    <>
+      <CartItemsSkeleton />
+      <CartSummarySkeleton />
+    </>
+  );
+};
+
+export default CartSkeleton;
+

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

@@ -8,12 +8,17 @@ import { useCart } from './hook/useCart';
 import CartItemsList from './components/CartItemsList';
 import CartSummary from './components/CartSummary';
 import Prompt from '@/components/utils/Prompt';
+import { useGetFoods } from '@/app/[name]/(Main)/hooks/useMenuData';
+import { CartSummarySkeleton } from './components/CartSkeleton';
 
 const CartIndex = () => {
   const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
   const router = useRouter();
   const { clearCart } = useCart();
   const [showClearConfirm, setShowClearConfirm] = React.useState(false);
+  const { data: foodsResponse, isFetching } = useGetFoods();
+  const foods = React.useMemo(() => foodsResponse?.data ?? [], [foodsResponse?.data]);
+  const isLoading = isFetching && !foods.length;
 
   const handleClearCart = (e: React.MouseEvent) => {
     e?.preventDefault();
@@ -48,7 +53,7 @@ const CartIndex = () => {
 
       <div className='flex overflow-y-auto noscrollbar flex-col h-full pt-4 gap-4 pb-24' dir='rtl'>
         <CartItemsList />
-        <CartSummary />
+        {isLoading ? <CartSummarySkeleton /> : <CartSummary />}
       </div>
 
       <div className={showClearConfirm ? 'fixed inset-0 z-1001' : 'pointer-events-none fixed inset-0 z-1001'}>

src/app/[name]/(Dialogs)/order/checkout/[id]/components/CarAddressSection.tsx

@@ -65,7 +65,7 @@ export const CarAddressSection = () => {
                         value={carAddress?.carColor || ''}
                         onChange={handleCarColorChange}
                         className="bg-inherit"
-                        inputClassName="text-xs"
+                        inputClassName="text-xs!"
 
                     />
                     <InputField
@@ -75,7 +75,7 @@ export const CarAddressSection = () => {
                         value={carAddress?.plateNumber || ''}
                         onChange={handlePlateNumberChange}
                         className="bg-inherit"
-                        inputClassName="text-xs"
+                        inputClassName="text-xs!"
                     />
                 </div>
             </div>

src/app/[name]/(Dialogs)/order/checkout/[id]/components/ShippingSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Combobox from '@/components/combobox/Combobox';
-import { Box, Location, Car, TruckTick, Building } from 'iconsax-react';
+import { Box, Location, Car, Building } from 'iconsax-react';
 import { useTranslation } from 'react-i18next';
 import { useGetShipmentMethod } from '../../hooks/useOrderData';
 import { DeliveryMethod } from '../../types/Types';
@@ -33,19 +33,27 @@ export const ShippingSection = ({ deliveryType, onDeliveryTypeChange }: Shipping
             case 'deliveryCar':
                 return Car;
             case 'deliveryCourier':
-                return TruckTick;
+                return undefined;
             default:
                 return Box;
         }
     };
 
+    const getDeliveryMethodImage = (method: string) => {
+        if (method === 'deliveryCourier') {
+            return '/assets/images/fast-delivery.svg';
+        }
+        return undefined;
+    };
+
     const options = shipmentMethod?.data
         .filter((item: DeliveryMethod) => item.enabled)
         .sort((a: DeliveryMethod, b: DeliveryMethod) => a.order - b.order)
         .map((item: DeliveryMethod) => ({
             id: item.id,
             title: getDeliveryMethodTranslation(item.method),
-            icon: getDeliveryMethodIcon(item.method)
+            icon: getDeliveryMethodIcon(item.method),
+            imagePath: getDeliveryMethodImage(item.method)
         })) || [];
 
     return (

src/app/[name]/(Main)/components/MenuFilterDrawer.tsx

@@ -102,7 +102,7 @@ const MenuFilterDrawer = ({
             value={tempIngredients}
             onChange={handleIngredientsChange}
             placeholder={tMenu("MenuFilterDrawer.SelectContent.Placeholder") || "محتویات را وارد کنید..."}
-            className="w-full h-11 px-3 py-2.5 text-sm2 rounded-normal border border-border bg-container/29 focus:outline-none focus:ring-2 focus:ring-black"
+            className="w-full h-11 px-3 py-2.5 text-sm2 rounded-normal border border-border bg-container/29 focus:outline-none focus:ring-2 focus:ring-black text-xs!"
           />
         </div>
         <ComboBox

src/components/combobox/Combobox.tsx

@@ -5,11 +5,13 @@ import { motion, Variants } from 'framer-motion';
 import { Icon, SearchNormal } from 'iconsax-react';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import Image from 'next/image';
 
 export interface ComboboxOption {
     id: string;
     title: string;
     icon?: Icon;
+    imagePath?: string;
     label?: string;
 }
 
@@ -64,7 +66,16 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
     const activeIcon = selectedOption?.icon && React.createElement(selectedOption.icon, {
         size: 16,
         className: "inline-block mr-1 stroke-primary"
-    })
+    });
+    const activeImage = selectedOption?.imagePath && (
+        <Image
+            src={selectedOption.imagePath}
+            alt=""
+            width={20}
+            height={20}
+            className="inline-block mr-1"
+        />
+    );
 
 
     const variants: Variants = {
@@ -117,7 +128,9 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
 
                 <div className="w-full text-sm2 flex items-center justify-start gap-3">
                     {
-                        activeIcon ? (
+                        activeImage ? (
+                            activeImage
+                        ) : activeIcon ? (
                             activeIcon
                         ) : (
                             Icon && <Icon size={16} className="inline-block mr-1 stroke-primary" />
@@ -171,7 +184,15 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
                                 aria-selected
                             >
                                 {
-                                    v?.icon && React.createElement(v.icon, {
+                                    v?.imagePath ? (
+                                        <Image
+                                            src={v.imagePath}
+                                            alt=""
+                                            width={16}
+                                            height={16}
+                                            className="inline-block mr-1"
+                                        />
+                                    ) : v?.icon && React.createElement(v.icon, {
                                         size: 16,
                                         className: "inline-block mr-1 stroke-primary"
                                     })

src/components/icons/BagIcon.tsx

@@ -13,7 +13,7 @@ const BagIcon = (props: Props) => (
   >
     <path
       d="M7.5 8V7.03C7.5 4.78 9.31 2.57 11.56 2.36C14.24 2.1 16.5 4.21 16.5 6.84V8.22"
-      stroke="#8C90A3"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeMiterlimit={10}
       strokeLinecap="round"
@@ -21,7 +21,7 @@ const BagIcon = (props: Props) => (
     />
     <path
       d="M8.99983 21H14.9998C19.0198 21 19.7398 19.39 19.9498 17.43L20.6998 11.43C20.9698 8.99 20.2698 7 15.9998 7H7.99983C3.72983 7 3.02983 8.99 3.29983 11.43L4.04983 17.43C4.25983 19.39 4.97983 21 8.99983 21Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeMiterlimit={10}
       strokeLinecap="round"

src/components/icons/HeartIcon.tsx

@@ -13,7 +13,7 @@ const HeartIcon = (props: Props) => (
   >
     <path
       d="M12.62 20.8101C12.28 20.9301 11.72 20.9301 11.38 20.8101C8.48 19.8201 2 15.6901 2 8.6901C2 5.6001 4.49 3.1001 7.56 3.1001C9.38 3.1001 10.99 3.9801 12 5.3401C13.01 3.9801 14.63 3.1001 16.44 3.1001C19.51 3.1001 22 5.6001 22 8.6901C22 15.6901 15.52 19.8201 12.62 20.8101Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"

src/components/icons/PagerIcon.tsx

@@ -13,28 +13,28 @@ const PagerIcon = (props: Props) => (
   >
     <path
       d="M18.9702 22H4.97021C1.97021 22 1.97021 20.65 1.97021 19V18C1.97021 17.45 2.42021 17 2.97021 17H20.9702C21.5202 17 21.9702 17.45 21.9702 18V19C21.9702 20.65 21.9702 22 18.9702 22Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M20.72 13V17H3.27002V13C3.27002 9.16 5.98002 5.95 9.59002 5.18C10.13 5.06 10.69 5 11.27 5H12.72C13.3 5 13.87 5.06 14.41 5.18C18.02 5.96 20.72 9.16 20.72 13Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M14.5 4.5C14.5 4.74 14.47 4.96 14.41 5.18C13.87 5.06 13.3 5 12.72 5H11.27C10.69 5 10.13 5.06 9.59 5.18C9.53 4.96 9.5 4.74 9.5 4.5C9.5 3.12 10.62 2 12 2C13.38 2 14.5 3.12 14.5 4.5Z"
-      stroke="#8C90A3"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M15 11H9"
-      stroke="#8C90A3"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"

src/components/navigation/BottomNavBar.tsx

@@ -84,10 +84,10 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
               {onPagerClick ? (
                 <button
                   onClick={onPagerClick}
-                  className="flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary"
+                  className="flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary dark:text-white dark:**:stroke-white"
                 >
                   <PagerIcon width={20} height={20} />
-                  <span className="text-xs2">
+                  <span className="text-xs2 dark:text-white">
                     {t('Pager')}
                   </span>
                 </button>
@@ -99,7 +99,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
                 icon={
                   <HomeIcon
                     className={clsx(
-                      'transition-all duration-200 stroke-primary'
+                      'transition-all duration-200 stroke-primary dark:stroke-white dark:text-white'
                     )}
                     fill="white"
                     stroke="currentColor"
@@ -110,10 +110,10 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
               <Link
                 href={`/${name}/about`}
                 className={clsx(
-                  'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0'
+                  'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0 dark:text-white dark:**:stroke-white'
                 )}
               >
-                <div className="shrink-0 text-primary">
+                <div className="shrink-0 text-primary dark:text-white">
                   <Building
                     key={`building-${buildingVariant}-${isAboutRoute}`}
                     size={20}
@@ -122,7 +122,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
                     className='stroke-0'
                   />
                 </div>
-                <span className="text-xs2 text-center truncate w-full">
+                <span className="text-xs2 text-center truncate w-full dark:text-white">
                   {t('about')}
                 </span>
               </Link>

src/components/navigation/BottomNavLink.tsx

@@ -17,7 +17,7 @@ function BottomNavLink({ icon, value, href, ...restProps }: Props) {
 
   return (
     <Link {...restProps} href={href} className={clsx(
-      'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0',
+      'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0 dark:text-white dark:**:stroke-white',
       isActive && 'text-primary-foreground **:stroke-primary-foreground',
       restProps.className ?? '',
     )}>
@@ -25,7 +25,7 @@ function BottomNavLink({ icon, value, href, ...restProps }: Props) {
         {icon}
       </div>
       <span className={clsx(
-        'text-xs2 text-center truncate w-full',
+        'text-xs2 text-center truncate w-full dark:text-white',
       )}>
         {value}
       </span>

src/components/navigation/BottomNavLinkBig.tsx

@@ -25,7 +25,7 @@ function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
       )}>
         {icon}
       </div>
-      <span className="text-xs2">
+      <span className="text-xs2 dark:text-white">
         {value}
       </span>
     </Link>