From e8c4bc909cc4c50a6061ff8275b33815b1d75d8b Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Tue, 30 Dec 2025 03:35:14 +0300 Subject: [PATCH] general updates --- src/ThemeConstants.ts | 2 +- .../LoyaltyCard/LoyaltyCard.module.css | 2 +- src/components/LoyaltyCard/LoyaltyCard.tsx | 42 ++++++++++++++----- .../AddToCartButton/AddToCartButton.tsx | 3 +- .../CategoriesList/CategoriesList.module.css | 4 +- .../CategoriesList/CategoriesList.tsx | 6 +-- .../components/MenuList/MenuList.module.css | 3 +- .../menu/components/MenuList/MenuList.tsx | 33 ++++++++------- .../menu/components/MenuList/ProductCard.tsx | 2 +- src/pages/menu/menu.module.css | 39 ++++++++++++----- src/pages/menu/page.tsx | 35 ++++++++++++++-- src/pages/restaurant/restaurant.module.css | 6 +-- 12 files changed, 124 insertions(+), 53 deletions(-) diff --git a/src/ThemeConstants.ts b/src/ThemeConstants.ts index c8c39d9..55403d8 100644 --- a/src/ThemeConstants.ts +++ b/src/ThemeConstants.ts @@ -2,7 +2,7 @@ import type { ThemeConfig } from "antd"; export const colors = { - primary: "#CC9300", + primary: "#FFB700", secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)", darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)", }; diff --git a/src/components/LoyaltyCard/LoyaltyCard.module.css b/src/components/LoyaltyCard/LoyaltyCard.module.css index c4e4038..e93d859 100644 --- a/src/components/LoyaltyCard/LoyaltyCard.module.css +++ b/src/components/LoyaltyCard/LoyaltyCard.module.css @@ -10,7 +10,7 @@ background-color: var(--secondary-background); border: none; margin-bottom: 1rem; - margin: 16px; + margin: 0 16px 20px 16px; border-radius: 6px; } diff --git a/src/components/LoyaltyCard/LoyaltyCard.tsx b/src/components/LoyaltyCard/LoyaltyCard.tsx index d92c24d..6fdd636 100644 --- a/src/components/LoyaltyCard/LoyaltyCard.tsx +++ b/src/components/LoyaltyCard/LoyaltyCard.tsx @@ -1,5 +1,4 @@ import { Card, Col, Image, Row } from "antd"; -import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons"; import PresentIcon from "components/Icons/cart/PresentIcon"; import { useTranslation } from "react-i18next"; import { Link, useParams } from "react-router-dom"; @@ -8,11 +7,13 @@ import { ACCESS_TOKEN } from "utils/constants"; import { colors } from "ThemeConstants.ts"; import ProText from "../ProText"; import styles from "./LoyaltyCard.module.css"; +import { useAppSelector } from "redux/hooks"; const LoyaltyCard = () => { const { t } = useTranslation(); const { subdomain } = useParams(); const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain); + const { isRTL } = useAppSelector((state) => state.locale); const token = localStorage.getItem(ACCESS_TOKEN); const isHasLoyaltyGift = (restaurant?.loyalty_stamps || 0) - @@ -29,11 +30,20 @@ const LoyaltyCard = () => { > - + {/* - + */} - + {t("menu.loyaltyPoints")} @@ -42,10 +52,13 @@ const LoyaltyCard = () => { type="secondary" strong style={{ - fontSize: "14px", - fontWeight: 700, - position: "relative", + fontWeight: 400, + fontStyle: "Regular", + fontSize: "12px", + lineHeight: "140%", + letterSpacing: "0%", top: -2, + color: "#777580", }} > {token && @@ -61,12 +74,21 @@ const LoyaltyCard = () => { textDecoration: "underline", fontSize: "14px", fontWeight: 400, - padding: "0 4px", + padding: isRTL ? "0 0 0 4px" : "0 4px 0 0", }} > {t("menu.joinUs")} - + {t("menu.joinUsDescription")} @@ -80,7 +102,7 @@ const LoyaltyCard = () => { style={{ display: "flex", flexDirection: "row", - gap: 10, + gap: 12, overflow: "hidden", scrollbarWidth: "none", }} diff --git a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx index 91a7f50..5520023 100644 --- 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", diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.module.css b/src/pages/menu/components/CategoriesList/CategoriesList.module.css index d8e1e5d..61c8311 100644 --- 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 { diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.tsx b/src/pages/menu/components/CategoriesList/CategoriesList.tsx index a589a2e..dc9f527 100644 --- 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, diff --git a/src/pages/menu/components/MenuList/MenuList.module.css b/src/pages/menu/components/MenuList/MenuList.module.css index 79e2007..65c28bf 100644 --- 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 */ diff --git a/src/pages/menu/components/MenuList/MenuList.tsx b/src/pages/menu/components/MenuList/MenuList.tsx index 0c22799..6b35a58 100644 --- 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 ( <>
- {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" }} > - - {isRTL ? category.name : category.name} - + {index !== 0 && ( + + {isRTL ? category.name : category.name} + + )}
{categoryProducts.map((item: Product) => ( 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`} diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css index 6a9074e..b172d97 100644 --- 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 { diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx index 10b0a47..82d1a1f 100644 --- a/src/pages/menu/page.tsx +++ b/src/pages/menu/page.tsx @@ -119,9 +119,9 @@ function MenuPage() {
- + {isRTL ? restaurant?.nameAR : restaurant?.restautantName} - +
+ +
diff --git a/src/pages/restaurant/restaurant.module.css b/src/pages/restaurant/restaurant.module.css index c608175..07f45ab 100644 --- 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; }