fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

general updates

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-30 03:35:14 +03:00
parent dd11665743
commit e8c4bc909c
12 changed files with 124 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ThemeConstants.ts
View File

@@ -2,7 +2,7 @@
import type { ThemeConfig } from "antd"; import type { ThemeConfig } from "antd";
export const colors = { export const colors = {
primary: "#CC9300", primary: "#FFB700",
secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)", secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)",
darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)", darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
}; };

2
src/components/LoyaltyCard/LoyaltyCard.module.css
View File

@@ -10,7 +10,7 @@
background-color: var(--secondary-background); background-color: var(--secondary-background);
border: none; border: none;
margin-bottom: 1rem; margin-bottom: 1rem;
margin: 16px; margin: 0 16px 20px 16px;
border-radius: 6px; border-radius: 6px;
} }

42
src/components/LoyaltyCard/LoyaltyCard.tsx
View File

@@ -1,5 +1,4 @@
import { Card, Col, Image, Row } from "antd"; import { Card, Col, Image, Row } from "antd";
import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
import PresentIcon from "components/Icons/cart/PresentIcon"; import PresentIcon from "components/Icons/cart/PresentIcon";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
@@ -8,11 +7,13 @@ import { ACCESS_TOKEN } from "utils/constants";
import { colors } from "ThemeConstants.ts"; import { colors } from "ThemeConstants.ts";
import ProText from "../ProText"; import ProText from "../ProText";
import styles from "./LoyaltyCard.module.css"; import styles from "./LoyaltyCard.module.css";
import { useAppSelector } from "redux/hooks";
const LoyaltyCard = () => { const LoyaltyCard = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { subdomain } = useParams(); const { subdomain } = useParams();
const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain); const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
const { isRTL } = useAppSelector((state) => state.locale);
const token = localStorage.getItem(ACCESS_TOKEN); const token = localStorage.getItem(ACCESS_TOKEN);
const isHasLoyaltyGift = const isHasLoyaltyGift =
(restaurant?.loyalty_stamps || 0) - (restaurant?.loyalty_stamps || 0) -
@@ -29,11 +30,20 @@ const LoyaltyCard = () => {
> >
<Col> <Col>
<Row align="middle" gutter={[8, 8]}> <Row align="middle" gutter={[8, 8]}>
<Col> {/* <Col>
<LoyaltyIcon className={styles.loyaltyIcon} /> <LoyaltyIcon className={styles.loyaltyIcon} />
</Col> </Col> */}
<Col> <Col>
<ProText style={{ fontSize: "1rem", fontWeight: 400 }}> <ProText
style={{
fontWeight: 600,
fontStyle: "SemiBold",
fontSize: "16px",
lineHeight: "140%",
letterSpacing: "0%",
color: "#333333",
}}
>
{t("menu.loyaltyPoints")} {t("menu.loyaltyPoints")}
</ProText> </ProText>
</Col> </Col>
@@ -42,10 +52,13 @@ const LoyaltyCard = () => {
type="secondary" type="secondary"
strong strong
style={{ style={{
fontSize: "14px", fontWeight: 400,
fontWeight: 700, fontStyle: "Regular",
position: "relative", fontSize: "12px",
lineHeight: "140%",
letterSpacing: "0%",
top: -2, top: -2,
color: "#777580",
}} }}
> >
{token && {token &&
@@ -61,12 +74,21 @@ const LoyaltyCard = () => {
textDecoration: "underline", textDecoration: "underline",
fontSize: "14px", fontSize: "14px",
fontWeight: 400, fontWeight: 400,
padding: "0 4px", padding: isRTL ? "0 0 0 4px" : "0 4px 0 0",
}} }}
> >
{t("menu.joinUs")} {t("menu.joinUs")}
</Link> </Link>
<span style={{ fontSize: "14px", color: colors.secondary }}> <span
style={{
fontWeight: 400,
fontStyle: "Regular",
fontSize: "12px",
lineHeight: "140%",
letterSpacing: "0%",
color: "#777580",
}}
>
{t("menu.joinUsDescription")} {t("menu.joinUsDescription")}
</span> </span>
</div> </div>
@@ -80,7 +102,7 @@ const LoyaltyCard = () => {
style={{ style={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
gap: 10, gap: 12,
overflow: "hidden", overflow: "hidden",
scrollbarWidth: "none", scrollbarWidth: "none",
}} }}

3
src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
View File

@@ -3,7 +3,6 @@ import { Button, message } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others"; import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { colors } from "ThemeConstants.ts";
import styles from "./AddToCartButton.module.css"; import styles from "./AddToCartButton.module.css";
import { useAppSelector, useAppDispatch } from "redux/hooks"; import { useAppSelector, useAppDispatch } from "redux/hooks";
import { Product } from "utils/types/appTypes"; import { Product } from "utils/types/appTypes";
@@ -215,7 +214,7 @@ export function AddToCartButton({ item }: { item: Product }) {
onClick={handlePlusClick} onClick={handlePlusClick}
className={styles.addButton} className={styles.addButton}
style={{ style={{
backgroundColor: colors.primary, backgroundColor: "#FFC600",
width: 28, width: 28,
height: 28, height: 28,
position: "absolute", position: "absolute",

4
src/pages/menu/components/CategoriesList/CategoriesList.module.css
View File

@@ -118,9 +118,9 @@
will-change: position, transform, opacity, filter; will-change: position, transform, opacity, filter;
transform-origin: top center; transform-origin: top center;
gap: 14px; gap: 14px;
padding: 0.5rem 1rem 1rem 1rem; padding: 0.5rem 24px 1rem 24px;
user-select: none; user-select: none;
margin-bottom: 0.5rem; margin-bottom: 16px;
} }
.categoriesContainer::-webkit-scrollbar { .categoriesContainer::-webkit-scrollbar {

6
src/pages/menu/components/CategoriesList/CategoriesList.tsx
View File

@@ -291,8 +291,8 @@ export function CategoriesList({ categories }: CategoriesListProps) {
color: color:
activeCategory === category.id activeCategory === category.id
? colors.primary ? "#FFC600"
: undefined, : "#86858E",
fontWeight: fontWeight:
activeCategory === category.id ? "600" : "500", activeCategory === category.id ? "600" : "500",
whiteSpace: "nowrap", whiteSpace: "nowrap",
@@ -309,7 +309,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
display: "inline-block", display: "inline-block",
borderBottom: borderBottom:
activeCategory === category.id && !isCategoriesSticky activeCategory === category.id && !isCategoriesSticky
? `2px solid ${colors.primary}` ? `2px solid #FFC600`
: "none", : "none",
paddingBottom: activeCategory === category.id ? 8 : 0, paddingBottom: activeCategory === category.id ? 8 : 0,
marginTop: isCategoriesSticky ? 0 : 4, marginTop: isCategoriesSticky ? 0 : 4,

3
src/pages/menu/components/MenuList/MenuList.module.css
View File

@@ -20,7 +20,6 @@
margin-bottom: 105px !important; margin-bottom: 105px !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px;
padding: 0 1rem; padding: 0 1rem;
} }
@@ -36,7 +35,7 @@
.menuItemsGrid { .menuItemsGrid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 12px;
} }
/* Enhanced responsive menu section headers */ /* Enhanced responsive menu section headers */

7
src/pages/menu/components/MenuList/MenuList.tsx
View File

@@ -54,7 +54,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
return ( return (
<> <>
<div className={styles.menuSections}> <div className={styles.menuSections}>
{data?.categories?.map((category) => { {data?.categories?.map((category, index) => {
const categoryProducts = productsByCategory?.[category.id] || []; const categoryProducts = productsByCategory?.[category.id] || [];
if (categoryProducts.length === 0) return null; if (categoryProducts.length === 0) return null;
@@ -66,8 +66,9 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
categoryRefs.current[category.id] = el; categoryRefs.current[category.id] = el;
} }
}} }}
style={{ marginBottom: "1rem" }} style={{ marginBottom: "2rem" }}
> >
{index !== 0 && (
<ProTitle <ProTitle
style={{ style={{
fontWeight: 600, fontWeight: 600,
@@ -76,11 +77,13 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
lineHeight: "140%", lineHeight: "140%",
letterSpacing: "0%", letterSpacing: "0%",
color: themeName === "dark" ? "#fff" : "#070707", color: themeName === "dark" ? "#fff" : "#070707",
marginBottom: 16,
}} }}
level={5} level={5}
> >
{isRTL ? category.name : category.name} {isRTL ? category.name : category.name}
</ProTitle> </ProTitle>
)}
<div className={styles.menuItemsGrid}> <div className={styles.menuItemsGrid}>
{categoryProducts.map((item: Product) => ( {categoryProducts.map((item: Product) => (
<ProductCard <ProductCard

2
src/pages/menu/components/MenuList/ProductCard.tsx
View File

@@ -188,7 +188,7 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
count={items count={items
.filter((i) => i.id === item.id) .filter((i) => i.id === item.id)
.reduce((total, item) => total + item.quantity, 0)} .reduce((total, item) => total + item.quantity, 0)}
color={colors.primary} color="#FFC600"
title={`${items title={`${items
.filter((i) => i.id === item.id) .filter((i) => i.id === item.id)
.reduce((total, item) => total + item.quantity, 0)} in cart`} .reduce((total, item) => total + item.quantity, 0)} in cart`}

39
src/pages/menu/menu.module.css
View File

@@ -4,8 +4,13 @@
} }
.itemDescription { .itemDescription {
font-size: 14px !important; font-family: Roboto;
transition: color 0.3s ease; font-weight: 400;
font-style: Regular;
font-size: 14px;
line-height: 120%;
letter-spacing: 0%;
color: #707070;
} }
.cover { .cover {
@@ -533,9 +538,13 @@
} }
.restaurantTitle { .restaurantTitle {
font-size: 24px !important; font-family: Roboto;
font-weight: bold; font-weight: 600;
margin-bottom: 0px !important; font-style: SemiBold;
font-size: 24px;
line-height: 120%;
letter-spacing: 0%;
color: #070707;
} }
.restaurantDescription { .restaurantDescription {
@@ -558,16 +567,26 @@
.ratingScore { .ratingScore {
position: relative; position: relative;
top: 3px; top:6px;
font-size: 12px; font-family: Roboto;
font-weight: 600; font-weight: 600;
font-style: SemiBold;
font-size: 10px;
line-height: 100%;
letter-spacing: 0%;
color: #333333;
} }
.ratingCount { .ratingCount {
position: relative; position: relative;
top: 3px; top: 6px;
font-size: 12px; font-family: Roboto;
color: #666; font-weight: 400;
font-style: Regular;
font-size: 10px;
line-height: 100%;
letter-spacing: 0%;
color: #506fd7;
} }
.searchButtonContainer { .searchButtonContainer {

33
src/pages/menu/page.tsx
View File

@@ -119,9 +119,9 @@ function MenuPage() {
<div className={`${styles.headerContainer}`}> <div className={`${styles.headerContainer}`}>
<div className={styles.contentWrapper}> <div className={styles.contentWrapper}>
<div className={styles.restaurantHeaderTitleContainer}> <div className={styles.restaurantHeaderTitleContainer}>
<ProTitle className={styles.restaurantTitle}> <ProText className={styles.restaurantTitle}>
{isRTL ? restaurant?.nameAR : restaurant?.restautantName} {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
</ProTitle> </ProText>
<Button <Button
className={ className={
restaurant?.isOpened restaurant?.isOpened
@@ -166,6 +166,35 @@ function MenuPage() {
</div> </div>
</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}`}> <div className={`${styles.pageContainer}`}>
<Space orientation="vertical" style={{ width: "100%" }}> <Space orientation="vertical" style={{ width: "100%" }}>
<div> <div>

6
src/pages/restaurant/restaurant.module.css
View File

@@ -143,7 +143,7 @@
@media (max-width: 769px) { @media (max-width: 769px) {
.servicesGrid { .servicesGrid {
display: grid; display: grid;
gap: 10px; gap: 16px;
padding: 0 1rem; padding: 0 1rem;
margin: 10px 0; margin: 10px 0;
} }
@@ -260,7 +260,7 @@
.servicesGrid { .servicesGrid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 20px; gap: 24px;
padding: 0 32px; padding: 0 32px;
margin: 32px 0; margin: 32px 0;
max-width: 700px; max-width: 700px;
@@ -603,7 +603,7 @@
.servicesGrid { .servicesGrid {
max-width: 1000px; max-width: 1000px;
gap: 20px; gap: 24px;
padding: 0 32px; padding: 0 32px;
margin: 32px 0; margin: 32px 0;
} }