From 0ca8e11c8349333a18e84d8e043224bc6f4fee31 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Wed, 26 Nov 2025 21:18:18 +0300
Subject: [PATCH] cart: enhacne desktop styles

---
 .../OrderSummary/OrderSummary.module.css      | 14 +---
 .../cart/components/CartDesktopLayout.tsx     | 37 ++-------
 src/pages/restaurant/page.tsx                 | 78 ++++++++++---------
 src/pages/restaurant/restaurant.module.css    | 64 +++++++--------
 4 files changed, 75 insertions(+), 118 deletions(-)

diff --git a/src/components/OrderSummary/OrderSummary.module.css b/src/components/OrderSummary/OrderSummary.module.css
index d4c39c7..676e5a0 100644
--- a/src/components/OrderSummary/OrderSummary.module.css
+++ b/src/components/OrderSummary/OrderSummary.module.css
@@ -65,12 +65,8 @@
 
 /* Tablet styles (769px - 1024px) */
 @media (min-width: 769px) and (max-width: 1024px) {
-  .orderSummary {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-
   .summaryRow {
-    padding: 12px 0;
+    padding: 6px 0;
     font-size: 16px;
   }
 
@@ -80,15 +76,13 @@
 
   .totalRow {
     font-size: 18px;
-    padding-top: 20px;
-    margin-top: 12px;
   }
 }
 
 /* Desktop styles (1025px+) */
 @media (min-width: 1025px) {
   .summaryRow {
-    padding: 8px 0;
+    padding: 4px 0;
     font-size: 18px;
   }
 
@@ -124,10 +118,6 @@
   .menuItemImage:hover {
     transform: scale(1.05);
   }
-
-  [data-theme="dark"] .orderSummary:hover {
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-  }
 }
 
 /* Print styles */
diff --git a/src/pages/cart/components/CartDesktopLayout.tsx b/src/pages/cart/components/CartDesktopLayout.tsx
index 39b38c9..fb30a04 100644
--- a/src/pages/cart/components/CartDesktopLayout.tsx
+++ b/src/pages/cart/components/CartDesktopLayout.tsx
@@ -30,9 +30,7 @@ interface CartDesktopLayoutProps {
 
 export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
   const { t } = useTranslation();
-  const { items } = useAppSelector(selectCart);
-
-  const orderType = localStorage.getItem("orderType");
+  const { items, orderType } = useAppSelector(selectCart);
 
   return (
     <>
@@ -167,45 +165,22 @@ export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
             <div className={styles.desktopSidebar}>
               <YouMightAlsoLike />
 
-              <div className={styles.desktopSidebarCard}>
-                <SpecialRequestCard />
-              </div>
+              <SpecialRequestCard />
 
-              <div
-                className={styles.desktopSidebarCard}
-                style={{ "--animation-order": 1 } as React.CSSProperties}
-              >
-                <CouponCard />
-              </div>
+              <CouponCard />
 
               {orderType === OrderType.Pickup && <CarPlateCard />}
 
               {(orderType === OrderType.Delivery ||
                 orderType === OrderType.Pickup) && <TimeEstimateCard />}
 
-              <div
-                className={styles.desktopSidebarCard}
-                style={{ "--animation-order": 1 } as React.CSSProperties}
-              >
-                <RewardWaiterCard />
-              </div>
+              <RewardWaiterCard />
 
               {/* Table Number */}
-              {orderType === OrderType.DineIn && (
-                <div
-                  className={styles.desktopSidebarCard}
-                  style={{ "--animation-order": 3 } as React.CSSProperties}
-                >
-                  <TableNumberCard />
-                </div>
-              )}
+              {orderType === OrderType.DineIn && <TableNumberCard />}
 
               {/* Order Summary */}
-              <Card
-                className={`${styles.desktopOrderSummary} ${styles.desktopSidebarCard}`}
-              >
-                <OrderSummary />
-              </Card>
+              <OrderSummary />
             </div>
           </Col>
         </Row>
diff --git a/src/pages/restaurant/page.tsx b/src/pages/restaurant/page.tsx
index 0f43644..b5bffc3 100644
--- a/src/pages/restaurant/page.tsx
+++ b/src/pages/restaurant/page.tsx
@@ -87,47 +87,49 @@ export default function RestaurantPage() {
       </div>
 
       <div className={styles.homeContainer}>
-        <div style={{ textAlign: "center", maxWidth: "100%" }}>
-          <div className={styles.logoContainer}>
-            <img
-              src={restaurant?.restaurant_logo || ""}
-              alt="logo"
-              width={96}
-              height={96}
-              className={styles.logo}
-            />
+        <div className={styles.homeContainerContent}>
+          <div style={{ textAlign: "center", maxWidth: "100%" }}>
+            <div className={styles.logoContainer}>
+              <img
+                src={restaurant?.restaurant_logo || ""}
+                alt="logo"
+                width={96}
+                height={96}
+                className={styles.logo}
+              />
+            </div>
+            <ProTitle level={5} style={{ margin: 0 }}>
+              {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
+            </ProTitle>
+            <ProText style={{ fontSize: 14, margin: 0 }}>
+              {isRTL ? restaurant?.descriptionAR : restaurant?.description}
+            </ProText>
           </div>
-          <ProTitle level={5} style={{ margin: 0 }}>
-            {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
-          </ProTitle>
-          <ProText style={{ fontSize: 14, margin: 0 }}>
-            {isRTL ? restaurant?.descriptionAR : restaurant?.description}
-          </ProText>
-        </div>
 
-        <RestaurantServices />
-        <div
-          ref={containerRef}
-          onTouchStart={handleTouchStart}
-          onTouchEnd={handleTouchEnd}
-        >
-          <div className={styles.promotionContainer}>
-            <Ads1 />
+          <RestaurantServices />
+          <div
+            ref={containerRef}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+          >
+            <div className={styles.promotionContainer}>
+              <Ads1 />
+            </div>
+          </div>
+          <div className={styles.socialIconsContainer}>
+            <Link to={`https://www.instagram.com/${restaurant?.instagram}`}>
+              <InstagramIcon className={styles.socialIcon} />
+            </Link>
+            <Link to="https://x.com/">
+              <XIcon className={styles.socialIcon} />
+            </Link>
+            <Link to="https://www.snapchat.com/">
+              <SnapIcon className={styles.socialIcon} />
+            </Link>
+            <Link to="https://www.jordan.com/">
+              <JIcon className={styles.socialIcon} />
+            </Link>
           </div>
-        </div>
-        <div className={styles.socialIconsContainer}>
-          <Link to={`https://www.instagram.com/${restaurant?.instagram}`}>
-            <InstagramIcon className={styles.socialIcon} />
-          </Link>
-          <Link to="https://x.com/">
-            <XIcon className={styles.socialIcon} />
-          </Link>
-          <Link to="https://www.snapchat.com/">
-            <SnapIcon className={styles.socialIcon} />
-          </Link>
-          <Link to="https://www.jordan.com/">
-            <JIcon className={styles.socialIcon} />
-          </Link>
         </div>
       </div>
 
diff --git a/src/pages/restaurant/restaurant.module.css b/src/pages/restaurant/restaurant.module.css
index baa3296..816a6db 100644
--- a/src/pages/restaurant/restaurant.module.css
+++ b/src/pages/restaurant/restaurant.module.css
@@ -113,17 +113,6 @@
    MOBILE MEDIA QUERIES (≤ 768px)
    =========================================== */
 
-/* Mobile - Small screens */
-@media (max-width: 480px) {
-  .homeContainer {
-    height: 100vh;
-    min-height: 100vh;
-    width: 100vw;
-    margin: 0;
-    padding: 0;
-  }
-}
-
 /* Mobile - General */
 @media (max-width: 768px) {
   .section {
@@ -140,15 +129,6 @@
   }
 }
 
-/* Mobile - Landscape orientation */
-@media (max-height: 500px) and (orientation: landscape) {
-  .homeContainer {
-    height: 100vh;
-    min-height: 100vh;
-    background-attachment: scroll;
-  }
-}
-
 /* Mobile - Services grid */
 @media (max-width: 769px) {
   .servicesGrid {
@@ -185,6 +165,14 @@
     text-align: center;
   }
 
+  .homeContainerContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+  }
+
   .logo {
     width: 140px;
     height: 140px;
@@ -308,13 +296,6 @@
    DESKTOP MEDIA QUERIES (≥ 1025px)
    =========================================== */
 
-/* Large screens */
-@media (min-width: 1200px) {
-  .homeContainer {
-    background-attachment: fixed;
-  }
-}
-
 /* Desktop */
 @media (min-width: 1025px) {
   .languageSwitch,
@@ -337,6 +318,15 @@
     text-align: center;
   }
 
+  .homeContainerContent {
+    margin: 6vh 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+  }
+
   .logo {
     width: 120px;
     height: 120px;
@@ -514,10 +504,18 @@
     gap: 32px;
   }
 
+  .homeContainerContent {
+    margin: 12vh 0 !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0px;
+  }
+
   .logo {
     width: 140px;
     height: 140px;
-    margin: 0 auto 24px;
     border-radius: 24px !important;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
     border: 4px solid rgba(255, 255, 255, 0.95);
@@ -799,14 +797,6 @@
   color: #ffffff;
 }
 
-:global(.darkApp) .homeContainer h1,
-:global(.darkApp) .homeContainer h2,
-:global(.darkApp) .homeContainer h3,
-:global(.darkApp) .homeContainer h4,
-:global(.darkApp) .homeContainer h5,
-:global(.darkApp) .homeContainer h6 {
-  color: #ffffff;
-}
 
 :global(.darkApp) .homeContainer p,
 :global(.darkApp) .homeContainer span {
@@ -815,7 +805,7 @@
 
 :global(.darkApp) .homeServiceCard {
   background-color: rgba(255, 183, 0, 0.12) !important;
-  border-color: #363636 !important;
+  border-color: var(--border) !important;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
 }