general updates

2025-12-30 03:35:14 +03:00
parent dd11665743
commit e8c4bc909c
12 changed files with 124 additions and 53 deletions
--- a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
@@ -3,7 +3,6 @@ import { Button, message } from "antd";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
-import { colors } from "ThemeConstants.ts";
 import styles from "./AddToCartButton.module.css";
 import { useAppSelector, useAppDispatch } from "redux/hooks";
 import { Product } from "utils/types/appTypes";
@@ -215,7 +214,7 @@ export function AddToCartButton({ item }: { item: Product }) {
          onClick={handlePlusClick}
          className={styles.addButton}
          style={{
-            backgroundColor: colors.primary,
+            backgroundColor: "#FFC600",
            width: 28,
            height: 28,
            position: "absolute",
--- a/src/pages/menu/components/CategoriesList/CategoriesList.module.css
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
@@ -118,9 +118,9 @@
  will-change: position, transform, opacity, filter;
  transform-origin: top center;
  gap: 14px;
-  padding: 0.5rem 1rem 1rem 1rem;
+  padding: 0.5rem 24px 1rem 24px;
  user-select: none;
-  margin-bottom: 0.5rem;
+  margin-bottom: 16px;
 }

 .categoriesContainer::-webkit-scrollbar {
--- a/src/pages/menu/components/CategoriesList/CategoriesList.tsx
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
@@ -291,8 +291,8 @@ export function CategoriesList({ categories }: CategoriesListProps) {

                      color:
                        activeCategory === category.id
-                          ? colors.primary
-                          : undefined,
+                          ? "#FFC600"
+                          : "#86858E",
                      fontWeight:
                        activeCategory === category.id ? "600" : "500",
                      whiteSpace: "nowrap",
@@ -309,7 +309,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                        display: "inline-block",
                        borderBottom:
                          activeCategory === category.id && !isCategoriesSticky
-                            ? `2px solid ${colors.primary}`
+                            ? `2px solid #FFC600`
                            : "none",
                        paddingBottom: activeCategory === category.id ? 8 : 0,
                        marginTop: isCategoriesSticky ? 0 : 4,
--- a/src/pages/menu/components/MenuList/MenuList.module.css
+++ b/src/pages/menu/components/MenuList/MenuList.module.css
@@ -20,7 +20,6 @@
  margin-bottom: 105px !important;
  display: flex;
  flex-direction: column;
-  gap: 12px;
  padding: 0 1rem;
 }

@@ -36,7 +35,7 @@
 .menuItemsGrid {
  display: flex;
  flex-direction: column;
-  gap: 1rem;
+  gap: 12px;
 }

 /* Enhanced responsive menu section headers */
--- a/src/pages/menu/components/MenuList/MenuList.tsx
+++ b/src/pages/menu/components/MenuList/MenuList.tsx
@@ -54,7 +54,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
  return (
    <>
      <div className={styles.menuSections}>
-        {data?.categories?.map((category) => {
+        {data?.categories?.map((category, index) => {
          const categoryProducts = productsByCategory?.[category.id] || [];
          if (categoryProducts.length === 0) return null;

@@ -66,21 +66,24 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                  categoryRefs.current[category.id] = el;
                }
              }}
-              style={{ marginBottom: "1rem" }}
+              style={{ marginBottom: "2rem" }}
            >
-              <ProTitle
-                style={{
-                  fontWeight: 600,
-                  fontStyle: "SemiBold",
-                  fontSize: "16px",
-                  lineHeight: "140%",
-                  letterSpacing: "0%",
-                  color: themeName === "dark" ? "#fff" : "#070707",
-                }}
-                level={5}
-              >
-                {isRTL ? category.name : category.name}
-              </ProTitle>
+              {index !== 0 && (
+                <ProTitle
+                  style={{
+                    fontWeight: 600,
+                    fontStyle: "SemiBold",
+                    fontSize: "16px",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                    color: themeName === "dark" ? "#fff" : "#070707",
+                    marginBottom: 16,
+                  }}
+                  level={5}
+                >
+                  {isRTL ? category.name : category.name}
+                </ProTitle>
+              )}
              <div className={styles.menuItemsGrid}>
                {categoryProducts.map((item: Product) => (
                  <ProductCard
--- a/src/pages/menu/components/MenuList/ProductCard.tsx
+++ b/src/pages/menu/components/MenuList/ProductCard.tsx
@@ -188,7 +188,7 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
                count={items
                  .filter((i) => i.id === item.id)
                  .reduce((total, item) => total + item.quantity, 0)}
-                color={colors.primary}
+                color="#FFC600"
                title={`${items
                  .filter((i) => i.id === item.id)
                  .reduce((total, item) => total + item.quantity, 0)} in cart`}
--- a/src/pages/menu/menu.module.css
+++ b/src/pages/menu/menu.module.css
@@ -4,8 +4,13 @@
 }

 .itemDescription {
-  font-size: 14px !important;
-  transition: color 0.3s ease;
+  font-family: Roboto;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 14px;
+  line-height: 120%;
+  letter-spacing: 0%;
+  color: #707070;
 }

 .cover {
@@ -533,9 +538,13 @@
 }

 .restaurantTitle {
-  font-size: 24px !important;
-  font-weight: bold;
-  margin-bottom: 0px !important;
+  font-family: Roboto;
+  font-weight: 600;
+  font-style: SemiBold;
+  font-size: 24px;
+  line-height: 120%;
+  letter-spacing: 0%;
+  color: #070707;
 }

 .restaurantDescription {
@@ -558,16 +567,26 @@

 .ratingScore {
  position: relative;
-  top: 3px;
-  font-size: 12px;
+  top:6px;
+  font-family: Roboto;
  font-weight: 600;
+  font-style: SemiBold;
+  font-size: 10px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #333333;
 }

 .ratingCount {
  position: relative;
-  top: 3px;
-  font-size: 12px;
-  color: #666;
+  top: 6px;
+  font-family: Roboto;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 10px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #506fd7;
 }

 .searchButtonContainer {
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -119,9 +119,9 @@ function MenuPage() {
          <div className={`${styles.headerContainer}`}>
            <div className={styles.contentWrapper}>
              <div className={styles.restaurantHeaderTitleContainer}>
-                <ProTitle className={styles.restaurantTitle}>
+                <ProText className={styles.restaurantTitle}>
                  {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
-                </ProTitle>
+                </ProText>
                <Button
                  className={
                    restaurant?.isOpened
@@ -151,7 +151,7 @@ function MenuPage() {
              <div className={styles.ratingContainer}>
                <StarFilled className={styles.ratingStar} />
                <ProText className={styles.ratingScore}>4.5</ProText>
-                <ProText className={styles.ratingCount}>(2567)</ProText>
+                <ProText className={styles.ratingCount}>(2567) </ProText>
                <ProText
                  className={`${styles.itemDescription} ${styles.restaurantDescription} responsive-text`}
                >
@@ -166,6 +166,35 @@ function MenuPage() {
            </div>
          </div>

+          <Button
+            style={{
+              height: 32,
+              borderRadius: 6,
+              paddingTop: 6,
+              paddingRight: 16,
+              paddingBottom: 6,
+              paddingLeft: 16,
+              gap: 8,
+              opacity: 1,
+              margin: 16,
+              backgroundColor: "#EBEBEC",
+              border: "none",
+            }}
+          >
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#09237D",
+              }}
+            >
+              Call Waiter
+            </ProText>
+          </Button>
+
          <div className={`${styles.pageContainer}`}>
            <Space orientation="vertical" style={{ width: "100%" }}>
              <div>
--- a/src/pages/restaurant/restaurant.module.css
+++ b/src/pages/restaurant/restaurant.module.css
@@ -143,7 +143,7 @@
@media (max-width: 769px) {
  .servicesGrid {
    display: grid;
-    gap: 10px;
+    gap: 16px;
    padding: 0 1rem;
    margin: 10px 0;
  }
@@ -260,7 +260,7 @@
  .servicesGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
-    gap: 20px;
+    gap: 24px;
    padding: 0 32px;
    margin: 32px 0;
    max-width: 700px;
@@ -603,7 +603,7 @@

  .servicesGrid {
    max-width: 1000px;
-    gap: 20px;
+    gap: 24px;
    padding: 0 32px;
    margin: 32px 0;
  }