cart: fix dark theme

src/components/Icons/BackIcon.tsx

@@ -1,12 +1,9 @@
-import { useAppSelector } from "redux/hooks";
-
 interface BackIconType {
   className?: string;
   onClick?: () => void;
 }
 
 const BackIcon = ({ className, onClick }: BackIconType) => {
-  const { themeName } = useAppSelector((state) => state.theme);
   return (
     <svg
       width="16"
@@ -19,7 +16,7 @@ const BackIcon = ({ className, onClick }: BackIconType) => {
     >
       <path
         d="M10 12L6 8L10 4"
-        stroke={themeName === "dark" ? "#ffffff" : "rgba(95, 108, 123, 1)"}
+        stroke={"rgba(95, 108, 123, 1)"}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

src/index.css

@@ -48,7 +48,9 @@ body,
 .ant-app {
   max-width: 100vw;
   max-height: 100vh;
-  /* overflow: hidden; */
+  /* overflow: auto; */
+  /* added temporary to remove scrollbar in desktop */
+  scrollbar-width: none;
 }
 
 body {

src/pages/cart/cart.module.css

@@ -85,12 +85,10 @@
   max-width: 100vw;
   margin: 0 auto;
   padding: 40px 24px;
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   min-height: 100vh;
 }
 
 .desktopMainContent {
-  background: #ffffff;
   border-radius: 24px;
   padding: 32px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
@@ -106,7 +104,6 @@
 .desktopEmptyCart {
   text-align: center;
   padding: 80px 40px;
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   border-radius: 20px;
   border: 2px dashed rgba(0, 0, 0, 0.1);
 }
@@ -123,7 +120,7 @@
 }
 
 .desktopCartItemsSection {
-  margin-bottom: 48px;
+  margin-bottom: 16px;
 }
 
 .desktopCartItems {
@@ -270,7 +267,7 @@
   top: 24px;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 16px;
 }
 
 .desktopSidebarCard {
@@ -533,15 +530,15 @@
 
   .desktopRecommendationsGrid {
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 32px;
+    gap: 16px;
   }
 
   .desktopCartItems {
-    gap: 32px;
+    gap: 16px;
   }
 
   .desktopSidebar {
-    gap: 32px;
+    gap: 16px;
   }
 
   .desktopEmptyCart {

src/pages/cart/components/CartDesktopLayout.tsx

@@ -1,27 +1,27 @@
-import styles from "pages/cart/cart.module.css";
-import { Row, Col, Button, Card } from "antd";
-import ProTitle from "components/ProTitle.tsx";
-import { colors } from "ThemeConstants.ts";
-import ProText from "components/ProText.tsx";
-import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon.tsx";
-import { Link } from "react-router-dom";
-import ImageWithFallback from "components/ImageWithFallback";
+import { Button, Card, Col, Row } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
+import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon.tsx";
+import ImageWithFallback from "components/ImageWithFallback";
+import ProText from "components/ProText.tsx";
+import ProTitle from "components/ProTitle.tsx";
+import styles from "pages/cart/cart.module.css";
+import { Link } from "react-router-dom";
+import { colors } from "ThemeConstants.ts";
 import { CartItem } from "utils/types/appTypes.ts";
 
+import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
 import { selectCart } from "features/order/orderSlice.ts";
-import { useTranslation } from "react-i18next";
-import { useAppSelector } from "redux/hooks.ts";
-import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
+import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 import CouponCard from "pages/cart/components/CouponCard.tsx";
 import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
+import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
-import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
-import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
-import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
-import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
+import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks.ts";
+import CartFooter from "./cartFooter/CartFooter";
 
 export default function CartDesktopLayout() {
   const { t } = useTranslation();
@@ -40,7 +40,7 @@ export default function CartDesktopLayout() {
                 </div> */}
 
               {/* Cart Items Section */}
-              <div className={styles.desktopCartItemsSection}>
+              <Card className={styles.desktopCartItemsSection}>
                 <div className={styles.desktopSectionHeader}>
                   <ProTitle
                     level={3}
@@ -48,13 +48,6 @@ export default function CartDesktopLayout() {
                   >
                     {t("cart.yourOrder")}
                   </ProTitle>
-                  <ProText type="secondary" style={{ fontSize: "16px" }}>
-                    {items.length === 0
-                      ? t("emptyCart")
-                      : `${items.length} ${
-                          items.length === 1 ? t("item") : t("items")
-                        } ${t("inYourCart")}`}
-                  </ProText>
                 </div>
 
                 {items.length === 0 ? (
@@ -163,7 +156,9 @@ export default function CartDesktopLayout() {
                     ))}
                   </div>
                 )}
-              </div>
+              </Card>
+
+              <CartFooter />
             </div>
           </Col>
 
@@ -216,8 +211,6 @@ export default function CartDesktopLayout() {
             </div>
           </Col>
         </Row>
-
-        <CartFooter />
       </div>
     </>
   );

src/pages/cart/components/cartFooter/footer.module.css

@@ -16,9 +16,11 @@
 /* :global(.darkApp) .cartFooter {
   background-color: var(--background) !important;
 } */
+
 @media (min-width: 992px) {
   .cartFooter {
-    position: absolute;
-    height: 12vh;
+    background-color: none;
+    position: relative;
+    border-radius: 24px;
   }
 }

src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css

@@ -112,13 +112,13 @@
 }
 
 /* Dark theme styles */
-[data-theme="dark"] .arrowButton {
+:global(.darkApp) .arrowButton stroke {
   background: rgba(30, 30, 30, 0.95);
   border-color: rgba(255, 255, 255, 0.1);
   color: white;
 }
 
-[data-theme="dark"] .arrowButton:hover {
+[data-theme="dark"] .arrowButton:hover stroke{
   background: rgba(40, 40, 40, 1);
   border-color: rgba(255, 255, 255, 0.2);
 }