styles enhancements

src/index.css

@@ -34,6 +34,11 @@
   --font-weight-medium: 500;
   --font-weight-bold: 700;
   --font-weight-black: 900;
+
+  --tw-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
+  --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
 }
 
 /* Dark theme variables */
@@ -378,3 +383,18 @@ label {
   background-image: none !important;
   transition: background-color 5000s ease-in-out 0s !important;
 }
+
+/* Style for the select component and its dropdown */
+:where(.ant-select .ant-select-selection-item) {
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  text-align: center;
+}
+.menu-select-container :where(.ant-select .ant-select-arrow) {
+  font-weight: 600 !important;
+  color: black;
+}
+.menu-select-container :where(.ant-select-dropdown .ant-select-item) {
+  font-size: 12px !important;
+  font-weight: 600 !important;
+}

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

@@ -108,7 +108,7 @@
   -ms-overflow-style: none;
   position: sticky;
   top: 0;
-  background: #fff;
+  background: var(--background);
   z-index: 10;
   overflow: hidden;
   text-align: center;
@@ -132,7 +132,7 @@
   .categoriesContainer {
     cursor: grab;
   }
-  
+
   .categoriesContainer:active {
     cursor: grabbing;
   }
@@ -384,7 +384,9 @@
   width: 100vw !important;
   z-index: 1000 !important;
   border-bottom: 1px solid var(--ant-color-border) !important;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),
+    var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow) !important;
   background: #fff !important;
   animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
   transform-origin: top center !important;

src/pages/menu/components/CategoriesList/CategoriesList.tsx

@@ -251,9 +251,9 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                     ...(xs || md
                       ? {
                           // backgroundColor: "#fff6e0",
-                          borderBottom: "solid 1px var(--primary)",
+                          borderBottom: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
-                          borderRight: "solid 1px var(--primary)",
+                          borderRight: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
-                          borderLeft: "solid 1px var(--primary)",
+                          borderLeft: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
                           borderTop: isCategoriesSticky
                             ? "solid 1px var(--primary)"
                             : 0,

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

@@ -112,11 +112,12 @@
 .restaurantInfoSkeleton {
   text-align: center;
   padding: 0 16px;
+  margin-top: 10px;
 }
 
 /* Loyalty Card Skeleton */
 .loyaltySkeleton {
-  margin: 16px 0;
+  margin-bottom: 16px;
   padding: 0 16px;
 }
 
@@ -278,7 +279,6 @@
     margin-bottom: 10px;
   }
 
-
   .restaurantInfoSkeleton {
     padding: 0 24px;
   }
@@ -291,7 +291,6 @@
     margin-bottom: 32px;
   }
 
-
   .skeletonContainer .ant-skeleton {
     margin-bottom: 16px;
   }

src/pages/menu/menu.module.css

@@ -104,9 +104,9 @@
   left: auto;
 }
 
-/* .headerContainer{
+.headerContainer {
-
+  margin: 5px 0px;
-} */
+}
 
 /* Enhanced responsive item description */
 
@@ -435,7 +435,7 @@
   width: 28%;
   height: 32px;
   left: 36%;
-  border-radius: 40%;
+  border-radius: 16px;
 }
 .orderTypeSelect {
   width: 95%;
@@ -443,21 +443,6 @@
   margin-right: 5%;
 }
 
-/* Style for the select component and its dropdown */
-:global(.ant-select .ant-select-selection-item) {
-  font-size: 12px !important;
-  font-weight: 700 !important;
-  text-align: center;
-}
-:global(.ant-select .ant-select-arrow) {
-  font-weight: 600 !important;
-  color:black;
-}
-:global(.ant-select-dropdown .ant-select-item) {
-  font-size: 12px !important;
-  font-weight: 600 !important;
-}
-
 .searchButtonContainer {
   right: 20px;
   border-radius: 50%;

src/pages/menu/page.tsx

@@ -1,5 +1,5 @@
 import { StarFilled } from "@ant-design/icons";
-import { Image, Space, Select } from "antd";
+import { Image, Select, Space } from "antd";
 import { FloatingButton } from "components/FloatingButton/FloatingButton";
 import ImageWithFallback from "components/ImageWithFallback";
 import LoyaltyCard from "components/LoyaltyCard/LoyaltyCard";
@@ -8,6 +8,7 @@ import ProTitle from "components/ProTitle";
 import { useScrollHandler } from "contexts/ScrollHandlerContext";
 import useBreakPoint from "hooks/useBreakPoint";
 import { useRestaurant } from "hooks/useRestaurant";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useTranslation } from "react-i18next";
 import { useParams, useSearchParams } from "react-router-dom";
 import {
@@ -16,6 +17,7 @@ import {
 } from "redux/api/others";
 import { useAppSelector } from "redux/hooks";
 import { default_image } from "utils/constants";
+import { enumToSelectOptions } from "utils/helpers/helperFunctions.ts";
 import BackButton from "./components/BackButton";
 import { CartButton } from "./components/CartButton/CartButton";
 import { CategoriesList } from "./components/CategoriesList/CategoriesList";
@@ -26,11 +28,10 @@ import MenuSkeleton from "./components/MenuSkeleton/MenuSkeleton";
 import ScrollEventHandler from "./components/ScrollEventHandler";
 import SearchButton from "./components/SearchButton";
 import styles from "./menu.module.css";
-import { enumToSelectOptions } from "utils/helpers/helperFunctions.ts";
-import { OrderType } from "pages/checkout/hooks/types.ts";
 
 function MenuPage() {
   const { id } = useParams();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setSearchParams] = useSearchParams();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { orderType } = useAppSelector((state) => state.order);
@@ -100,7 +101,7 @@ function MenuPage() {
               <BackButton />
             </div>
             <div
-              className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer}`}
+              className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer} menu-select-container`}
             >
               <Select
                 value={orderType}