checkout: UI + styles enhacnements

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