remove unnecessary code & enhance gray color over the app

src/ThemeConstants.ts

@@ -7,10 +7,7 @@ export const colors = {
   darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
 };
 
-export const ProGray1 = "#f7f9fa";
+export const ProGray1 = "#8a8a8a";
-export const ProGray2 = "#F1F1F1";
-export const ProGray3 = "#edf0f2"; // for modal header background
-export const ProGray4 = "#DCDCDC"; // lines color
 export const ProGreen = "#03B100";
 export const ProGreen2 = "#52c41a";
 export const ProDraft = "#f36c00";
@@ -21,7 +18,7 @@ export const errorColorDark = "#d9363e";
 export const DisabledColor = "#424242";
 
 
-export const COLOR = {
+export const WHITE_COLOR = {
   50: "#e0f1ff",
   100: "#b0d2ff",
   200: "#7fb0ff",
@@ -150,7 +147,7 @@ export const themeConfig: ThemeConfig = {
     borderRadius: 8,
     // Futuristic button styles
     controlHeight: 40,
-    colorTextLabel: COLOR.blackColor,
+    colorTextLabel: WHITE_COLOR.blackColor,
     colorBgLayout: componentBackground,
   },
   components: {
@@ -159,9 +156,9 @@ export const themeConfig: ThemeConfig = {
       itemColor: "rgba(0,0,0,.8)",
     },
     Button: {
-      colorLink: COLOR["600"],
+      colorLink: WHITE_COLOR["600"],
-      colorLinkActive: COLOR["700"],
+      colorLinkActive: WHITE_COLOR["700"],
-      colorLinkHover: COLOR["300"],
+      colorLinkHover: WHITE_COLOR["300"],
       borderRadius: 1000,
       borderRadiusLG: 1000,
       // defaultShadow: "none",
@@ -170,8 +167,8 @@ export const themeConfig: ThemeConfig = {
       colorBgContainer: "none",
     },
     Card: {
-      colorBgContainer: COLOR.cardBg,
+      colorBgContainer: WHITE_COLOR.cardBg,
-      colorBorderSecondary: COLOR["borderColor"],
+      colorBorderSecondary: WHITE_COLOR["borderColor"],
       boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
       padding: 16,
       paddingLG: 16,
@@ -179,54 +176,54 @@ export const themeConfig: ThemeConfig = {
       borderRadiusLG: 24,
     },
     Carousel: {
-      colorBgContainer: COLOR["800"],
+      colorBgContainer: WHITE_COLOR["800"],
       dotWidth: 8,
     },
     Rate: {
-      colorFillContent: COLOR["100"],
+      colorFillContent: WHITE_COLOR["100"],
-      colorText: COLOR["600"],
+      colorText: WHITE_COLOR["600"],
     },
     Segmented: {
-      colorBgLayout: COLOR["100"],
+      colorBgLayout: WHITE_COLOR["100"],
       borderRadius: 6,
       colorTextLabel: "#000000",
     },
     Table: {
-      borderColor: COLOR["100"],
+      borderColor: WHITE_COLOR["100"],
-      headerBg: COLOR.primaryColor,
+      headerBg: WHITE_COLOR.primaryColor,
-      headerColor: COLOR.whiteColor,
+      headerColor: WHITE_COLOR.whiteColor,
-      rowSelectedBg: COLOR.primaryColor,
+      rowSelectedBg: WHITE_COLOR.primaryColor,
       cellPaddingBlock: 8,
-      colorBgContainer: COLOR.tableBg,
+      colorBgContainer: WHITE_COLOR.tableBg,
-      colorFillAlter: COLOR.hoverBg,
+      colorFillAlter: WHITE_COLOR.hoverBg,
     },
     Tabs: {
-      colorBorderSecondary: COLOR["100"],
+      colorBorderSecondary: WHITE_COLOR["100"],
     },
     Timeline: {
       dotBg: "none",
     },
     Typography: {
-      colorLink: COLOR["600"],
+      colorLink: WHITE_COLOR["600"],
-      colorLinkActive: COLOR["700"],
+      colorLinkActive: WHITE_COLOR["700"],
-      colorLinkHover: COLOR["300"],
+      colorLinkHover: WHITE_COLOR["300"],
       linkHoverDecoration: "underline",
     },
     Drawer: {
       wireframe: true,
-      colorSplit: ProGray4,
+      colorSplit: ProGray1,
       lineWidth: 3,
       controlHeightLG: 30,
     },
     Menu: {
-      colorItemBg: COLOR.sidebarBg,
+      colorItemBg: WHITE_COLOR.sidebarBg,
-      colorItemText: COLOR["800"],
+      colorItemText: WHITE_COLOR["800"],
-      colorItemTextSelected: COLOR.primaryColor2,
+      colorItemTextSelected: WHITE_COLOR.primaryColor2,
-      colorItemBgSelected: COLOR.activeBg,
+      colorItemBgSelected: WHITE_COLOR.activeBg,
-      colorItemBgHover: COLOR.hoverBg,
+      colorItemBgHover: WHITE_COLOR.hoverBg,
     },
     Layout: {
-      headerBg: COLOR.headerBg,
+      headerBg: WHITE_COLOR.headerBg,
       bodyBg: componentBackground,
     },
     Input: {

src/assets/locals/ar.json

@@ -236,7 +236,9 @@
     "placeOrder": "وضع الطلب",
     "remainingAmount": "المبلغ المتبقي",
     "totalAmount": "المبلغ الكلي",
-    "items": "العناصر"
+    "items": "العناصر",
+    "expiresIn": "تنتهي في",
+    "expiresInDescription": "تنتهي في:12/26"
   },
   "address": {
     "title": "العنوان",

src/assets/locals/en.json

@@ -246,7 +246,9 @@
     "placeOrder": "Place Order",
     "remainingAmount": "Remaining Amount",
     "totalAmount": "Total Amount",
-    "items": "Items"
+    "items": "Items",
+    "expiresIn": "Expires in",
+    "expiresInDescription": "Expires in:12/26"
   },
   "address": {
     "title": "Address",

src/components/Icons/BackIcon.tsx

@@ -1,9 +1,14 @@
+import { useAppSelector } from "redux/hooks";
+import { ProGray1 } from "ThemeConstants";
+
 interface BackIconType {
   className?: string;
   onClick?: () => void;
 }
 
 const BackIcon = ({ className, onClick }: BackIconType) => {
+  const { themeName } = useAppSelector((state) => state.theme);
+  const color = themeName === "dark" ? "white" : ProGray1;
   return (
     <svg
       width="16"
@@ -16,7 +21,7 @@ const BackIcon = ({ className, onClick }: BackIconType) => {
     >
       <path
         d="M10 12L6 8L10 4"
-        stroke={"rgba(95, 108, 123, 1)"}
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

src/components/Icons/NextIcon.tsx

@@ -1,9 +1,14 @@
+import { useAppSelector } from "redux/hooks";
+import { ProGray1 } from "ThemeConstants";
+
 interface NextIconType {
   className?: string;
   onClick?: () => void;
 }
 
 const NextIcon = ({ className, onClick }: NextIconType) => {
+  const { themeName } = useAppSelector((state) => state.theme);
+  const color = themeName === "dark" ? "white" : ProGray1;
   return (
     <svg
       width="16"
@@ -16,7 +21,7 @@ const NextIcon = ({ className, onClick }: NextIconType) => {
     >
       <path
         d="M6 12L10 8L6 4"
-        stroke="#434E5C"
+        stroke={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

src/components/PaymentMethods/PaymentMethods.tsx

@@ -4,8 +4,7 @@ import ArabicPrice from "components/ArabicPrice";
 import DifferentCardIcon from "components/Icons/paymentMethods/DifferentCardIcon";
 import ProText from "components/ProText";
 import { useTranslation } from "react-i18next";
-import { useAppSelector } from "redux/hooks";
+import { colors, ProGray1 } from "../../ThemeConstants";
-import { colors } from "../../ThemeConstants";
 import ProInputCard from "../ProInputCard/ProInputCard";
 import styles from "./PaymentMethods.module.css";
 
@@ -13,12 +12,8 @@ interface PaymentMethodsProps {
   onPaymentSelect?: () => void;
 }
 
-const PaymentMethods = ({
+const PaymentMethods = ({ onPaymentSelect, ...props }: PaymentMethodsProps) => {
-  onPaymentSelect,
-  ...props
-}: PaymentMethodsProps) => {
   const { t } = useTranslation();
-  const { isRTL } = useAppSelector((state) => state.locale);
 
   const options: {
     label: string;
@@ -30,7 +25,7 @@ const PaymentMethods = ({
     {
       label: t("checkout.creditDebitCard"),
       value: "creditDebitCard",
-      price: "Expires in:12/26",
+      price: t("checkout.expiresIn") + ":12/26",
     },
 
     {
@@ -90,19 +85,21 @@ const PaymentMethods = ({
                   <ProText
                     style={{
                       fontSize: "0.85rem",
-                      color: "rgba(95, 108, 123, 1)",
+                      color: ProGray1,
                     }}
                   >
                     {option.label}
                   </ProText>
                   {!option.icon ? (
                     <ArabicPrice
-                      price={option.price}
+                      price={option.price || 0}
                       style={{
-                        fontSize: "0.85rem",
+                        fontSize: "0.75rem",
-                        color: "rgba(95, 108, 123, 1)",
+                        color: ProGray1,
                         fontWeight: 400,
                         ...option?.style,
+                        position: "relative",
+                        top: 4,
                       }}
                     />
                   ) : (
@@ -110,9 +107,6 @@ const PaymentMethods = ({
                   )}
                 </div>
               </Radio>
-              {/* {index !== options.length - 1 && (
-              <Divider style={{ margin: 0 }} />
-            )} */}
             </div>
           ))}
         </Space>

src/components/privateRoute/PrivateRoute.tsx

@@ -32,6 +32,9 @@ export const PrivateRoute = ({
   //   ? !!newPermissions.find((p) => p.name === permission)
   //   : true;
 
+  console.log(token);
+  
+
   if (!token) {
     return <Navigate to={`/${id}/login`} />;
   }

src/layouts/app/HeaderMenuDrawer.tsx

@@ -5,6 +5,7 @@ import NextIcon from "components/Icons/NextIcon";
 import ProText from "components/ProText";
 import { useState } from "react";
 import { useAppSelector } from "redux/hooks";
+import { componentBackground, darkComponentBackground } from "ThemeConstants";
 import useHeaderMenu from "./hooks/useHeaderMenu";
 
 const {useBreakpoint} = Grid;
@@ -31,7 +32,6 @@ export default function HeaderMenuDrawer() {
   });
 
   const actionButtonStyle: React.CSSProperties = {
-    color: themeName === "dark" ? "white" : "#1f2937",
     height: 32, // isMobile ? 44 : 40,
     minWidth: 32, //isMobile ? 44 : "auto",
     width: 32, //isMobile ? 44 : "auto",
@@ -40,6 +40,7 @@ export default function HeaderMenuDrawer() {
     alignItems: "center",
     justifyContent: "center",
     gap: isMobile ? 0 : 8,
+    backgroundColor: "none",
   };
 
   return (
@@ -52,7 +53,7 @@ export default function HeaderMenuDrawer() {
           zIndex: 999,
           [isRTL ? "left" : "right"]: 0,
           top: "30%",
-          backgroundColor: themeName === "dark" ? "#111827" : "#FFF",
+          backgroundColor: themeName === "dark" ? darkComponentBackground : componentBackground,
           [isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
           [isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
           border:

src/layouts/app/SideNav.tsx

@@ -1,68 +0,0 @@
-import { LoginOutlined } from "@ant-design/icons";
-import { ConfigProvider, Layout, Menu, SiderProps } from "antd";
-import { useEffect, useRef, useState } from "react";
-import { useLocation } from "react-router-dom";
-import { COLOR } from "ThemeConstants";
-import useSidebarItems from "./useSidebarItems";
-
-const { Sider } = Layout;
-type SideNavProps = SiderProps;
-
-const SideNav = ({ ...others }: SideNavProps) => {
-  const nodeRef = useRef(null);
-  const { pathname } = useLocation();
-  const [current, setCurrent] = useState("");
-
-  useEffect(() => {
-    const paths = pathname.split("/");
-    setCurrent(paths[paths.length - 1]);
-  }, [pathname]);
-
-  const items = useSidebarItems();
-
-  return (
-    <Sider
-      ref={nodeRef}
-      collapsedWidth={105}
-      breakpoint="lg"
-      trigger={null}
-      collapsed={true}
-      {...others}
-      style={{ background: "#FFF", overflow: "hidden" }}
-      className="side-container"
-    >
-      <LoginOutlined
-        color="blue"
-        // asLink
-        // href={PATHS.menu}
-        // justify="center"
-        // gap="small"
-        // imgSize={{ h: 105, w: 105 }}
-        // style={{ padding: "1rem 0" }}
-        // src="/sidebar-logo.jpg"
-      />
-      <ConfigProvider
-        theme={{
-          components: {
-            Menu: {
-              itemBg: "none",
-              itemSelectedBg: COLOR["100"],
-              itemHoverBg: COLOR["50"],
-              itemSelectedColor: COLOR["600"],
-            },
-          },
-        }}
-      >
-        <Menu
-          mode="inline"
-          items={items}
-          selectedKeys={[current]}
-          style={{ border: "none" }}
-          className="sidebar-menu-container"
-        />
-      </ConfigProvider>
-    </Sider>
-  );
-};
-
-export default SideNav;

src/pages/authentication/SignIn.tsx

@@ -1,190 +0,0 @@
-import {
-    Button,
-    Checkbox,
-    Col,
-    Flex,
-    Form,
-    Grid,
-    Input,
-    message,
-    Row,
-    Typography,
-} from "antd";
-import { useNavigate } from "react-router-dom";
-
-import { LogoutOutlined } from "@ant-design/icons";
-import BackIcon from "components/Icons/BackIcon";
-import NextIcon from "components/Icons/NextIcon";
-import { loginSuccess } from "features/auth/authSlice";
-import { useTranslation } from "react-i18next";
-import { useCreateLoginMutation } from "redux/api/auth";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
-import { PATH_AUTH, PATHS } from "utils/constants";
-import { ResponseType } from "utils/types/appTypes";
-import "./styles.css";
-
-const { Title, Text, Link } = Typography;
-
-type FieldType = {
-  username?: string;
-  password?: string;
-  remember?: boolean;
-};
-const { useBreakpoint } = Grid;
-
-export const SignInPage = () => {
-  const { t } = useTranslation("login");
-  const dispatch = useAppDispatch();
-  const navigate = useNavigate();
-  const { xs } = useBreakpoint();
-  const [createLogin, { isLoading }] = useCreateLoginMutation({
-    fixedCacheKey: "shared-update-post",
-  });
-
-  const onFinish = async (values: any) => {
-    createLogin({ password: values.password, username: values.username })
-      .unwrap()
-      .then((response: any) => {
-        dispatch(loginSuccess(response));
-        message.open({
-          type: "success",
-          content: t("msg-login-success"),
-        });
-        navigate(PATHS.menu);
-      })
-      .catch((response: ResponseType) => {
-        message.open({
-          type: "error",
-          content: response.data.message,
-        });
-      });
-  };
-  const { locale } = useAppSelector((state) => state.locale);
-
-  return (
-    <Row style={{ minHeight: "100vh", overflow: "hidden" }}>
-      {!xs && (
-        <>
-          <Col xs={24} lg={13}>
-            <Flex
-              vertical
-              align="center"
-              justify="center"
-              className="text-center"
-              style={{
-                backgroundImage: "linear-gradient(#01304A, #005488)",
-                height: "100%",
-                padding: "1rem",
-                zIndex: 4,
-              }}
-            >
-              {locale === "en" ? (
-                <NextIcon className="ltr-signin-ellipse" />
-              ) : (
-                <BackIcon className="rtl-signin-ellipse" />
-              )}
-            </Flex>
-          </Col>
-        </>
-      )}
-      <Col xs={24} lg={11}>
-        <Flex
-          vertical
-          align={xs ? "center" : "center"}
-          justify="center"
-          gap="middle"
-          style={{ height: xs ? "90%" : "100%", padding: "2rem" }}
-        >
-          {!xs && (
-            <LogoutOutlined
-              color="white"
-              style={{ position: "absolute", top: 20, left: 20 }}
-            />
-          )}
-          {xs && <LogoutOutlined color="white" />}{" "}
-          <Title className="m-0">{t("login")}</Title>
-          <Flex gap={4}>
-            {/* // أهلا بعودتك ! من فضلك قم بتسجيل الدخول لحسابك */}
-            <Text>{t("msg-welcome")}</Text>
-          </Flex>
-          <Form
-            name="sign-up-form"
-            layout="vertical"
-            labelCol={{ span: 24 }}
-            wrapperCol={{ span: 24 }}
-            initialValues={{
-              username: "admin",
-              password: "123",
-              remember: true,
-            }}
-            onFinish={onFinish}
-            autoComplete="off"
-            requiredMark={false}
-          >
-            <Row gutter={[8, 0]}>
-              <Col xs={24}>
-                <Form.Item<FieldType>
-                  label={t("user name")}
-                  name="username"
-                  rules={[
-                    {
-                      required: true,
-                      message: t("msg-add-var-err", { var: t("user name") }),
-                    },
-                  ]}
-                >
-                  <Input />
-                </Form.Item>
-              </Col>
-              <Col xs={24}>
-                <Form.Item<FieldType>
-                  label={t("password")}
-                  name="password"
-                  rules={[
-                    {
-                      required: true,
-                      message: t("msg-add-var-err", { var: t("password") }),
-                    },
-                  ]}
-                >
-                  <Input.Password />
-                </Form.Item>
-              </Col>
-              <Col xs={24}>
-                <Form.Item<FieldType> name="remember" valuePropName="checked">
-                  <Checkbox>{t("remember me")}</Checkbox>
-                </Form.Item>
-              </Col>
-            </Row>
-            <Form.Item>
-              <Flex align="center" justify="space-between">
-                <Button
-                  type="primary"
-                  htmlType="submit"
-                  size="middle"
-                  loading={isLoading}
-                >
-                  {t("login")}
-                </Button>
-                <Link href={PATH_AUTH.passwordReset}>
-                  {t("forget password")}?
-                </Link>
-              </Flex>
-            </Form.Item>
-          </Form>
-          <Title
-            style={{
-              position: "absolute",
-              bottom: 20,
-              left: 20,
-              color: "#8A8A8C",
-              fontSize: 20,
-            }}
-          >
-            {t("app version")} : 2.0.0
-          </Title>
-        </Flex>
-      </Col>
-    </Row>
-  );
-};

src/pages/authentication/Welcome.tsx

@@ -1,24 +0,0 @@
-import { Flex, Typography } from 'antd';
-
-export const WelcomePage = () => {
-  return (
-    <Flex
-      vertical
-      gap="large"
-      align="center"
-      justify="center"
-      style={{ height: '80vh' }}
-    >
-      <Typography.Title className="m-0">Welcome to Antd</Typography.Title>
-      <Typography.Text style={{ fontSize: 18 }}>
-        A dynamic and versatile multipurpose dashboard utilizing Ant Design,
-        React, TypeScript, and Vite.
-      </Typography.Text>
-      {/* <Link to={PATH_DASHBOARD.default}>
-        <Button type="primary" size="middle">
-          Go to Homepage
-        </Button>
-      </Link> */}
-    </Flex>
-  );
-};

src/pages/authentication/index.ts

@@ -1,3 +0,0 @@
-export { SignInPage } from "./SignIn.tsx";
-export { WelcomePage } from "./Welcome.tsx";
-

src/pages/authentication/styles.css

@@ -1,9 +0,0 @@
-.ltr-signin-ellipse {
-  position: absolute;
-  left: 0px;
-}
-
-.rtl-signin-ellipse {
-  position: absolute;
-  right: 0px;
-}

src/pages/login/page.tsx

@@ -12,7 +12,7 @@ import "react-phone-input-2/lib/style.css";
 import { useNavigate, useParams } from "react-router-dom";
 import { useSendOtpMutation } from "redux/api/auth";
 import { useAppSelector } from "redux/hooks";
-import { colors, DisabledColor, ProBlack1 } from "ThemeConstants";
+import { colors, DisabledColor, ProBlack1, ProGray1 } from "ThemeConstants";
 import styles from "./login.module.css";
 
 export default function LoginPage() {
@@ -69,7 +69,7 @@ export default function LoginPage() {
       </div>
 
       <ProTitle level={5}>{t("login.EnterYourNumber")} 👋</ProTitle>
-      <ProText style={{ fontSize: 12, color: "#3E3E3E" }}>
+      <ProText style={{ fontSize: 12, color: ProGray1 }}>
         {t("login.WeWillSendYouAWhatsAppMessageWithAOneTimeVerificationCode")}
       </ProText>
 
@@ -183,6 +183,7 @@ export default function LoginPage() {
               height: 50,
               border: "none",
               marginTop: "2rem",
+              boxShadow: "none",
             }}
             disabled={phone.length <= 3 || isLoading}
             htmlType="submit"

src/pages/otp/page.tsx

@@ -7,6 +7,8 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useConfirmOtpMutation, useSendOtpMutation } from "redux/api/auth";
+import { ProGray1 } from "ThemeConstants";
+import { ACCESS_TOKEN } from "utils/constants";
 
 export default function OtpPage() {
   const { id } = useParams();
@@ -41,11 +43,11 @@ export default function OtpPage() {
 
         <div>
           <ProTitle level={4}>{t("otp.verification")}</ProTitle>
-          <ProText style={{ color: "#3E3E3E" }}>
+          <ProText style={{ color: ProGray1 }}>
             {t("otp.enterThe4DigitCodeThatSentToYourPhoneNumber")}
           </ProText>
           <br />
-          <ProText style={{ color: "#3E3E3E" }}>
+          <ProText style={{ color: ProGray1 }}>
             {localStorage.getItem("otp")}
           </ProText>
         </div>
@@ -83,7 +85,7 @@ export default function OtpPage() {
                   "customer",
                   JSON.stringify(response.result.customer),
                 );
-                localStorage.setItem("token", response.result.access_token);
+                localStorage.setItem(ACCESS_TOKEN, response.result.access_token);
                 message.info(t("otp.confirmOTPSuccess"));
                 navigate(`/${id}/menu`);
               });

src/pages/restaurant/page.tsx

@@ -18,8 +18,6 @@ import LocalStorageHandler from "../menu/components/LocalStorageHandler";
 
 export default function RestaurantPage() {
   const param = useParams();
-  console.log(param);
-
   const { isRTL } = useAppSelector((state) => state.locale);
   const { data, isLoading } = useGetRestaurantDetailsQuery(param.id, {
     skip: !param.id,
@@ -40,8 +38,6 @@ export default function RestaurantPage() {
     localStorage.setItem("restaurantName", restaurant.subdomain);
   }
 
-  console.log(isRTL);
-
   return (
     <>
       <div className={styles.languageSwitch}>

src/pages/restaurant/restaurant.module.css

@@ -13,12 +13,6 @@
   overflow: hidden;
 }
 
-@media (max-width: 768px) {
-  .section {
-    padding: 60px 16px;
-  }
-}
-
 .homeContainer {
   text-align: center;
   padding: 0;
@@ -56,6 +50,7 @@
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, 0.6);
   transition: all 0.3s ease;
+  margin-bottom: 10px;
 }
 
 .logo:hover {
@@ -78,8 +73,6 @@
   width: 100%;
 }
 
-/* Removed duplicate rule */
-
 /* Smooth transitions for all interactive elements */
 .homeContainer *,
 .homeServiceCard * {
@@ -119,17 +112,60 @@
   transform: scale(1.1);
 }
 
-/* Mobiles Styles (769px - 1024px) */
+/* ===========================================
+   MOBILE MEDIA QUERIES (≤ 768px)
+   =========================================== */
+
+/* Mobile - Small screens */
+@media (max-width: 480px) {
+  .homeContainer {
+    height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+/* Mobile - General */
+@media (max-width: 768px) {
+  .section {
+    padding: 60px 16px;
+  }
+}
+
+/* Mobile - Portrait orientation */
+@media (max-width: 768px) and (orientation: portrait) {
+  .homeContainer {
+    height: 100vh;
+    min-height: 100vh;
+    background-attachment: scroll;
+  }
+}
+
+/* Mobile - Landscape orientation */
+@media (max-height: 500px) and (orientation: landscape) {
+  .homeContainer {
+    height: 100vh;
+    min-height: 100vh;
+    background-attachment: scroll;
+  }
+}
+
+/* Mobile - Services grid */
 @media (max-width: 769px) {
-  /* Enhanced grid layout for services on tablet */
   .servicesGrid {
     display: grid;
     gap: 10px;
     padding: 0 1rem;
+    margin: 10px 0;
   }
 }
 
-/* Tablet Styles (769px - 1024px) */
+/* ===========================================
+   TABLET MEDIA QUERIES (769px - 1024px)
+   =========================================== */
+
 @media (min-width: 769px) and (max-width: 1024px) {
   .languageSwitch,
   .themeSwitch,
@@ -164,6 +200,7 @@
     display: block;
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 24px;
   }
 
   .logo:hover {
@@ -274,23 +311,9 @@
   }
 }
 
-/* Mobile landscape orientation */
+/* ===========================================
-@media (max-height: 500px) and (orientation: landscape) {
+   DESKTOP MEDIA QUERIES (≥ 1025px)
-  .homeContainer {
+   =========================================== */
-    height: 100vh;
-    min-height: 100vh;
-    background-attachment: scroll;
-  }
-}
-
-/* Mobile portrait orientation */
-@media (max-width: 768px) and (orientation: portrait) {
-  .homeContainer {
-    height: 100vh;
-    min-height: 100vh;
-    background-attachment: scroll;
-  }
-}
 
 /* Large screens */
 @media (min-width: 1200px) {
@@ -299,18 +322,7 @@
   }
 }
 
-/* Ensure full coverage on all devices */
+/* Desktop */
-@media (max-width: 480px) {
-  .homeContainer {
-    height: 100vh;
-    min-height: 100vh;
-    width: 100vw;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-/* Desktop Styles (1025px+) */
 @media (min-width: 1025px) {
   .languageSwitch,
   .themeSwitch,
@@ -505,7 +517,7 @@
   }
 }
 
-/* Large Desktop Styles (1440px+) */
+/* Large Desktop */
 @media (min-width: 1440px) {
   .homeContainer {
     padding: 6vh 10vw;
@@ -607,209 +619,7 @@
   }
 }
 
-/* Enhanced Dark Theme Styles */
+/* Ultra-wide Desktop */
-:global(.darkApp) .homeContainer {
-  background-image: url("/background-dark.svg");
-  background-color: #0a0a0a;
-  color: #ffffff;
-}
-
-/* Dark theme for tablet and desktop */
-@media (min-width: 769px) {
-  :global(.darkApp) .homeServiceCard {
-    background: linear-gradient(
-      135deg,
-      rgba(255, 183, 0, 0.08) 0%,
-      rgba(255, 183, 0, 0.04) 100%
-    ) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
-  }
-
-  :global(.darkApp) .homeServiceCard:hover {
-    background: linear-gradient(
-      135deg,
-      rgba(255, 183, 0, 0.15) 0%,
-      rgba(255, 183, 0, 0.08) 100%
-    ) !important;
-    border-color: rgba(255, 183, 0, 0.4);
-    transform: translateY(-6px);
-    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
-  }
-
-  :global(.darkApp) .homeServiceCard::before {
-    background: linear-gradient(
-      135deg,
-      rgba(255, 183, 0, 0.08) 0%,
-      transparent 100%
-    );
-  }
-
-  :global(.darkApp) .logo {
-    box-shadow: 0 16px 48px rgba(255, 183, 0, 0.25);
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  :global(.darkApp) .logo:hover {
-    box-shadow: 0 20px 60px rgba(255, 183, 0, 0.35);
-    border-color: rgba(255, 183, 0, 0.4);
-  }
-
-  :global(.darkApp) .logo::before {
-    background: linear-gradient(
-      135deg,
-      rgba(255, 183, 0, 0.2),
-      rgba(255, 183, 0, 0.05)
-    );
-  }
-
-  /* Enhanced dark theme typography */
-  :global(.darkApp) .homeContainer h5 {
-    color: #ffffff !important;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  }
-
-  :global(.darkApp) .homeContainer p {
-    color: #e0e0e0 !important;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  }
-}
-
-:global(.darkApp) .homeContainer h1,
-:global(.darkApp) .homeContainer h2,
-:global(.darkApp) .homeContainer h3,
-:global(.darkApp) .homeContainer h4,
-:global(.darkApp) .homeContainer h5,
-:global(.darkApp) .homeContainer h6 {
-  color: #ffffff;
-}
-
-:global(.darkApp) .homeContainer p,
-:global(.darkApp) .homeContainer span {
-  color: #b0b0b0;
-}
-
-:global(.darkApp) .homeServiceCard {
-  background-color: rgba(255, 183, 0, 0.12) !important;
-  border-color: #363636 !important;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
-}
-
-:global(.darkApp) .homeServiceCard:hover {
-  background-color: #363636 !important;
-  border-color: #424242 !important;
-  transform: translateY(-2px);
-  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.5);
-}
-
-:global(.darkApp) .socialIcon path {
-  fill: none !important;
-  stroke: #fff !important;
-  transition: all 0.3s ease;
-}
-
-:global(.darkApp) .socialIcon:hover path {
-  stroke: #fff !important;
-  filter: drop-shadow(0 0 8px #fff);
-}
-
-:global(.darkApp) .serviceIcon > path {
-  fill: none !important;
-  stroke: #fff !important;
-  transition: all 0.3s ease;
-}
-
-:global(.darkApp) .serviceIcon g path {
-  fill: none !important;
-  stroke: #fff !important;
-  transition: all 0.3s ease;
-}
-
-:global(.darkApp) .serviceIcon:hover > path,
-:global(.darkApp) .serviceIcon:hover g path {
-  stroke: #fff !important;
-  filter: drop-shadow(0 0 6px #fff);
-}
-
-/* Additional dark theme enhancements */
-:global(.darkApp) .homeContainer::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(0, 0, 0, 0.3) 0%,
-    rgba(0, 0, 0, 0.1) 100%
-  );
-  pointer-events: none;
-  z-index: 1;
-}
-
-/* :global(.darkApp) .homeContainer > * {
-  position: relative;
-  z-index: 2;
-} */
-
-/* Glass morphism effect for cards in dark mode */
-:global(.darkApp) .homeServiceCard {
-  backdrop-filter: blur(12px);
-  border-radius: 50px;
-}
-
-/* Enhanced text readability in dark mode */
-:global(.darkApp) .item-description {
-  color: #b0b0b0 !important;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-:global(.darkApp) .ant-typography {
-  color: #ffffff !important;
-}
-
-:global(.darkApp) .ant-typography.ant-typography-secondary {
-  color: #b0b0b0 !important;
-}
-
-:global(.darkApp) .deliveryIcon path,
-:global(.darkApp) .deliveryIcon circle {
-  fill: #fff !important;
-  stroke: #fff !important;
-  transition: all 0.3s ease;
-}
-
-.serviceIcon {
-  width: 24px;
-  height: 24px;
-}
-
-.dineInIcon {
-  margin-top: -1px;
-}
-
-.pickupIcon {
-  margin-top: -2px;
-}
-
-.roomIcon {
-  margin-top: -2px;
-}
-
-.officeIcon {
-  margin-top: -1px;
-}
-
-.bookingIcon {
-  margin-top: -1px;
-}
-
-.deliveryIcon {
-  margin-top: -1px;
-}
-
-/* Ultra-wide Desktop Styles (1920px+) */
 @media (min-width: 1920px) {
   .homeContainer {
     padding: 8vh 12vw;
@@ -909,7 +719,11 @@
   }
 }
 
-/* Enhanced responsive behavior for very tall screens */
+/* ===========================================
+   HEIGHT-BASED MEDIA QUERIES
+   =========================================== */
+
+/* Very tall screens */
 @media (min-height: 1000px) {
   .homeContainer {
     justify-content: center;
@@ -917,7 +731,7 @@
   }
 }
 
-/* Enhanced responsive behavior for very short screens */
+/* Very short screens */
 @media (max-height: 600px) {
   .homeContainer {
     gap: 20px;
@@ -941,6 +755,10 @@
   }
 }
 
+/* ===========================================
+   ORIENTATION-BASED MEDIA QUERIES
+   =========================================== */
+
 /* Landscape orientation optimizations */
 @media (orientation: landscape) and (max-height: 768px) {
   .homeContainer {
@@ -980,3 +798,208 @@
     padding: 12px 24px;
   }
 }
+
+/* ===========================================
+   DARK THEME STYLES
+   =========================================== */
+
+/* Enhanced Dark Theme Styles */
+:global(.darkApp) .homeContainer {
+  background-image: url("/background-dark.svg");
+  background-color: #0a0a0a;
+  color: #ffffff;
+}
+
+:global(.darkApp) .homeContainer h1,
+:global(.darkApp) .homeContainer h2,
+:global(.darkApp) .homeContainer h3,
+:global(.darkApp) .homeContainer h4,
+:global(.darkApp) .homeContainer h5,
+:global(.darkApp) .homeContainer h6 {
+  color: #ffffff;
+}
+
+:global(.darkApp) .homeContainer p,
+:global(.darkApp) .homeContainer span {
+  color: #b0b0b0;
+}
+
+:global(.darkApp) .homeServiceCard {
+  background-color: rgba(255, 183, 0, 0.12) !important;
+  border-color: #363636 !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+}
+
+:global(.darkApp) .homeServiceCard:hover {
+  background-color: #363636 !important;
+  border-color: #424242 !important;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.5);
+}
+
+:global(.darkApp) .socialIcon path {
+  fill: none !important;
+  stroke: #fff !important;
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .socialIcon:hover path {
+  stroke: #fff !important;
+  filter: drop-shadow(0 0 8px #fff);
+}
+
+:global(.darkApp) .serviceIcon > path {
+  fill: none !important;
+  stroke: #fff !important;
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .serviceIcon g path {
+  fill: none !important;
+  stroke: #fff !important;
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .serviceIcon:hover > path,
+:global(.darkApp) .serviceIcon:hover g path {
+  stroke: #fff !important;
+  filter: drop-shadow(0 0 6px #fff);
+}
+
+/* Additional dark theme enhancements */
+:global(.darkApp) .homeContainer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(0, 0, 0, 0.3) 0%,
+    rgba(0, 0, 0, 0.1) 100%
+  );
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Glass morphism effect for cards in dark mode */
+:global(.darkApp) .homeServiceCard {
+  backdrop-filter: blur(12px);
+  border-radius: 50px;
+}
+
+/* Enhanced text readability in dark mode */
+:global(.darkApp) .item-description {
+  color: #b0b0b0 !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+:global(.darkApp) .ant-typography {
+  color: #ffffff !important;
+}
+
+:global(.darkApp) .ant-typography.ant-typography-secondary {
+  color: #b0b0b0 !important;
+}
+
+:global(.darkApp) .deliveryIcon path,
+:global(.darkApp) .deliveryIcon circle {
+  fill: #fff !important;
+  stroke: #fff !important;
+  transition: all 0.3s ease;
+}
+
+/* Dark theme for tablet and desktop */
+@media (min-width: 769px) {
+  :global(.darkApp) .homeServiceCard {
+    background: linear-gradient(
+      135deg,
+      rgba(255, 183, 0, 0.08) 0%,
+      rgba(255, 183, 0, 0.04) 100%
+    ) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+  }
+
+  :global(.darkApp) .homeServiceCard:hover {
+    background: linear-gradient(
+      135deg,
+      rgba(255, 183, 0, 0.15) 0%,
+      rgba(255, 183, 0, 0.08) 100%
+    ) !important;
+    border-color: rgba(255, 183, 0, 0.4);
+    transform: translateY(-6px);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+  }
+
+  :global(.darkApp) .homeServiceCard::before {
+    background: linear-gradient(
+      135deg,
+      rgba(255, 183, 0, 0.08) 0%,
+      transparent 100%
+    );
+  }
+
+  :global(.darkApp) .logo {
+    box-shadow: 0 16px 48px rgba(255, 183, 0, 0.25);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  :global(.darkApp) .logo:hover {
+    box-shadow: 0 20px 60px rgba(255, 183, 0, 0.35);
+    border-color: rgba(255, 183, 0, 0.4);
+  }
+
+  :global(.darkApp) .logo::before {
+    background: linear-gradient(
+      135deg,
+      rgba(255, 183, 0, 0.2),
+      rgba(255, 183, 0, 0.05)
+    );
+  }
+
+  /* Enhanced dark theme typography */
+  :global(.darkApp) .homeContainer h5 {
+    color: #ffffff !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  :global(.darkApp) .homeContainer p {
+    color: #e0e0e0 !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* ===========================================
+   COMPONENT-SPECIFIC STYLES
+   =========================================== */
+
+.serviceIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.dineInIcon {
+  margin-top: -1px;
+}
+
+.pickupIcon {
+  margin-top: -2px;
+}
+
+.roomIcon {
+  margin-top: -2px;
+}
+
+.officeIcon {
+  margin-top: -1px;
+}
+
+.bookingIcon {
+  margin-top: -1px;
+}
+
+.deliveryIcon {
+  margin-top: -1px;
+}

src/pages/split-bill/page.tsx

@@ -7,7 +7,7 @@ import ProText from "components/ProText";
 import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
-import { ProBlack2 } from "ThemeConstants";
+import { ProBlack2, ProGray1 } from "ThemeConstants";
 import PayForActions from "./components/PayForActions";
 import PaymentSummary from "./components/PaymentSummary";
 import TotalPeopleActions from "./components/TotalPeopleActions";
@@ -53,7 +53,7 @@ export default function SplitBillPage() {
                   style={{
                     backgroundColor: "rgba(95, 108, 123, 0.05)",
                     position: "relative",
-                    top: -5,
+                    top: -10,
                   }}
                 >
                   <PeopleIcon />
@@ -61,8 +61,8 @@ export default function SplitBillPage() {
                 <ProText
                   style={{
                     fontSize: "1rem",
-                    marginTop: 2,
+                    marginTop: 3,
-                    color: "rgba(67, 78, 92, 1)",
+                    color: ProGray1,
                   }}
                 >
                   {t("checkout.totalPeople")}
@@ -90,7 +90,7 @@ export default function SplitBillPage() {
                   style={{
                     backgroundColor: "rgba(95, 108, 123, 0.05)",
                     position: "relative",
-                    top: -5,
+                    top: -10,
                   }}
                 >
                   <PeopleIcon />
@@ -99,7 +99,7 @@ export default function SplitBillPage() {
                   style={{
                     fontSize: "1rem",
                     marginTop: 2,
-                    color: "rgba(67, 78, 92, 1)",
+                    color: ProGray1,
                   }}
                 >
                   {t("checkout.payFor")}

src/routes/routes.tsx

@@ -17,7 +17,6 @@ import SearchPage from "pages/search/page";
 import SplitBillPage from "pages/split-bill/page";
 import React, { ReactNode, Suspense, useEffect } from "react";
 import { createHashRouter, useLocation } from "react-router-dom";
-import { SignInPage } from "../pages/authentication";
 import { Error400Page, ErrorPage } from "../pages/errors";
 
 const { useBreakpoint } = Grid;
@@ -148,16 +147,6 @@ export const router = createHashRouter([
     errorElement: <ErrorPage />,
   },
 
-  {
-    path: "/auth",
-    errorElement: <ErrorPage />,
-    children: [
-      {
-        path: "signin",
-        element: <SignInPage />, // No PrivateRoute for sign-in
-      },
-    ],
-  },
   {
     path: "errors",
     errorElement: <ErrorPage />,