remove unnecessary code & enhance gray color over the app
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
export { SignInPage } from "./SignIn.tsx";
|
||||
export { WelcomePage } from "./Welcome.tsx";
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
.ltr-signin-ellipse {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.rtl-signin-ellipse {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
@@ -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"
|
||||
|
||||
@@ -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`);
|
||||
});
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
color: "rgba(67, 78, 92, 1)",
|
||||
marginTop: 3,
|
||||
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")}
|
||||
|
||||
Reference in New Issue
Block a user