checkout: UI + styles enhacnements

src/components/PaymentMethods/PaymentMethods.tsx

@@ -14,15 +14,17 @@ import { colors, ProGray1 } from "../../ThemeConstants";
 import ProInputCard from "../ProInputCard/ProInputCard";
 import styles from "./PaymentMethods.module.css";
 import { OrderType } from "pages/checkout/hooks/types.ts";
+import RCardIcon from "components/Icons/RCardIcon";
 
 const PaymentMethods = () => {
   const { t } = useTranslation();
   const { paymentMethod, orderType } = useAppSelector(selectCart);
   const dispatch = useAppDispatch();
   const grandTotal = useAppSelector(selectGrandTotal);
+  const { isRTL } = useAppSelector((state) => state.locale);
 
   const options: {
-    label: string;
+    label: React.ReactNode;
     value: string;
     price?: string;
     icon?: React.ReactNode;
@@ -32,23 +34,40 @@ const PaymentMethods = () => {
     ...(orderType !== OrderType.Gift
       ? [
           {
-            label: t("checkout.cash"),
+            label: (
+              <>
+                <ProText
+                  style={{
+                    color: "#E8B400",
+                    [isRTL ? "marginLeft" : "marginRight"]: 4,
+                  }}
+                >
+                  $
+                </ProText>
+                <ProText style={{color: '#5F6C7B'}}>{t("checkout.cash")}</ProText>
+              </>
+            ),
             value: "cash",
-            price: grandTotal.toString(),
+            price: grandTotal.toFixed(2),
             style: {
               color: colors.primary,
             },
           },
         ]
       : []),
-      // {
-      //   label: t("checkout.creditDebitCard"),
-      //   value: "creditDebitCard",
-      //   price: t("checkout.expiresIn") + ":12/26",
-      //   hideCurrency: true,
-      // },
+    // {
+    //   label: t("checkout.creditDebitCard"),
+    //   value: "creditDebitCard",
+    //   price: t("checkout.expiresIn") + ":12/26",
+    //   hideCurrency: true,
+    // },
     {
-      label: t("checkout.differentCard"),
+      label: (
+        <>
+          <RCardIcon className={styles.eCardIcon} />
+          <ProText style={{color: '#5F6C7B'}}>{t("checkout.differentCard")}</ProText>
+        </>
+      ),
       value: "differentCard",
       icon: (
         <div className={styles.differentCardIcon}>
@@ -56,7 +75,7 @@ const PaymentMethods = () => {
         </div>
       ),
       hideCurrency: true,
-    }
+    },
     // {
     //   label: t("checkout.fascanoWallet"),
     //   value: "fascanoWallet",
@@ -95,6 +114,7 @@ const PaymentMethods = () => {
                   key={option.value}
                   value={option.value}
                   onClick={() => onPaymentSelect(option.value)}
+                  className={styles.circleCheckbox}
                   style={{
                     height: 48,
                     borderRadius: 888,