cart: enhance cart items styles

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>