From 7769da2c2930a6f8e866a84bd29850bb563e614c Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Tue, 18 Nov 2025 00:21:33 +0300
Subject: [PATCH] dark theme fixes

---
 src/assets/locals/ar.json                     |  3 +-
 src/assets/locals/en.json                     |  3 +-
 src/components/ArabicPrice/ArabicPrice.tsx    | 10 ++---
 .../CustomBottomSheet/GiftBottomSheet.tsx     |  2 +-
 .../CustomBottomSheet/InfoButtonSheet.tsx     |  2 +-
 .../CustomBottomSheet/MapBottomSheet.tsx      |  3 +-
 .../CustomBottomSheet/OfficeBottomSheet.tsx   | 11 ++---
 .../CustomBottomSheet/RoomBottomSheet.tsx     |  8 +++-
 src/components/Icons/InfoIcon.tsx             |  2 +-
 src/components/Icons/order/InvoiceIcon.tsx    |  2 +-
 src/components/Icons/order/TimeIcon.tsx       |  2 +-
 .../InfoButton/InfoButton.module.css          | 16 ++++---
 src/components/InfoButton/InfoButton.tsx      |  1 -
 src/components/OtpInput/OtpInput.tsx          |  1 +
 src/components/ProPhoneInput.tsx              | 45 +++++++++----------
 src/index.css                                 | 11 +++--
 src/layouts/app/HeaderMenuDrawer.tsx          |  5 ++-
 src/pages/cart/components/TableNumberCard.tsx |  6 +--
 .../cart/components/cartFooter/CartFooter.tsx |  1 +
 src/pages/checkout/components/GiftDetails.tsx |  1 -
 20 files changed, 75 insertions(+), 60 deletions(-)

diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json
index de47b42..63cb0b6 100644
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -251,7 +251,8 @@
     "couponNotApplicable": "رمز القسيمة غير مطبق",
     "am": "ص",
     "pm": "م",
-    "cannotSelectPastDate": "لا يمكنك اختيار تاريخ سابق. يرجى اختيار اليوم أو تاريخ مستقبلي."
+    "cannotSelectPastDate": "لا يمكنك اختيار تاريخ سابق. يرجى اختيار اليوم أو تاريخ مستقبلي.",
+    "checkRequiredFields": "يرجى التحقق من الحقول المطلوبة"
   },
   "checkout": {
     "title": "الدفع",
diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json
index dd670fb..2848704 100644
--- a/src/assets/locals/en.json
+++ b/src/assets/locals/en.json
@@ -261,7 +261,8 @@
     "couponNotApplicable": "Coupon not applicable",
     "am": "AM",
     "pm": "PM",
-    "cannotSelectPastDate": "You cannot select a past date. Please select today or a future date."
+    "cannotSelectPastDate": "You cannot select a past date. Please select today or a future date.",
+    "checkRequiredFields": "Please check required fields"
   },
   "checkout": {
     "title": "Checkout",
diff --git a/src/components/ArabicPrice/ArabicPrice.tsx b/src/components/ArabicPrice/ArabicPrice.tsx
index 3d549e9..c0d6cc3 100644
--- a/src/components/ArabicPrice/ArabicPrice.tsx
+++ b/src/components/ArabicPrice/ArabicPrice.tsx
@@ -20,8 +20,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
   hideCurrency = false,
 }) => {
   const { isRTL } = useAppSelector((state) => state.locale);
-  const {restaurant} = useAppSelector(state => state.order)
-
+  const { restaurant } = useAppSelector((state) => state.order);
 
   // Format the price to ensure it has 2 decimal places
   const formattedPrice = typeof price === "number" ? price.toFixed(2) : price;
@@ -38,7 +37,6 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
       style={{
         display: "inline-flex",
         alignItems: "baseline",
-        gap: "0.2em",
         lineHeight: 1,
         ...restStyle,
       }}
@@ -54,6 +52,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
           >
             {formattedPrice}
           </span>
+          <span style={{ margin: "0 2px" }} />
           <span
             style={{
               fontSize: "0.9em",
@@ -64,7 +63,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
               ...(decorationStyle ?? {}),
             }}
           >
-            {isRTL ? restaurant.local_currency : restaurant.global_currency}  
+            {isRTL ? restaurant.local_currency : restaurant.global_currency}
           </span>
         </>
       ) : !hideCurrency ? (
@@ -79,6 +78,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
           >
             {formattedPrice}
           </span>
+          <span style={{ margin: "0 2px" }} />
           <span
             style={{
               fontSize: "0.9em",
@@ -89,7 +89,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
             }}
           >
             {isRTL ? restaurant.local_currency : restaurant.global_currency}
-            </span>
+          </span>
         </>
       ) : (
         <span style={decorationStyle}>{formattedPrice}</span>
diff --git a/src/components/CustomBottomSheet/GiftBottomSheet.tsx b/src/components/CustomBottomSheet/GiftBottomSheet.tsx
index d0983da..b98edd3 100644
--- a/src/components/CustomBottomSheet/GiftBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/GiftBottomSheet.tsx
@@ -148,7 +148,7 @@ export function GiftBottomSheet({
 
       <br />
 
-      <Button type="primary" style={{ width: "100%" }} onClick={handleSave}>
+      <Button type="primary" style={{ width: "100%", boxShadow: "none" }} onClick={handleSave}>
         {t("address.save")}
       </Button>
     </ProBottomSheet>
diff --git a/src/components/CustomBottomSheet/InfoButtonSheet.tsx b/src/components/CustomBottomSheet/InfoButtonSheet.tsx
index 3582ba5..e39279e 100644
--- a/src/components/CustomBottomSheet/InfoButtonSheet.tsx
+++ b/src/components/CustomBottomSheet/InfoButtonSheet.tsx
@@ -50,7 +50,7 @@ export function InfoButtonSheet({
         <ProText type="secondary" style={{textAlign:"center"}}>{description}</ProText>
       </div>
       <br />
-      <Button type="primary" style={{ width: "100%" }} onClick={handleSave}>
+      <Button type="primary" style={{ width: "100%", boxShadow: "none" }} onClick={handleSave}>
         {t("address.gotIt")}
       </Button>
     </ProBottomSheet>
diff --git a/src/components/CustomBottomSheet/MapBottomSheet.tsx b/src/components/CustomBottomSheet/MapBottomSheet.tsx
index ac7e09a..59df802 100644
--- a/src/components/CustomBottomSheet/MapBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/MapBottomSheet.tsx
@@ -121,8 +121,9 @@ export function MapBottomSheet({
             {t("cart.cancel")}
           </Button>
           <Button
-            type="primary"
             className={styles.actionButton}
+            type="primary"
+            style={{ boxShadow: "none" }}
             onClick={handleSave}
             disabled={!selectedLocation}
           >
diff --git a/src/components/CustomBottomSheet/OfficeBottomSheet.tsx b/src/components/CustomBottomSheet/OfficeBottomSheet.tsx
index 1bbca4b..d164677 100644
--- a/src/components/CustomBottomSheet/OfficeBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/OfficeBottomSheet.tsx
@@ -112,10 +112,7 @@ export function OfficeBottomSheet({
             autoFocus={false}
           />
         </Form.Item>
-        <ProPhoneInput
-          propName="phone"
-          label={t("address.phone")}
-        />
+        <ProPhoneInput propName="phone" label={t("address.phone")} />
         <Form.Item name="note" label={t("address.note")}>
           <TextArea
             placeholder={t("address.addressLabel")}
@@ -132,7 +129,11 @@ export function OfficeBottomSheet({
 
       <br />
 
-      <Button type="primary" style={{ width: "100%" }} onClick={handleSave}>
+      <Button
+        type="primary"
+        style={{ width: "100%", boxShadow: "none" }}
+        onClick={handleSave}
+      >
         {t("address.save")}
       </Button>
     </ProBottomSheet>
diff --git a/src/components/CustomBottomSheet/RoomBottomSheet.tsx b/src/components/CustomBottomSheet/RoomBottomSheet.tsx
index 7ca0eae..5ae9c43 100644
--- a/src/components/CustomBottomSheet/RoomBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/RoomBottomSheet.tsx
@@ -82,7 +82,7 @@ export function RoomBottomSheet({
             style={{
               fontSize: 14,
               height: 50,
-              }}
+            }}
             autoFocus={false}
           />
         </Form.Item>
@@ -128,7 +128,11 @@ export function RoomBottomSheet({
 
       <br />
 
-      <Button type="primary" style={{ width: "100%" }} onClick={handleSave}>
+      <Button
+        type="primary"
+        style={{ width: "100%", boxShadow: "none" }}
+        onClick={handleSave}
+      >
         {t("address.save")}
       </Button>
     </ProBottomSheet>
diff --git a/src/components/Icons/InfoIcon.tsx b/src/components/Icons/InfoIcon.tsx
index a3b7260..7a0e65c 100644
--- a/src/components/Icons/InfoIcon.tsx
+++ b/src/components/Icons/InfoIcon.tsx
@@ -17,7 +17,7 @@ const InfoIcon = ({ className, onClick }: InfoIconType) => {
       <g clipPath="url(#clip0_2505_25450)">
         <path
           d="M9.99984 13.3337V10.0003M9.99984 6.66699H10.0082M18.3332 10.0003C18.3332 14.6027 14.6022 18.3337 9.99984 18.3337C5.39746 18.3337 1.6665 14.6027 1.6665 10.0003C1.6665 5.39795 5.39746 1.66699 9.99984 1.66699C14.6022 1.66699 18.3332 5.39795 18.3332 10.0003Z"
-          stroke="#5F6C7B"
+          stroke="var(--secondary-foreground)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
diff --git a/src/components/Icons/order/InvoiceIcon.tsx b/src/components/Icons/order/InvoiceIcon.tsx
index 919b9e5..b5e24cd 100644
--- a/src/components/Icons/order/InvoiceIcon.tsx
+++ b/src/components/Icons/order/InvoiceIcon.tsx
@@ -16,7 +16,7 @@ const InvoiceIcon = ({ className, onClick }: InvoiceIconType) => {
     >
       <path
         d="M7.83317 7.41504H3.83317M5.1665 10.0817H3.83317M9.1665 4.74837H3.83317M11.8332 4.61504V11.5484C11.8332 12.6685 11.8332 13.2285 11.6152 13.6564C11.4234 14.0327 11.1175 14.3386 10.7412 14.5304C10.3133 14.7484 9.75328 14.7484 8.63317 14.7484H4.3665C3.2464 14.7484 2.68635 14.7484 2.25852 14.5304C1.8822 14.3386 1.57624 14.0327 1.38449 13.6564C1.1665 13.2285 1.1665 12.6685 1.1665 11.5484V4.61504C1.1665 3.49493 1.1665 2.93488 1.38449 2.50706C1.57624 2.13073 1.8822 1.82477 2.25852 1.63303C2.68635 1.41504 3.2464 1.41504 4.3665 1.41504H8.63317C9.75328 1.41504 10.3133 1.41504 10.7412 1.63303C11.1175 1.82477 11.4234 2.13073 11.6152 2.50706C11.8332 2.93488 11.8332 3.49493 11.8332 4.61504Z"
-        stroke="#333333"
+        stroke="#666666"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
diff --git a/src/components/Icons/order/TimeIcon.tsx b/src/components/Icons/order/TimeIcon.tsx
index 4b2d374..a504110 100644
--- a/src/components/Icons/order/TimeIcon.tsx
+++ b/src/components/Icons/order/TimeIcon.tsx
@@ -17,7 +17,7 @@ const TimeIcon = ({ className, onClick }: TimeIconType) => {
       <g clipPath="url(#clip0_2448_7814)">
         <path
           d="M8.50016 4.08171V8.08171L11.1668 9.41504M15.1668 8.08171C15.1668 11.7636 12.1821 14.7484 8.50016 14.7484C4.81826 14.7484 1.8335 11.7636 1.8335 8.08171C1.8335 4.39981 4.81826 1.41504 8.50016 1.41504C12.1821 1.41504 15.1668 4.39981 15.1668 8.08171Z"
-          stroke="#333333"
+          stroke="#666666"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
diff --git a/src/components/InfoButton/InfoButton.module.css b/src/components/InfoButton/InfoButton.module.css
index 0a43774..b5ecdec 100644
--- a/src/components/InfoButton/InfoButton.module.css
+++ b/src/components/InfoButton/InfoButton.module.css
@@ -1,5 +1,3 @@
-
-
 .homeServiceCard {
   width: 100%;
   height: 48px;
@@ -9,7 +7,8 @@
   row-gap: 10px;
   transition: all 0.3s ease;
   border-radius: 50px;
-  background-color: #FFF;
+  background-color: #fff;
+  cursor: pointer;
 }
 
 .homeServiceCard :global(.ant-card-body) {
@@ -26,8 +25,6 @@
   transition: all 0.3s ease;
 }
 
-
-
 @media (min-width: 769px) and (max-width: 1024px) {
   .languageSwitch,
   .themeSwitch,
@@ -109,6 +106,12 @@
   color: #ffffff;
 }
 
+:global(.darkApp) .homeServiceCard {
+  cursor: pointer;
+  background-color: #0a0a0a;
+  color: #ffffff;
+}
+
 :global(.darkApp) .homeContainer h1,
 :global(.darkApp) .homeContainer h2,
 :global(.darkApp) .homeContainer h3,
@@ -196,6 +199,5 @@
   width: 24px;
   height: 24px;
   position: relative;
-  top: -2px
+  top: -2px;
 }
-
diff --git a/src/components/InfoButton/InfoButton.tsx b/src/components/InfoButton/InfoButton.tsx
index 61936a0..5b9964a 100644
--- a/src/components/InfoButton/InfoButton.tsx
+++ b/src/components/InfoButton/InfoButton.tsx
@@ -32,7 +32,6 @@ export const InfoButton = ({
             style={{
               marginTop: -2,
               fontSize: "1rem",
-              color: "rgba(95, 108, 123, 1)",
             }}
           >
             {title}
diff --git a/src/components/OtpInput/OtpInput.tsx b/src/components/OtpInput/OtpInput.tsx
index 21b4958..9ef85db 100644
--- a/src/components/OtpInput/OtpInput.tsx
+++ b/src/components/OtpInput/OtpInput.tsx
@@ -151,6 +151,7 @@ const OtpInput = ({
           display: "grid",
           gridTemplateColumns: "repeat(7, 1fr)",
           gap: 16,
+          direction: "ltr",
         }}
       >
         <div />
diff --git a/src/components/ProPhoneInput.tsx b/src/components/ProPhoneInput.tsx
index 7a306a7..2b0b4f2 100644
--- a/src/components/ProPhoneInput.tsx
+++ b/src/components/ProPhoneInput.tsx
@@ -2,7 +2,7 @@ import { Form } from "antd";
 import useFormInstance from "antd/es/form/hooks/useFormInstance";
 import { TitleProps } from "antd/es/typography/Title";
 import { PhoneNumberUtil } from "google-libphonenumber";
-import { FunctionComponent } from "react";
+import { FunctionComponent, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import PhoneInput from "react-phone-input-2";
 import { useAppSelector } from "redux/hooks";
@@ -22,7 +22,6 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
   const form = useFormInstance();
   const { t } = useTranslation();
   const { themeName } = useAppSelector((state) => state.theme);
-  const { isRTL } = useAppSelector((state) => state.locale);
 
   return (
     <Form.Item
@@ -46,6 +45,7 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
           },
         },
       ]}
+      style={{ direction: "ltr" }}
     >
       <PhoneInputWrapper
         onChange={(value) => {
@@ -54,7 +54,6 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
         }}
         phone={form.getFieldValue(propName)}
         themeName={themeName}
-        isRTL={isRTL}
         placeholder={t("login.mobileNumber")}
         propName={propName}
         label={label}
@@ -66,7 +65,6 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
 export const PhoneInputWrapper = ({
   phone,
   themeName,
-  isRTL,
   placeholder,
   value,
   onChange,
@@ -75,29 +73,34 @@ export const PhoneInputWrapper = ({
 }: {
   phone?: string;
   themeName: string;
-  isRTL: boolean;
   placeholder: string;
   value?: string;
   onChange?: (value: string) => void;
   propName?: string;
   label?: string;
 }) => {
+  const inputStyle = useMemo(
+    () => ({
+      borderRadius: 1000,
+      height: 50,
+      width: "100%",
+      color: themeName === "light" ? "#000" : "#FFF",
+      backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
+      textAlign: "left" as const,
+      direction: "ltr" as const,
+      paddingLeft: "50px",
+      paddingRight: "50px",
+      borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
+    }),
+    [themeName],
+  );
+
   return (
     <div className="pro-phone-input">
       <PhoneInput
+        key={themeName}
         country={"om"}
-        inputStyle={{
-          borderRadius: 1000,
-          height: 50,
-          width: "100%",
-          color: themeName === "light" ? "#000" : "#FFF",
-          backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
-          textAlign: isRTL ? "right" : "left",
-          direction: isRTL ? "rtl" : "ltr",
-          paddingLeft: "50px",
-          paddingRight: "50px",
-          borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
-        }}
+        inputStyle={inputStyle}
         placeholder={label || placeholder}
         value={value || phone}
         onChange={(value) => {
@@ -109,13 +112,7 @@ export const PhoneInputWrapper = ({
           borderLeft: "1px solid #363636",
           borderRadius: 0,
           position: "relative",
-          ...(isRTL && {
-            top: -25,
-            right: 25,
-          }),
-          ...(!isRTL && {
-            top: -25,
-          }),
+          top: -25,
         }}
         autocompleteSearch
         inputProps={{
diff --git a/src/index.css b/src/index.css
index 1d7a798..1444b48 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,7 +7,7 @@
 :root {
   --background: #f7f7f7;
   --foreground: #181818;
-  --border: #0505050f;
+  --border: #e5e7eb;
   --secondary-background: #ffffff;
   --secondary-foreground: #0a0a0a;
   --primary-dark: #0a0a0a;
@@ -314,9 +314,9 @@ label {
   margin-inline-end: 0px !important;
 }
 
-.ant-select-selection-wrap .ant-select-selection-placeholder {
+.ant-select-selection-wrap {
   position: relative;
-  margin-top: 4px;
+  margin-top: 3px;
 }
 
 .restaurant-description-skeleton .ant-skeleton-paragraph {
@@ -415,6 +415,11 @@ label {
   z-index: 999 !important;
 }
 
+.ant-select-selection-item {
+  height: 28px !important;
+  line-height: 26px !important;
+}
+
 /* Target selection item and arrow in the Select component (not the dropdown) */
 .order-type-select-container :where(.ant-select .ant-select-selection-item) {
   color: #fff !important;
diff --git a/src/layouts/app/HeaderMenuDrawer.tsx b/src/layouts/app/HeaderMenuDrawer.tsx
index c2ef8c5..5bdd877 100644
--- a/src/layouts/app/HeaderMenuDrawer.tsx
+++ b/src/layouts/app/HeaderMenuDrawer.tsx
@@ -69,7 +69,10 @@ export default function HeaderMenuDrawer() {
                 : lightColors.secondaryBgColor,
             [isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
             [isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
-            border: "1px solid #E9E9E9",
+            border:
+              themeName === "dark"
+                ? "1px solid var(--border)"
+                : "1px solid var(--border)",
           }}
         >
           <Button
diff --git a/src/pages/cart/components/TableNumberCard.tsx b/src/pages/cart/components/TableNumberCard.tsx
index 2f8456f..babfed3 100644
--- a/src/pages/cart/components/TableNumberCard.tsx
+++ b/src/pages/cart/components/TableNumberCard.tsx
@@ -57,8 +57,8 @@ export default function TableNumberCard() {
           style={{ position: "relative", top: -5 }}
         >
           <Select
-            value={tables}
-            mode="multiple"
+            value={tables[0]}
+            // mode="multiple"
             placeholder={
               orderType === OrderType.DineIn
                 ? t("cart.tableNumber")
@@ -76,7 +76,7 @@ export default function TableNumberCard() {
             }}
             onChange={(value) => {
               console.log(value);
-              dispatch(updateTables(value));
+              dispatch(updateTables([value as string]));
             }}
             onClear={() => {
               dispatch(removeTable());
diff --git a/src/pages/cart/components/cartFooter/CartFooter.tsx b/src/pages/cart/components/cartFooter/CartFooter.tsx
index ea5dc79..8f4fa8b 100644
--- a/src/pages/cart/components/cartFooter/CartFooter.tsx
+++ b/src/pages/cart/components/cartFooter/CartFooter.tsx
@@ -24,6 +24,7 @@ export default function CartFooter({ form }: CartFooterProps) {
         await form.validateFields();
         navigate(`/${subdomain}/checkout`);
       } catch (error) {
+        message.warning(t("cart.checkRequiredFields"));
         console.log("Form validation failed:", error);
       }
     }
diff --git a/src/pages/checkout/components/GiftDetails.tsx b/src/pages/checkout/components/GiftDetails.tsx
index efd79ca..1c49c9e 100644
--- a/src/pages/checkout/components/GiftDetails.tsx
+++ b/src/pages/checkout/components/GiftDetails.tsx
@@ -30,7 +30,6 @@ export const GiftDetails = () => {
     (giftDetailsData: GiftDetailsType) => {
       try {
         dispatch(updateGiftDetails(giftDetailsData));
-        console.log("Gift details saved to Redux store:", giftDetailsData);
       } catch (error) {
         console.error("Failed to parse location data:", error);
       }