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/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>