dark theme fixes

src/assets/locals/ar.json

@@ -251,7 +251,8 @@
     "couponNotApplicable": "رمز القسيمة غير مطبق",
     "am": "ص",
     "pm": "م",
-    "cannotSelectPastDate": "لا يمكنك اختيار تاريخ سابق. يرجى اختيار اليوم أو تاريخ مستقبلي."
+    "cannotSelectPastDate": "لا يمكنك اختيار تاريخ سابق. يرجى اختيار اليوم أو تاريخ مستقبلي.",
+    "checkRequiredFields": "يرجى التحقق من الحقول المطلوبة"
   },
   "checkout": {
     "title": "الدفع",

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",

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",
@@ -79,6 +78,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
           >
             {formattedPrice}
           </span>
+          <span style={{ margin: "0 2px" }} />
           <span
             style={{
               fontSize: "0.9em",

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>

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>

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}
           >

src/components/CustomBottomSheet/OfficeBottomSheet.tsx

@@ -112,10 +112,7 @@ export function OfficeBottomSheet({
             autoFocus={false}
           />
         </Form.Item>
-        <ProPhoneInput
+        <ProPhoneInput propName="phone" label={t("address.phone")} />
-          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>

src/components/CustomBottomSheet/RoomBottomSheet.tsx

@@ -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>

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"

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"
       />

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"
         />

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;
 }
-

src/components/InfoButton/InfoButton.tsx

@@ -32,7 +32,6 @@ export const InfoButton = ({
             style={{
               marginTop: -2,
               fontSize: "1rem",
-              color: "rgba(95, 108, 123, 1)",
             }}
           >
             {title}

src/components/OtpInput/OtpInput.tsx

@@ -151,6 +151,7 @@ const OtpInput = ({
           display: "grid",
           gridTemplateColumns: "repeat(7, 1fr)",
           gap: 16,
+          direction: "ltr",
         }}
       >
         <div />

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;
 }) => {
-  return (
+  const inputStyle = useMemo(
-    <div className="pro-phone-input">
+    () => ({
-      <PhoneInput
-        country={"om"}
-        inputStyle={{
       borderRadius: 1000,
       height: 50,
       width: "100%",
       color: themeName === "light" ? "#000" : "#FFF",
       backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
-          textAlign: isRTL ? "right" : "left",
+      textAlign: "left" as const,
-          direction: isRTL ? "rtl" : "ltr",
+      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={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,
-          }),
         }}
         autocompleteSearch
         inputProps={{

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;

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

src/pages/cart/components/TableNumberCard.tsx

@@ -57,8 +57,8 @@ export default function TableNumberCard() {
           style={{ position: "relative", top: -5 }}
         >
           <Select
-            value={tables}
+            value={tables[0]}
-            mode="multiple"
+            // 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());

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);
       }
     }

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);
       }