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;
justify-content: space-around;
gap: 1rem;
background-color: white;
background-color: var(--secondary-background);
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);
}
}
.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 { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import { ProBlack2, ProGray1 } from "ThemeConstants";
import { ProGray1 } from "ThemeConstants";
import PayForActions from "./components/PayForActions";
import PaymentSummary from "./components/PaymentSummary";
import TotalPeopleActions from "./components/TotalPeopleActions";
import styles from "./SplitBillPage.module.css";
export default function SplitBillPage() {
const { t } = useTranslation();
const { subdomain } = useParams();
const { themeName } = useAppSelector((state) => state.theme);
return (
<>
<Layout>
<ProHeader>{t("checkout.splitBill")}</ProHeader>
<Layout.Content>
<div
style={{
display: "flex",
flexDirection: "column",
height: "82vh",
padding: 16,
gap: 16,
overflow: "auto",
scrollbarWidth: "none",
}}
>
<ProInputCard title={t("checkout.splitBill")}>
<Layout.Content
style={{
display: "flex",
flexDirection: "column",
height: "82vh",
padding: 16,
gap: 16,
overflow: "auto",
scrollbarWidth: "none",
}}
>
<ProInputCard title={t("checkout.splitBill")}>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
<Button
type="text"
shape="circle"
style={{
display: "flex",
flexDirection: "row",
gap: "1rem",
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<Button
type="text"
shape="circle"
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
<PeopleIcon />
</Button>
<ProText
style={{
display: "flex",
flexDirection: "row",
gap: "1rem",
fontSize: "1rem",
marginTop: 3,
color: ProGray1,
}}
>
<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 />
{t("checkout.totalPeople")}
</ProText>
</div>
<TotalPeopleActions />
</div>
</ProInputCard>
<PaymentMethods />
<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"
<div
style={{
width: "100%",
height: 48,
marginBottom: 16,
boxShadow: "none",
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
{t("checkout.placeOrder")}
</Button>
</Link>
</div>
<div
style={{
display: "flex",
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.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>
</>
);