enhace UI

src/assets/locals/ar.json

@@ -311,7 +311,7 @@
     "selectOffice": "اختر المكتب",
     "officeNo": "رقم المكتب",
     "company": "الشركة",
-    "contactPerson": "الاتصال بالشخص",
+    "contactPerson": "اسم الموظف",
     "phone": "الهاتف",
     "giftDetails": "تفاصيل الهدية",
     "changeGift": "تغيير الهدية",

src/pages/address/address.module.css

@@ -258,11 +258,17 @@
 }
 
 .iconButtonStyle {
+  position: relative;
+  top: 5px;
+  width: 32px !important;
+  height: 32px !important;
   background-color: rgba(255, 183, 0, 0.08);
 }
 
 .detailLabelStyle {
-  font-size: 14px;
+  position: relative;
+  top: -5px;
+  font-size: 12px;
 }
 
 .smallTextStyle {

src/pages/checkout/components/GiftDetails.tsx

@@ -87,35 +87,33 @@ export const GiftDetails = () => {
           <div className={styles.detailsRowContainer}>
             <div className={styles.detailItemContainer}>
               <Button
-                type="text"
-                shape="circle"
                 className={styles.iconButtonStyle}
-              >
+                icon={<GoldenHouseIcon />}
-                <GoldenHouseIcon />
+              />
-              </Button>
               <div>
                 <ProText className={styles.detailLabelStyle}>
                   {t("address.receiverName")}
                 </ProText>
                 <br />
-                <ProText type="secondary">{giftDetails?.receiverName}</ProText>
+                <ProText type="secondary" className={styles.smallTextStyle}>
+                  {giftDetails?.receiverName}
+                </ProText>
               </div>
             </div>
 
             <div className={styles.detailItemContainer}>
               <Button
-                type="text"
-                shape="circle"
                 className={styles.iconButtonStyle}
-              >
+                icon={<BuildsIcon />}
-                <BuildsIcon />
+              />
-              </Button>
               <div>
                 <ProText className={styles.detailLabelStyle}>
                   {t("address.receiverPhone")}
                 </ProText>
                 <br />
-                <ProText type="secondary">{giftDetails?.receiverPhone}</ProText>
+                <ProText type="secondary" className={styles.smallTextStyle}>
+                  {giftDetails?.receiverPhone}
+                </ProText>
               </div>
             </div>
           </div>

src/pages/checkout/components/OfficeDetails.tsx

@@ -73,35 +73,29 @@ export const OfficeDetails = () => {
           <div className={styles.detailsRowContainer}>
             <div className={styles.detailItemContainer}>
               <Button
-                type="text"
-                shape="circle"
                 className={styles.iconButtonStyle}
-              >
+                icon={<GoldenHouseIcon />}
-                <GoldenHouseIcon />
+              />
-              </Button>
               <div>
                 <ProText className={styles.detailLabelStyle}>
                   {t("address.floorNo")}
                 </ProText>
                 <br />
-                <ProText type="secondary">{officeDetails?.floorNo}</ProText>
+                <ProText type="secondary" className={styles.smallTextStyle}>{officeDetails?.floorNo}</ProText>
               </div>
             </div>
 
             <div className={styles.detailItemContainer}>
               <Button
-                type="text"
-                shape="circle"
                 className={styles.iconButtonStyle}
-              >
+                icon={<BuildsIcon />}
-                <BuildsIcon />
+              />
-              </Button>
               <div>
                 <ProText className={styles.detailLabelStyle}>
                   {t("address.officeNo")}
                 </ProText>
                 <br />
-                <ProText type="secondary">{officeDetails?.officeNo}</ProText>
+                <ProText type="secondary" className={styles.smallTextStyle}>{officeDetails?.officeNo}</ProText>
               </div>
             </div>
           </div>

src/pages/checkout/components/RoomDetails.tsx

@@ -72,35 +72,29 @@ export const RoomDetails = () => {
           <div className={styles.detailsRowContainer}>
             <div className={styles.detailItemContainer}>
               <Button
-                type="text"
-                shape="circle"
                 className={styles.iconButtonStyle}
-              >
+                icon={<GoldenHouseIcon />}
-                <GoldenHouseIcon />
+              />
-              </Button>
               <div>
                 <ProText className={styles.detailLabelStyle}>
                   {t("address.floorNo")}
                 </ProText>
                 <br />
-                <ProText type="secondary">{roomDetails?.floorNo}</ProText>
+                <ProText type="secondary" className={styles.smallTextStyle}>{roomDetails?.floorNo}</ProText>
               </div>
             </div>
 
             <div className={styles.detailItemContainer}>
               <Button
-                type="text"
-                shape="circle"
                 className={styles.iconButtonStyle}
-              >
+                icon={<BuildsIcon />} 
-                <BuildsIcon />
+              />
-              </Button>
               <div>
                 <ProText className={styles.detailLabelStyle}>
                   {t("address.roomNo")}
                 </ProText>
                 <br />
-                <ProText type="secondary">{roomDetails?.roomNo}</ProText>
+                <ProText type="secondary" className={styles.smallTextStyle}>{roomDetails?.roomNo}</ProText>
               </div>
             </div>
           </div>

src/pages/menu/components/SearchMenu/SearchMenu.tsx

@@ -1,30 +1,15 @@
-import { StarOutlined } from "@ant-design/icons";
-import { Badge, Button, Card } from "antd";
-import ArabicPrice from "components/ArabicPrice";
-import ImageWithFallback from "components/ImageWithFallback";
-import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
 import ProText from "components/ProText";
-import useBreakPoint from "hooks/useBreakPoint";
-import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
-import { useAppSelector } from "redux/hooks";
-import { colors } from "ThemeConstants";
 import { Product } from "utils/types/appTypes";
 import styles from "../MenuList/MenuList.module.css";
+import ProductCard from "../MenuList/ProductCard";
 
 interface MenuListProps {
   products: Product[];
 }
 
 export function SearchMenu({ products }: MenuListProps) {
-  const { isRTL } = useAppSelector((state) => state.locale);
-  const { isMobile, isTablet } = useBreakPoint();
-  const { items } = useAppSelector((state) => state.order);
-  const navigate = useNavigate();
   const { t } = useTranslation();
-  const { themeName } = useAppSelector((state) => state.theme);
-  const { subdomain } = useParams();
 
   // Show error state if data exists but has no products
   if (products && (!products || products.length === 0)) {
@@ -43,171 +28,7 @@ export function SearchMenu({ products }: MenuListProps) {
       <div className={styles.menuSections}>
         <div className={styles.menuItemsGrid}>
           {products.map((item: Product) => (
-            <div
+            <ProductCard item={item} key={item.id} />
-              key={item.id}
-              className={styles.productLink + " product-link-search"}
-              onClick={() => {
-                localStorage.setItem("product", JSON.stringify(item));
-                navigate(`/${subdomain}/product/${item.id}`);
-              }}
-            >
-              <Card
-                key={item.id}
-                style={{
-                  borderRadius: 8,
-                  overflow: "hide",
-                  width: "100%",
-                }}
-                styles={{
-                  body: {
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "space-between",
-                    borderRadius: 8,
-                    padding: item.description
-                      ? "16px 16px 8px 16px"
-                      : "16px 16px 24px 16px",
-                    overflow: "hide",
-                    boxShadow:
-                      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05)",
-                  },
-                }}
-              >
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    height: "100%",
-                    gap: isMobile ? 10 : 16,
-                  }}
-                >
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "column",
-                      justifyContent: "space-between",
-                      gap: "0.5rem",
-                    }}
-                  >
-                    <ProText
-                      style={{
-                        margin: 0,
-                        display: "inline-block",
-                        fontSize: "1rem",
-                        fontWeight: 600,
-                        letterSpacing: "-0.01em",
-                        lineHeight: 1.2,
-                        color: themeName === "dark" ? "#fff" : "#000044",
-                      }}
-                    >
-                      {isRTL ? item.name : item.nameOther}
-                    </ProText>
-                    {item.description && (
-                      <ProText
-                        type="secondary"
-                        className={styles.itemDescription}
-                        style={{
-                          display: "-webkit-box",
-                          WebkitBoxOrient: "vertical",
-                          WebkitLineClamp: 2,
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          wordWrap: "break-word",
-                          overflowWrap: "break-word",
-                          lineHeight: "1.5rem",
-                          maxHeight: "3em",
-                          fontSize: "1rem",
-                          letterSpacing: "0.01em",
-                        }}
-                      >
-                        {item.description}
-                      </ProText>
-                    )}
-
-                    <div>
-                      {item.original_price !== item.price && (
-                        <ArabicPrice
-                          price={item.original_price}
-                          strong
-                          style={{
-                            fontSize: "1rem",
-                            fontWeight: 700,
-                            color: colors.primary,
-                            textDecoration: "line-through",
-                            marginRight: isRTL ? 0 : 10,
-                            marginLeft: isRTL ? 10 : 0,
-                          }}
-                        />
-                      )}
-                      <ArabicPrice
-                        price={item.price}
-                        strong
-                        style={{
-                          fontSize: "1rem",
-                          fontWeight: 700,
-                          color: colors.primary,
-                        }}
-                      />
-                    </div>
-
-                    <div
-                      style={{
-                        position: "relative",
-                        ...(isRTL ? { right: -5 } : {}),
-                      }}
-                    >
-                      <ItemDescriptionIcons
-                        className={styles.itemDescriptionIcons}
-                      />
-                    </div>
-                  </div>
-                  <div style={{ position: "relative" }}>
-                    <ImageWithFallback
-                      src={item.image_small || "/default.png"}
-                      fallbackSrc="/default.png"
-                      alt={item.name}
-                      className={`${styles.popularMenuItemImage} ${
-                        isMobile
-                          ? styles.popularMenuItemImageMobile
-                          : isTablet
-                            ? styles.popularMenuItemImageTablet
-                            : styles.popularMenuItemImageDesktop
-                      }`}
-                      width={90}
-                      height={90}
-                    />
-
-                    {item.isHasLoyalty && (
-                      <Button
-                        className={styles.loyaltyButton}
-                        icon={<StarOutlined />}
-                        style={{ width: 24, height: 24 }}
-                      />
-                    )}
-
-                    <AddToCartButton />
-
-                    {items.find((i) => i.id === item.id) && (
-                      <Badge
-                        count={items.find((i) => i.id === item.id)?.quantity}
-                        className={
-                          styles.cartBadge +
-                          " " +
-                          (isRTL ? styles.cartBadgeRTL : styles.cartBadgeLTR)
-                        }
-                        style={{
-                          backgroundColor: colors.primary,
-                        }}
-                        title={`${
-                          items.find((i) => i.id === item.id)?.quantity
-                        } in cart`}
-                      />
-                    )}
-                  </div>
-                </div>
-              </Card>
-            </div>
           ))}
         </div>
       </div>

src/pages/product/components/ProductFooter.tsx

@@ -1,4 +1,8 @@
-import { RightOutlined, ShoppingCartOutlined } from "@ant-design/icons";
+import {
+  LeftOutlined,
+  RightOutlined,
+  ShoppingCartOutlined,
+} from "@ant-design/icons";
 import { Button, Form, Input, message, Row } from "antd";
 import { addItem } from "features/order/orderSlice";
 import useBreakPoint from "hooks/useBreakPoint";
@@ -176,7 +180,8 @@ export default function ProductFooter({
                     className={styles.editButton}
                     onClick={() => setIsSpecialRequestOpen(true)}
                   >
-                    <u>{t("cart.editNote")}</u> <RightOutlined />
+                    <u>{t("cart.editNote")}</u>{" "}
+                    {isRTL ? <LeftOutlined /> : <RightOutlined />}
                   </div>
                 }
               />