fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

split-bill: styles enhancements

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-23 17:51:40 +03:00
parent 207541136f
commit e3e95628dc
3 changed files with 116 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/address/address.module.css
View File

@@ -167,7 +167,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
gap: 1rem; gap: 1rem;
background-color: white; background-color: var(--secondary-background);
box-shadow: none; box-shadow: none;
} }

22
src/pages/split-bill/SplitBillPage.module.css
View File

@@ -154,3 +154,25 @@
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
} }
} }
.checkoutButtonContainer {
width: 100%;
padding: 16px 16px 0;
position: sticky;
bottom: 0;
left: 0;
height: 80px;
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 1rem;
background-color: var(--secondary-background);
box-shadow: none;
}
.placeOrderButton {
width: 100%;
height: 48px;
margin-bottom: 16px;
box-shadow: none;
}

208
src/pages/split-bill/page.tsx
View File

@@ -6,158 +6,136 @@ import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText"; import ProText from "components/ProText";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks"; import { ProGray1 } from "ThemeConstants";
import { ProBlack2, ProGray1 } from "ThemeConstants";
import PayForActions from "./components/PayForActions"; import PayForActions from "./components/PayForActions";
import PaymentSummary from "./components/PaymentSummary"; import PaymentSummary from "./components/PaymentSummary";
import TotalPeopleActions from "./components/TotalPeopleActions"; import TotalPeopleActions from "./components/TotalPeopleActions";
import styles from "./SplitBillPage.module.css";
export default function SplitBillPage() { export default function SplitBillPage() {
const { t } = useTranslation(); const { t } = useTranslation();
const { subdomain } = useParams(); const { subdomain } = useParams();
const { themeName } = useAppSelector((state) => state.theme);
return ( return (
<> <>
<Layout> <Layout>
<ProHeader>{t("checkout.splitBill")}</ProHeader> <ProHeader>{t("checkout.splitBill")}</ProHeader>
<Layout.Content> <Layout.Content
<div style={{
style={{ display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", height: "82vh",
height: "82vh", padding: 16,
padding: 16, gap: 16,
gap: 16, overflow: "auto",
overflow: "auto", scrollbarWidth: "none",
scrollbarWidth: "none", }}
}} >
> <ProInputCard title={t("checkout.splitBill")}>
<ProInputCard title={t("checkout.splitBill")}> <div
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "row",
justifyContent: "space-between",
gap: "1rem", gap: "1rem",
padding: 8,
}} }}
> >
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between",
gap: "1rem", gap: "1rem",
padding: 8,
}} }}
> >
<div <Button
type="text"
shape="circle"
style={{ style={{
display: "flex", backgroundColor: "rgba(95, 108, 123, 0.05)",
flexDirection: "row", position: "relative",
gap: "1rem", top: -10,
}} }}
> >
<Button <PeopleIcon />
type="text" </Button>
shape="circle" <ProText
style={{
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 3,
color: ProGray1,
}}
>
{t("checkout.totalPeople")}
</ProText>
</div>
<TotalPeopleActions />
</div>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{ style={{
display: "flex", fontSize: "1rem",
flexDirection: "row", marginTop: 3,
gap: "1rem", color: ProGray1,
}} }}
> >
<Button {t("checkout.totalPeople")}
type="text" </ProText>
shape="circle"
style={{
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 2,
color: ProGray1,
}}
>
{t("checkout.payFor")}
</ProText>
</div>
<PayForActions />
</div> </div>
<TotalPeopleActions />
</div> </div>
</ProInputCard>
<PaymentMethods /> <div
<PaymentSummary />
</div>
<div
style={{
width: "100%",
padding: "16px 16px 0",
position: "fixed",
bottom: 0,
left: 0,
height: "80px",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
gap: "1rem",
backgroundColor: themeName === "light" ? "white" : ProBlack2,
}}
>
<Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
<Button
type="primary"
shape="round"
style={{ style={{
width: "100%", display: "flex",
height: 48, flexDirection: "row",
marginBottom: 16, justifyContent: "space-between",
boxShadow: "none", gap: "1rem",
padding: 8,
}} }}
> >
{t("checkout.placeOrder")} <div
</Button> style={{
</Link> display: "flex",
</div> flexDirection: "row",
gap: "1rem",
}}
>
<Button
type="text"
shape="circle"
style={{
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 2,
color: ProGray1,
}}
>
{t("checkout.payFor")}
</ProText>
</div>
<PayForActions />
</div>
</div>
</ProInputCard>
<PaymentMethods />
<PaymentSummary />
</Layout.Content> </Layout.Content>
<Layout.Footer className={styles.checkoutButtonContainer}>
<Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
<Button
type="primary"
shape="round"
className={styles.placeOrderButton}
>
{t("checkout.placeOrder")}
</Button>
</Link>
</Layout.Footer>
</Layout> </Layout>
</> </>
); );