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 (
-      <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>
-    );
+    return <CartItemsSkeleton />;
   }
 
   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