checkout: UI + styles enhacnements

2025-12-30 23:50:42 +03:00
parent 3ed5c4d5d6
commit 5d523e2508
24 changed files with 355 additions and 122 deletions
--- a/src/pages/address/address.module.css
+++ b/src/pages/address/address.module.css
@@ -184,6 +184,7 @@
  width: 100%;
  font-size: 16px;
  box-shadow: none;
+  border-color: #C0BFC4;
 }

 .placeOrderButton {
--- a/src/pages/cart/cart.module.css
+++ b/src/pages/cart/cart.module.css
@@ -67,11 +67,6 @@
  top: 5px !important;
 }

-.couponApplyIcon {
-  margin-left: 8px;
-  font-size: 14px;
-}
-
 .donateHandIcon {
  color: var(--primary);
  font-size: 24px;
@@ -434,11 +429,6 @@
    font-size: 14px !important;
  }

-  .couponApplyIcon {
-    margin-left: 10px;
-    font-size: 16px;
-  }
-
  .donateHandIcon {
    font-size: 28px;
  }
@@ -481,11 +471,6 @@
    font-size: 16px !important;
  }

-  .couponApplyIcon {
-    margin-left: 12px;
-    font-size: 18px;
-  }
-
  .donateHandIcon {
    font-size: 32px;
  }
@@ -607,6 +592,17 @@
 }

 .deleteIcon {
- position: relative;
- top: 1px;
+  position: relative;
+  top: 1px;
+}
+
+.couponApplyIcon {
+  position: relative;
+  top: 1px;
+}
+
+.editIcon {
+  position: absolute;
+  top: -7px;
+  right: 5px;
 }
--- a/src/pages/cart/components/CouponCard.tsx
+++ b/src/pages/cart/components/CouponCard.tsx
@@ -1,6 +1,7 @@
 import { Button, Form, Input, message } from "antd";
 import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProText from "components/ProText";
 import {
  selectCart,
  updateCoupon,
@@ -72,13 +73,8 @@ export default function CouponCard() {
        //     <DonateIcon />
        //   </div>
        // }
-        dividerStyle={{ margin: "5px 0 0 0" }}
      >
-        <Form.Item
-          label={t("cart.couponCode")}
-          name="coupon"
-          style={{ position: "relative", top: -5 }}
-        >
+        <Form.Item name="coupon">
          <Input
            placeholder={t("cart.couponCode")}
            size="large"
@@ -93,13 +89,23 @@ export default function CouponCard() {
                  width: 100,
                  height: 32,
                  borderRadius: 100,
-                  backgroundColor: "black",
+                  backgroundColor: "#333333",
                  color: "white",
+                  fontWeight: 500,
+                  fontStyle: "Medium",
+                  fontSize: 14,
+                  lineHeight: "140%",
+                  letterSpacing: "0%"
                }}
                onClick={() => handleCouponSave(coupon)}
+                icon={<CouponHeartIcon className={styles.couponApplyIcon} />}
+                iconPlacement="end"
              >
-                {t("cart.apply")}
-                <CouponHeartIcon className={styles.couponApplyIcon} />
+                <ProText
+                  style={{ position: "relative", top: -1, color: "white" }}
+                >
+                  {t("cart.apply")}
+                </ProText>
              </Button>
            }
          />
--- a/src/pages/cart/components/RewardWaiterCard.tsx
+++ b/src/pages/cart/components/RewardWaiterCard.tsx
@@ -12,7 +12,6 @@ import styles from "pages/cart/cart.module.css";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
-import { colors } from "ThemeConstants.ts";

 export default function RewardWaiterCard() {
  const { t } = useTranslation();
@@ -54,10 +53,32 @@ export default function RewardWaiterCard() {
            <DonateHandIcon className={styles.donateHandIcon} />
          </div>
          <div style={{ marginTop: 7 }}>
-            <ProTitle style={{ fontSize: 18, margin: 0 }}>
-              {t("cart.rewardYourWaiter")}
-            </ProTitle>
-            <ProText style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}>
+            <div>
+              <ProText
+                style={{
+                  fontWeight: 500,
+                  fontStyle: "Medium",
+                  fontSize: 16,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  textAlign: "center",
+                  color: "#333333",
+                }}
+              >
+                {t("cart.rewardYourWaiter")}
+              </ProText>
+            </div>
+            <ProText
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: 12,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#5F6C7B",
+              }}
+            >
              {t("cart.rewardYourWaiter100")}
            </ProText>
          </div>
@@ -74,41 +95,66 @@ export default function RewardWaiterCard() {
            style={{
              borderRadius: 100,
              height: 32,
-              borderColor: "rgba(255, 183, 0, 0.12)",
-              backgroundColor: colors.primary,
-              color: colors.primary,
-            }}
-          >
-            <ArabicPrice price={0.5} />
-          </Button>
-          <Button
-            style={{
-              borderRadius: 100,
-              height: 32,
-              backgroundColor: "#5F6C7B0D",
-              color: "rgba(95, 108, 123, 1)",
              border: "none",
+              backgroundColor: "#5F6C7B0D",
            }}
          >
-            <ArabicPrice price={1.0} />
+            <ArabicPrice
+              price={0.5}
+              textStyle={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#5F6C7B",
+              }}
+            />
          </Button>
          <Button
            style={{
              borderRadius: 100,
              height: 32,
-              color: colors.primary,
-              borderColor: "#d9d9d9",
+              border: "none",
+              backgroundColor: "#5F6C7B0D",
            }}
-            onClick={() => setIsTipOpen(true)}
          >
-            <EditIcon />
-            <ProText
-              style={{
-                color: colors.primary,
+            <ArabicPrice
+              price={1.0}
+              textStyle={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#5F6C7B",
              }}
-            >
-              {t("cart.other")}
-            </ProText>
+            />
+          </Button>
+          <Button
+            style={{
+              borderRadius: 100,
+              height: 32,
+              border: "none",
+              backgroundColor: "#FFB7001F",
+            }}
+            icon={<EditIcon className={styles.editIcon} />}
+            iconPlacement="end"
+          >
+            <ArabicPrice
+              price={3.0}
+              textStyle={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#CC9300",
+              }}
+            />
          </Button>
        </div>
      </Card>
--- a/src/pages/checkout/components/CheckoutButton.tsx
+++ b/src/pages/checkout/components/CheckoutButton.tsx
@@ -58,6 +58,17 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
    [orderType],
  );

+  const getSplitButtonTitle = useMemo(() => {
+    if (selectedSplitWay === "customAmount") {
+      return t("splitBill.customAmount");
+    } else if (selectedSplitWay === "equality") {
+      return t("splitBill.divideEqually");
+    } else if (selectedSplitWay === "payForItems") {
+      return t("splitBill.payForItems");
+    }
+    return t("checkout.splitBill");
+  }, [selectedSplitWay, t]);
+
  return (
    <>
      <Layout.Footer className={styles.checkoutButtonContainer}>
@@ -66,9 +77,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
            className={styles.splitBillButton}
            onClick={handleSplitBillClick}
          >
-            {selectedSplitWay
-              ? t("checkout.removeSplitBill")
-              : t("checkout.splitBill")}
+            {getSplitButtonTitle}
          </Button>
        )}

--- a/src/pages/checkout/components/CustomerInformationCard.module.css
+++ b/src/pages/checkout/components/CustomerInformationCard.module.css
@@ -1,3 +1,5 @@
 .customerInformationCard {
-  height: 215px !important;
-}
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
--- a/src/pages/checkout/components/CustomerInformationCard.tsx
+++ b/src/pages/checkout/components/CustomerInformationCard.tsx
@@ -16,12 +16,9 @@ export default function CustomerInformationCard() {
  return (
    orderType !== OrderType.Gift && (
      <>
-        <ProInputCard
-          title={t("checkout.customerInformation")}
-          className={styles.customerInformationCard}
-        >
-          <div style={{ position: "relative", top: -25 }}>
-            <Form.Item label={t("checkout.customerName")} name="customerName">
+        <ProInputCard title={t("checkout.customerInformation")}>
+          <div className={styles.customerInformationCard}>
+            <Form.Item name="customerName">
              <Input
                placeholder={t("checkout.customerName")}
                size="large"
@@ -33,9 +30,7 @@ export default function CustomerInformationCard() {
                }}
              />
            </Form.Item>
-          </div>
-          <div style={{ position: "relative", top: -35 }}>
-            <ProPhoneInput label={t("login.phone")} propName="phone" />
+            <ProPhoneInput propName="phone" />
          </div>
        </ProInputCard>
      </>
--- a/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
@@ -71,7 +71,7 @@ export function CustomAmountChoiceBottomSheet({
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
-      title={t("splitBill.payAsCustomAmount")}
+      title={t("splitBill.customAmount")}
      showCloseButton={true}
      initialSnap={1}
      height={425}
--- a/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
@@ -67,7 +67,7 @@ export function EqualltyChoiceBottomSheet({
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
-      title={t("splitBill.divideTheBillEqually")}
+      title={t("splitBill.divideEqually")}
      showCloseButton={true}
      initialSnap={1}
      height={630}
--- a/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
@@ -69,7 +69,7 @@ export function PayForYourItemsChoiceBottomSheet({
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
-      title={t("splitBill.payForYourItems")}
+      title={t("splitBill.payForItems")}
      showCloseButton={true}
      initialSnap={1}
      height={720}
--- a/src/pages/restaurant/RestaurantServices.tsx
+++ b/src/pages/restaurant/RestaurantServices.tsx
@@ -237,6 +237,8 @@ export default function RestaurantServices() {
                      letterSpacing: "0%",
                      verticalAlign: "middle",
                      color: "#434E5C",
+                      position: "relative",
+                      top: -1
                    }}
                  >
                    {s?.title}
--- a/src/pages/restaurant/restaurant.module.css
+++ b/src/pages/restaurant/restaurant.module.css
@@ -975,6 +975,7 @@
 }

 .scheduledOrderIcon {
-  margin-top: -2px;
+  position: relative;
+  top: 1px;
  font-size: 22px;
 }