cart: enhance cart items styles

src/pages/cart/cart.module.css

@@ -19,8 +19,6 @@
   justify-content: space-between;
 }
 
-
-
 .cartContent {
   width: 100%;
 }
@@ -96,9 +94,7 @@
 }
 
 .desktopSectionHeader {
-  margin-bottom: 32px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid var(--border);
 }
 
 .desktopEmptyCart {
@@ -130,7 +126,7 @@
 }
 
 .desktopCartItem {
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border:none;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
@@ -343,7 +339,7 @@
   box-shadow: 0 0 0 0 !important;
 }
 
-[data-theme="dark"] .menuItemImage{
+[data-theme="dark"] .menuItemImage {
   border-color: rgba(255, 255, 255, 0.1);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
@@ -352,8 +348,6 @@
   color: rgba(255, 255, 255, 0.75) !important;
 }
 
-
-
 /* Keyframe animations */
 @keyframes fadeInUp {
   from {
@@ -507,16 +501,11 @@
 /* Large screens (min-width: 768px) */
 @media (min-width: 768px) {
   .cartContainer:focus,
-  .menuItemImage:focus{
+  .menuItemImage:focus {
     outline-offset: 4px;
   }
-
 }
 
-
-
-
-
 /* Extra large desktop screens (min-width: 1440px) */
 @media (min-width: 1440px) {
   .desktopCartContainer {
@@ -627,4 +616,4 @@
 .desktopCheckoutButton:focus {
   outline: 2px solid #ffffff;
   outline-offset: 2px;
-}
+}

src/pages/cart/components/CartDesktopLayout.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Col, Row } from "antd";
+import { Button, Card, Col, Divider, Row } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon.tsx";
@@ -88,21 +88,19 @@ export default function CartDesktopLayout() {
                     {items.map((item, index) => (
                       <Card
                         key={item.id}
-                        hoverable
                         className={`${styles.desktopCartItem} desktop`}
                         styles={{
                           body: {
-                            padding: "28px",
+                            padding: 0,
                             borderRadius: 24,
                           },
                         }}
-                        style={
-                          {
-                            "--animation-order": index,
-                          } as React.CSSProperties
-                        }
                       >
-                        <Row gutter={[28, 20]} align="middle">
+                        <Row
+                          gutter={[28, 20]}
+                          align="middle"
+                          style={{ marginTop: index === 0 ? 20 : 0 }}
+                        >
                           <Col xs={24} sm={8} md={6}>
                             <div className={styles.desktopImageContainer}>
                               <ImageWithFallback
@@ -110,12 +108,18 @@ export default function CartDesktopLayout() {
                                 alt={item.name}
                                 className={styles.desktopMenuItemImage}
                                 style={{
-                                  width: 140,
-                                  height: 140,
+                                  width: 120,
+                                  height: 120,
+                                  borderRadius: 16,
                                 }}
                                 fallbackSrc={
                                   "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
                                 }
+                                loadingContainerStyle={{
+                                  width: 120,
+                                  height: 120,
+                                  borderRadius: 16,
+                                }}
                               />
                             </div>
                           </Col>
@@ -158,6 +162,9 @@ export default function CartDesktopLayout() {
                             </div>
                           </Col>
                         </Row>
+                        {index !== items.length - 1 && (
+                          <Divider style={{ margin: "20px 0 0 0" }} />
+                        )}
                       </Card>
                     ))}
                   </div>