diff --git a/src/ThemeConstants.ts b/src/ThemeConstants.ts index b14ae8f..bd9b562 100644 --- a/src/ThemeConstants.ts +++ b/src/ThemeConstants.ts @@ -7,10 +7,7 @@ export const colors = { darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)", }; -export const ProGray1 = "#f7f9fa"; -export const ProGray2 = "#F1F1F1"; -export const ProGray3 = "#edf0f2"; // for modal header background -export const ProGray4 = "#DCDCDC"; // lines color +export const ProGray1 = "#8a8a8a"; 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"], - colorLinkActive: COLOR["700"], - colorLinkHover: COLOR["300"], + colorLink: WHITE_COLOR["600"], + colorLinkActive: WHITE_COLOR["700"], + colorLinkHover: WHITE_COLOR["300"], borderRadius: 1000, borderRadiusLG: 1000, // defaultShadow: "none", @@ -170,8 +167,8 @@ export const themeConfig: ThemeConfig = { colorBgContainer: "none", }, Card: { - colorBgContainer: COLOR.cardBg, - colorBorderSecondary: COLOR["borderColor"], + colorBgContainer: WHITE_COLOR.cardBg, + 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"], - colorText: COLOR["600"], + colorFillContent: WHITE_COLOR["100"], + colorText: WHITE_COLOR["600"], }, Segmented: { - colorBgLayout: COLOR["100"], + colorBgLayout: WHITE_COLOR["100"], borderRadius: 6, colorTextLabel: "#000000", }, Table: { - borderColor: COLOR["100"], - headerBg: COLOR.primaryColor, - headerColor: COLOR.whiteColor, - rowSelectedBg: COLOR.primaryColor, + borderColor: WHITE_COLOR["100"], + headerBg: WHITE_COLOR.primaryColor, + headerColor: WHITE_COLOR.whiteColor, + rowSelectedBg: WHITE_COLOR.primaryColor, cellPaddingBlock: 8, - colorBgContainer: COLOR.tableBg, - colorFillAlter: COLOR.hoverBg, + colorBgContainer: WHITE_COLOR.tableBg, + colorFillAlter: WHITE_COLOR.hoverBg, }, Tabs: { - colorBorderSecondary: COLOR["100"], + colorBorderSecondary: WHITE_COLOR["100"], }, Timeline: { dotBg: "none", }, Typography: { - colorLink: COLOR["600"], - colorLinkActive: COLOR["700"], - colorLinkHover: COLOR["300"], + colorLink: WHITE_COLOR["600"], + colorLinkActive: WHITE_COLOR["700"], + colorLinkHover: WHITE_COLOR["300"], linkHoverDecoration: "underline", }, Drawer: { wireframe: true, - colorSplit: ProGray4, + colorSplit: ProGray1, lineWidth: 3, controlHeightLG: 30, }, Menu: { - colorItemBg: COLOR.sidebarBg, - colorItemText: COLOR["800"], - colorItemTextSelected: COLOR.primaryColor2, - colorItemBgSelected: COLOR.activeBg, - colorItemBgHover: COLOR.hoverBg, + colorItemBg: WHITE_COLOR.sidebarBg, + colorItemText: WHITE_COLOR["800"], + colorItemTextSelected: WHITE_COLOR.primaryColor2, + colorItemBgSelected: WHITE_COLOR.activeBg, + colorItemBgHover: WHITE_COLOR.hoverBg, }, Layout: { - headerBg: COLOR.headerBg, + headerBg: WHITE_COLOR.headerBg, bodyBg: componentBackground, }, Input: { diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index 3847749..89ae429 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -236,7 +236,9 @@ "placeOrder": "وضع الطلب", "remainingAmount": "المبلغ المتبقي", "totalAmount": "المبلغ الكلي", - "items": "العناصر" + "items": "العناصر", + "expiresIn": "تنتهي في", + "expiresInDescription": "تنتهي في:12/26" }, "address": { "title": "العنوان", diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index 251f9de..0525b15 100644 --- a/src/assets/locals/en.json +++ b/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", diff --git a/src/components/Icons/BackIcon.tsx b/src/components/Icons/BackIcon.tsx index b32b408..f2649a3 100644 --- a/src/components/Icons/BackIcon.tsx +++ b/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 ( { > void; } const NextIcon = ({ className, onClick }: NextIconType) => { + const { themeName } = useAppSelector((state) => state.theme); + const color = themeName === "dark" ? "white" : ProGray1; return ( { > void; } -const PaymentMethods = ({ - onPaymentSelect, - ...props -}: PaymentMethodsProps) => { +const PaymentMethods = ({ 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 = ({ {option.label} {!option.icon ? ( ) : ( @@ -110,9 +107,6 @@ const PaymentMethods = ({ )} - {/* {index !== options.length - 1 && ( - - )} */} ))} diff --git a/src/components/privateRoute/PrivateRoute.tsx b/src/components/privateRoute/PrivateRoute.tsx index bd6e71f..44f6eed 100644 --- a/src/components/privateRoute/PrivateRoute.tsx +++ b/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 ; } diff --git a/src/layouts/app/HeaderMenuDrawer.tsx b/src/layouts/app/HeaderMenuDrawer.tsx index 73b622e..57a2c69 100644 --- a/src/layouts/app/HeaderMenuDrawer.tsx +++ b/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: diff --git a/src/layouts/app/SideNav.tsx b/src/layouts/app/SideNav.tsx deleted file mode 100644 index 7244bc1..0000000 --- a/src/layouts/app/SideNav.tsx +++ /dev/null @@ -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 ( - - - - - - - ); -}; - -export default SideNav; diff --git a/src/pages/authentication/SignIn.tsx b/src/pages/authentication/SignIn.tsx deleted file mode 100644 index 53137bc..0000000 --- a/src/pages/authentication/SignIn.tsx +++ /dev/null @@ -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 ( - - {!xs && ( - <> - - - {locale === "en" ? ( - - ) : ( - - )} - - - - )} - - - {!xs && ( - - )} - {xs && }{" "} - {t("login")} - - {/* // أهلا بعودتك ! من فضلك قم بتسجيل الدخول لحسابك */} - {t("msg-welcome")} - -
- - - - label={t("user name")} - name="username" - rules={[ - { - required: true, - message: t("msg-add-var-err", { var: t("user name") }), - }, - ]} - > - - - - - - label={t("password")} - name="password" - rules={[ - { - required: true, - message: t("msg-add-var-err", { var: t("password") }), - }, - ]} - > - - - - - name="remember" valuePropName="checked"> - {t("remember me")} - - - - - - - - {t("forget password")}? - - - -
- - {t("app version")} : 2.0.0 - - - - - ); -}; diff --git a/src/pages/authentication/Welcome.tsx b/src/pages/authentication/Welcome.tsx deleted file mode 100644 index 2ac02a6..0000000 --- a/src/pages/authentication/Welcome.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Flex, Typography } from 'antd'; - -export const WelcomePage = () => { - return ( - - Welcome to Antd - - A dynamic and versatile multipurpose dashboard utilizing Ant Design, - React, TypeScript, and Vite. - - {/* - - */} - - ); -}; diff --git a/src/pages/authentication/index.ts b/src/pages/authentication/index.ts deleted file mode 100644 index de6d14c..0000000 --- a/src/pages/authentication/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { SignInPage } from "./SignIn.tsx"; -export { WelcomePage } from "./Welcome.tsx"; - diff --git a/src/pages/authentication/styles.css b/src/pages/authentication/styles.css deleted file mode 100644 index a44ec18..0000000 --- a/src/pages/authentication/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.ltr-signin-ellipse { - position: absolute; - left: 0px; -} - -.rtl-signin-ellipse { - position: absolute; - right: 0px; -} diff --git a/src/pages/login/page.tsx b/src/pages/login/page.tsx index 8b09784..eca1458 100644 --- a/src/pages/login/page.tsx +++ b/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() { {t("login.EnterYourNumber")} 👋 - + {t("login.WeWillSendYouAWhatsAppMessageWithAOneTimeVerificationCode")} @@ -183,6 +183,7 @@ export default function LoginPage() { height: 50, border: "none", marginTop: "2rem", + boxShadow: "none", }} disabled={phone.length <= 3 || isLoading} htmlType="submit" diff --git a/src/pages/otp/page.tsx b/src/pages/otp/page.tsx index 9f999a3..ba46851 100644 --- a/src/pages/otp/page.tsx +++ b/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() {
{t("otp.verification")} - + {t("otp.enterThe4DigitCodeThatSentToYourPhoneNumber")}
- + {localStorage.getItem("otp")}
@@ -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`); }); diff --git a/src/pages/restaurant/page.tsx b/src/pages/restaurant/page.tsx index d945988..7278588 100644 --- a/src/pages/restaurant/page.tsx +++ b/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 ( <>
diff --git a/src/pages/restaurant/restaurant.module.css b/src/pages/restaurant/restaurant.module.css index 3479579..f1b9ed2 100644 --- a/src/pages/restaurant/restaurant.module.css +++ b/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) { - .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; - } -} +/* =========================================== + DESKTOP MEDIA QUERIES (≥ 1025px) + =========================================== */ /* Large screens */ @media (min-width: 1200px) { @@ -299,18 +322,7 @@ } } -/* Ensure full coverage on all devices */ -@media (max-width: 480px) { - .homeContainer { - height: 100vh; - min-height: 100vh; - width: 100vw; - margin: 0; - padding: 0; - } -} - -/* Desktop Styles (1025px+) */ +/* Desktop */ @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 */ -: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+) */ +/* Ultra-wide Desktop */ @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; +} diff --git a/src/pages/split-bill/page.tsx b/src/pages/split-bill/page.tsx index 943f097..f581371 100644 --- a/src/pages/split-bill/page.tsx +++ b/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, }} > @@ -61,8 +61,8 @@ export default function SplitBillPage() { {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, }} > @@ -99,7 +99,7 @@ export default function SplitBillPage() { style={{ fontSize: "1rem", marginTop: 2, - color: "rgba(67, 78, 92, 1)", + color: ProGray1, }} > {t("checkout.payFor")} diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx index 81faa06..c385043 100644 --- a/src/routes/routes.tsx +++ b/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: , }, - { - path: "/auth", - errorElement: , - children: [ - { - path: "signin", - element: , // No PrivateRoute for sign-in - }, - ], - }, { path: "errors", errorElement: ,