MenuSkeleton: update logo

src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css

@@ -27,43 +27,30 @@
 
 .logo {
   position: absolute;
-  left: 33px;
-  top: -64px;
-  width: 72px;
-  height: 72px;
+  left: 19px !important;
+  top: 131px !important;
+  width: 70px !important;
+  height: 70px !important;
   border-radius: 50%;
-  border: 3px solid var(--background);
-  z-index: 10;
+  border: 3px solid var(--background) !important;
+  z-index: 11 !important;
   overflow: hidden;
 }
 
-.leftShape {
+.logoContainerIcon {
   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");
+  left: 0 !important;
+  top: 127px !important;
+  z-index: 10 !important;
 }
 
-:global(.darkApp) .leftShape {
-  background-color: var(--background);
+
+:global(.ant-app-rtl) .logo {
+  right: 19px;
 }
 
-.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);
+:global(.ant-app-rtl) .logoContainerIcon {
+  right: -10px;
 }
 
 /* Menu Section Styles */

src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx

@@ -1,4 +1,5 @@
 import { Card, Skeleton } from "antd";
+import LogoContainerIcon from "components/Icons/LogoContainerIcon";
 import useBreakPoint from "hooks/useBreakPoint";
 import styles from "./MenuSkeleton.module.css";
 
@@ -117,25 +118,10 @@ const MenuSkeleton = ({
           }}
         />
         {/* Logo Skeleton */}
-        <Skeleton.Image
-          active
-          style={{
-            position: "absolute",
-            left: isMobile ? "33px" : isTablet ? "40px" : "36px",
-            top: isMobile ? "133px" : isTablet ? "150px" : "130px",
-            borderRadius: "50%",
-            width: isMobile ? "72px" : isTablet ? "80px" : "150px",
-            height: isMobile ? "72px" : isTablet ? "80px" : "150px",
-            border: "3px solid var(--background)",
-            zIndex: 10,
-            overflow: "hidden",
-            padding: 10
-          }}
-        />
-
-        {/* Decorative Shap es Skeleton */}
-        <div className={styles.leftShape}></div>
-        <div className={styles.rightShape}></div>
+        <LogoContainerIcon className={styles.logoContainerIcon} />
+        <div className={styles.logo}>
+          <Skeleton.Image active />
+        </div>
       </div>
       <div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
         {/* Restaurant Info Skeleton */}
@@ -340,9 +326,7 @@ const MenuSkeleton = ({
                 />
               </div> */}
 
-                  <div
-                    className={`${styles.menuItemsGrid}`}
-                  >
+                  <div className={`${styles.menuItemsGrid}`}>
                     {Array.from({
                       length:
                         variant === "minimal"