diff --git a/src/index.css b/src/index.css
index 569f250..055c039 100644
--- a/src/index.css
+++ b/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;
+}
diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.module.css b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
index 0906f0b..ff6f92b 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.module.css
+++ b/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;
diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.tsx b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
index 4c27059..458be03 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.tsx
+++ b/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)",
- borderRight: "solid 1px var(--primary)",
- borderLeft: "solid 1px var(--primary)",
+ borderBottom: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
+ borderRight: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
+ borderLeft: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
borderTop: isCategoriesSticky
? "solid 1px var(--primary)"
: 0,
diff --git a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
index 32100b3..1a867c9 100644
--- a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
+++ b/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;
}
diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css
index 701e664..f993c8a 100644
--- a/src/pages/menu/menu.module.css
+++ b/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%;
diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx
index b7e356a..d437a19 100644
--- a/src/pages/menu/page.tsx
+++ b/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() {