From 28bad2de5f2594fbee136a7f72d2a4ac7e5e7e17 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sat, 4 Oct 2025 18:16:26 +0300
Subject: [PATCH] fix skeleton styles

---
 .../components/MenuList/MenuList.module.css   |  7 +-
 .../menu/components/MenuList/MenuList.tsx     | 16 ++--
 .../MenuSkeleton/MenuSkeleton.module.css      | 96 ++++++++++---------
 .../components/MenuSkeleton/MenuSkeleton.tsx  | 83 +++++++---------
 src/pages/menu/menu.module.css                | 30 ++++--
 src/pages/menu/page.tsx                       |  9 +-
 6 files changed, 126 insertions(+), 115 deletions(-)

diff --git a/src/pages/menu/components/MenuList/MenuList.module.css b/src/pages/menu/components/MenuList/MenuList.module.css
index 60eb484..54ac4d5 100644
--- a/src/pages/menu/components/MenuList/MenuList.module.css
+++ b/src/pages/menu/components/MenuList/MenuList.module.css
@@ -49,10 +49,9 @@
 }
 
 .menuItemsGrid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: 1fr;
-  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .menuItemsGridMobile {
diff --git a/src/pages/menu/components/MenuList/MenuList.tsx b/src/pages/menu/components/MenuList/MenuList.tsx
index 70ca818..d6b5cf1 100644
--- a/src/pages/menu/components/MenuList/MenuList.tsx
+++ b/src/pages/menu/components/MenuList/MenuList.tsx
@@ -28,12 +28,14 @@ const { useBreakpoint } = Grid;
 export function MenuList({ data, categoryRefs }: MenuListProps) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const products = data?.products;
-  const { xs, md } = useBreakpoint();
+  const { xs, md, lg } = useBreakpoint();
   const { items } = useAppSelector((state) => state.order);
   const restaurantName = localStorage.getItem("restaurantName");
   const navigate = useNavigate();
   const { t } = useTranslation();
   const { themeName } = useAppSelector((state) => state.theme);
+  const isMobile = xs;
+  const isTablet = !xs && !md;
 
   // Show error state if data exists but has no products
   if (data && (!data.products || data.products.length === 0)) {
@@ -103,11 +105,13 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                 {isRTL ? category.name : category.name}
               </ProTitle>
               <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "1rem",
-                }}
+                className={
+                  styles.menuItemsGrid + " " + isMobile
+                    ? styles.menuItemsGridMobile
+                    : isTablet
+                    ? styles.menuItemsGridTablet
+                    : styles.menuItemsGridDesktop
+                }
               >
                 {categoryProducts.map((item: Product) => (
                   <div
diff --git a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
index b2153bf..e50b2e4 100644
--- a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
+++ b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
@@ -18,11 +18,40 @@
   gap: 16px;
 }
 
+.leftShape {
+  position: absolute;
+  top: 133px;
+  width: 47px;
+  height: 50px;
+  left: -11px;
+  background-color: var(--background);
+  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
+}
+
+:global(.darkApp) .leftShape {
+  background-color: var(--background);
+}
+
+.rightShape {
+  position: absolute;
+  top: 133px;
+  width: 47px;
+  height: 50px;
+  left: 102px;
+  background-color: var(--background);
+  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
+  transform: scale(-1, 1);
+}
+
+:global(.darkApp) .rightShape {
+  background-color: var(--background);
+}
+
 /* Enhanced responsive categories container */
 @media (min-width: 769px) and (max-width: 1024px) {
   .categoriesContainer {
     height: 160px;
-    padding: 16px;
+    padding: 0 24px;
     gap: 16px;
     display: flex;
     flex-wrap: nowrap;
@@ -32,14 +61,24 @@
 
   .categoriesSticky {
     padding: 12px 16px !important;
-    height: 30px !important;
+    height: 70px !important;
+  }
+
+  .leftShape {
+    top: 170px;
+    left: -3px;
+  }
+
+  .rightShape {
+    top: 170px;
+    left: 116px;
   }
 }
 
 @media (min-width: 1025px) {
   .categoriesContainer {
     height: 180px;
-    padding: 24px;
+    padding: 0 24px;
     max-width: 1200px;
     margin: 0 auto;
     gap: 16px;
@@ -57,11 +96,6 @@
   }
 }
 
-/* Menu Sections and Grid Layout */
-/* .menuSections {
-  margin-bottom: 105px !important;
-} */
-
 .menuSection:first-child h3 {
   margin-top: 0px !important;
 }
@@ -99,16 +133,15 @@
 }
 
 .menuItemsGridTablet {
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr;
   gap: 16px;
-  padding: 0 12px;
+  padding: 0 24px;
   margin-bottom: 20px;
 }
 
 .menuItemsGridDesktop {
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(1, 1fr);
   gap: 20px;
-  padding: 0 16px;
   margin-bottom: 24px;
 }
 
@@ -128,35 +161,6 @@
   margin-bottom: 24px;
 }
 
-.leftShape {
-  position: absolute;
-  top: 133px;
-  width: 47px;
-  height: 50px;
-  left: -11px;
-  background-color: var(--background);
-  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
-}
-
-:global(.darkApp) .leftShape {
-  background-color: var(--background);
-}
-
-.rightShape {
-  position: absolute;
-  top: 133px;
-  width: 47px;
-  height: 50px;
-  left: 102px;
-  background-color: var(--background);
-  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
-  transform: scale(-1, 1);
-}
-
-:global(.darkApp) .rightShape {
-  background-color: var(--background);
-}
-
 /* Restaurant Info Skeleton */
 .restaurantInfoSkeleton {
   text-align: center;
@@ -190,12 +194,11 @@
 /* Enhanced responsive page container */
 @media (min-width: 769px) and (max-width: 1024px) {
   .pageContainer {
-    padding: 24px;
+    /* padding: 0 24px; */
   }
 
   .restaurantInfoSkeleton {
     padding: 0 24px;
-    margin: 32px 0;
   }
 
   .loyaltySkeleton {
@@ -209,14 +212,13 @@
 
 @media (min-width: 1025px) {
   .pageContainer {
-    padding: 32px;
+    /* padding: 32px; */
     max-width: 1200px;
     margin: 0 auto;
   }
 
   .restaurantInfoSkeleton {
     padding: 0 32px;
-    margin: 40px 0;
   }
 
   .loyaltySkeleton {
@@ -317,7 +319,7 @@
 /* Tablet-specific skeleton styles */
 @media (min-width: 769px) and (max-width: 1024px) {
   .skeletonContainer {
-    padding: 24px;
+    /* padding: 0 24px; */
   }
 
   .skeletonContainer .ant-skeleton {
@@ -335,4 +337,4 @@
   .skeletonContainer .ant-skeleton-button {
     border-radius: 18px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
index 8f29964..951ed6d 100644
--- a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
+++ b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
@@ -19,21 +19,21 @@ const MenuSkeleton = ({
   itemCount = 8,
   variant = "default",
 }: MenuSkeletonProps) => {
-  const { xs, sm, md } = useBreakpoint();
+  const { xs, md } = useBreakpoint();
   const isMobile = xs;
-  const isTablet = sm && !md;
-  const isDesktop = md;
+  const isTablet = !xs && !md;
+  // const isDesktop = md;
 
   const getCategoryCardStyle = () => {
     if (isMobile) {
       return {
         width: 90,
-        height: 95,
+        height: 110,
       };
     } else if (isTablet) {
       return {
         width: 120,
-        height: 140,
+        height: 110,
       };
     } else {
       return {
@@ -66,23 +66,23 @@ const MenuSkeleton = ({
     if (isMobile) {
       return {
         width: 90,
-        height: 60,
+        height: 78,
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
       };
     } else if (isTablet) {
       return {
         width: 120,
-        height: 90,
-        borderTopLeftRadius: 12,
-        borderTopRightRadius: 12,
+        height: 78,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
       };
     } else {
       return {
-        width: 120,
-        height: 100,
-        borderTopLeftRadius: 16,
-        borderTopRightRadius: 16,
+        width: 140,
+        height: 78,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
       };
     }
   };
@@ -116,25 +116,8 @@ const MenuSkeleton = ({
     }
   };
 
-  const getPageContainerStyle = () => {
-    if (isDesktop) {
-      return {
-        maxWidth: "1200px",
-        margin: "0 auto",
-        padding: "32px",
-      };
-    } else if (isTablet) {
-      return {
-        padding: "24px",
-      };
-    }
-  };
-
   return (
-    <div
-      className={`${styles.pageContainer} ${styles.skeletonContainer}`}
-      style={getPageContainerStyle()}
-    >
+    <div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
       {/* Restaurant Header Skeleton */}
       <div className={styles.restaurantHeader}>
         {/* Cover Image Skeleton */}
@@ -153,10 +136,10 @@ const MenuSkeleton = ({
           style={{
             position: "absolute",
             left: isMobile ? "33px" : "40px",
-            top: isMobile ? "133px" : "-70px",
+            top: isMobile ? "133px" : isTablet ? "170px" : "170px",
             borderRadius: "50%",
-            width: isMobile ? "72px" : "80px",
-            height: isMobile ? "72px" : "80px",
+            width: isMobile ? "72px" : isTablet ? "80px" : "80px",
+            height: isMobile ? "72px" : isTablet ? "80px" : "80px",
             border: "3px solid var(--background)",
             zIndex: 10,
             overflow: "hidden",
@@ -262,7 +245,15 @@ const MenuSkeleton = ({
         variant === "minimal" ||
         variant === "detailed" ||
         variant === "categories-only") && (
-        <div style={{ padding: "0 1rem", display: "flex", gap: 8, overflow: "hidden" }}>
+        <div
+          style={{
+            padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
+            display: "flex",
+            gap: 8,
+            overflow: "hidden",
+            marginBottom: isMobile ? "4rem" : isTablet ? "8px" : "16px",
+          }}
+        >
           {Array.from({
             length:
               variant === "minimal"
@@ -313,7 +304,7 @@ const MenuSkeleton = ({
                   >
                     <Skeleton
                       active
-                      paragraph={{ rows: 1 }}
+                      paragraph={{ rows: 0 }}
                       style={{
                         margin: 0,
                         padding: isMobile ? 3 : 8,
@@ -332,7 +323,12 @@ const MenuSkeleton = ({
         variant === "minimal" ||
         variant === "detailed" ||
         variant === "menu-only") && (
-        <div className={styles.menuSections} style={{ padding: "0 1rem" }}>
+        <div
+          className={styles.menuSections}
+          style={{
+            padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
+          }}
+        >
           {Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
             (_, sectionIndex) => (
               <div key={sectionIndex} className={styles.menuSection}>
@@ -387,18 +383,11 @@ const MenuSkeleton = ({
                             lineHeight: 1,
                             height: "100%",
                             flex: 1,
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "center",
                           }}
                         >
-                          {/* Item Name Skeleton */}
-                          <Skeleton.Input
-                            active
-                            style={{
-                              marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
-                              height: isMobile ? 16 : isTablet ? 18 : 20,
-                              width: "80%",
-                            }}
-                          />
-
                           {/* Item Description Skeleton */}
                           <Skeleton
                             active
diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css
index 6ffe287..97e431c 100644
--- a/src/pages/menu/menu.module.css
+++ b/src/pages/menu/menu.module.css
@@ -104,14 +104,20 @@
   left: auto;
 }
 
+/* .headerContainer{
+
+} */
+
 /* Enhanced responsive item description */
 @media (min-width: 769px) and (max-width: 1024px) {
   .itemDescription {
     font-size: 14px !important;
   }
-  /* .logo {
-    display: none;
-  } */
+  .logo {
+    left: 40px;
+    width: 80px !important;
+    height: 80px !important;
+  }
 
   .cover {
     width: 100%;
@@ -121,6 +127,17 @@
   .restaurantHeader {
     margin-bottom: 0px;
   }
+
+  .leftShape {
+    top: 170px;
+    left: -3px;
+
+  }
+
+  .rightShape {
+    top: 170px;
+    left:116px
+  }
 }
 
 @media (min-width: 1025px) {
@@ -145,7 +162,7 @@
 .pageContainer {
   padding: 0;
   transition: all 0.3s ease;
-  background-color: "#F7F7F7"
+  background-color: "#F7F7F7";
 }
 
 /* Enhanced responsive page container */
@@ -606,7 +623,6 @@
 .ratingContainer {
   display: flex;
   gap: 4px;
-  margin-bottom: 10px;
 }
 
 .ratingStar {
@@ -646,6 +662,6 @@
   margin-bottom: 1px;
 }
 
-.restaurantDescriptionSkeleton .ant-skeleton-content .ant-skeleton-paragraph{
+.restaurantDescriptionSkeleton .ant-skeleton-content .ant-skeleton-paragraph {
   margin-block-start: 8px !important;
-}
\ No newline at end of file
+}
diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx
index 4c614b2..2541757 100644
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -43,8 +43,9 @@ function MenuPage() {
       skip: !restaurantDetails?.restaurant.id,
     }
   );
-  const { categoryRefs, isCategoriesSticky } = useScrollHandler();
+  const { categoryRefs } = useScrollHandler();
   const { xs, md } = useBreakpoint();
+  const isTablet = !xs && !md;
 
   const isLoading = isLoadingRestaurant || isLoadingMenu;
 
@@ -67,10 +68,10 @@ function MenuPage() {
               alt={t("menu.restaurantCover")}
               className={styles.cover}
               width={"100%"}
-              height={182}
+              height={xs ? 182 : isTablet ? 200 : 220}
               preview={false}
               loadingContainerStyle={{
-                width:"100vw"
+                width: "100vw",
               }}
             />
 
@@ -102,7 +103,7 @@ function MenuPage() {
             <SearchButton />
           </div>
 
-          <div className={`${styles.pageContainer}`}>
+          <div className={`${styles.headerContainer}`}>
             <div className={styles.contentWrapper}>
               <ProTitle level={4} className={styles.restaurantTitle}>
                 {isRTL ? restaurant?.nameAR : restaurant?.name}