split-bill: styles enhancements

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;
 }
 

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;
+}

src/pages/split-bill/page.tsx

@@ -6,23 +6,21 @@ 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
+        <Layout.Content
           style={{
             display: "flex",
             flexDirection: "column",
@@ -126,38 +124,18 @@ export default function SplitBillPage() {
           </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,
-            }}
-          >
+        </Layout.Content>
+        <Layout.Footer className={styles.checkoutButtonContainer}>
           <Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
             <Button
               type="primary"
               shape="round"
-                style={{
-                  width: "100%",
-                  height: 48,
-                  marginBottom: 16,
-                  boxShadow: "none",
-                }}
+              className={styles.placeOrderButton}
             >
               {t("checkout.placeOrder")}
             </Button>
           </Link>
-          </div>
-        </Layout.Content>
+        </Layout.Footer>
       </Layout>
     </>
   );