From e3e95628dc3cad6811cfea79504beaae1d7111b2 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sun, 23 Nov 2025 17:51:40 +0300
Subject: [PATCH] split-bill: styles enhancements

---
 src/pages/address/address.module.css          |   2 +-
 src/pages/split-bill/SplitBillPage.module.css |  22 ++
 src/pages/split-bill/page.tsx                 | 208 ++++++++----------
 3 files changed, 116 insertions(+), 116 deletions(-)

diff --git a/src/pages/address/address.module.css b/src/pages/address/address.module.css
index 9ef339e..8c21d99 100644
--- a/src/pages/address/address.module.css
+++ b/src/pages/address/address.module.css
@@ -167,7 +167,7 @@
   flex-direction: row;
   justify-content: space-around;
   gap: 1rem;
-  background-color: white;
+  background-color: var(--secondary-background);
   box-shadow: none;
 }
 
diff --git a/src/pages/split-bill/SplitBillPage.module.css b/src/pages/split-bill/SplitBillPage.module.css
index 7a3ef4c..1b773cf 100644
--- a/src/pages/split-bill/SplitBillPage.module.css
+++ b/src/pages/split-bill/SplitBillPage.module.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/pages/split-bill/page.tsx b/src/pages/split-bill/page.tsx
index 88e1960..bbcb6f8 100644
--- a/src/pages/split-bill/page.tsx
+++ b/src/pages/split-bill/page.tsx
@@ -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>
     </>
   );