checkout: reafactor UI

src/components/PaymentDetails/PaymentDetails.tsx

@@ -14,7 +14,7 @@ export default function PaymentDetails({ order }: { order?: Order }) {
       <Card className={`${styles.orderSummary}`}>
         <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
         <Divider style={{ margin: "15px 0 15px 0" }} />
-        <Space direction="vertical" style={{ width: "100%" }}>
+        <Space orientation="vertical" style={{ width: "100%" }}>
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
             <ProText strong>{t("cart.totalAmount")}</ProText>
             <ArabicPrice price={order?.total_price || 0} strong />

src/components/PaymentMethods/PaymentMethods.tsx

@@ -41,12 +41,12 @@ const PaymentMethods = () => {
           },
         ]
       : []),
-    {
-      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"),
       value: "differentCard",
@@ -56,15 +56,15 @@ const PaymentMethods = () => {
         </div>
       ),
       hideCurrency: true,
-    },
-    {
-      label: t("checkout.fascanoWallet"),
-      value: "fascanoWallet",
-      price: "7.50",
-      style: {
-        color: colors.primary,
-      },
-    },
+    }
+    // {
+    //   label: t("checkout.fascanoWallet"),
+    //   value: "fascanoWallet",
+    //   price: "7.50",
+    //   style: {
+    //     color: colors.primary,
+    //   },
+    // },
   ];
 
   const onPaymentSelect = (value: string) => {

src/components/ProInputCard/ProInputCard.tsx

@@ -28,7 +28,17 @@ const ProInputCard: FunctionComponent<ProInputCardProps> = ({
         }}
       >
         {title && typeof title === "string" && (
-          <ProTitle style={{ fontSize: 18 }}> {title} </ProTitle>
+          <ProTitle
+            style={{
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 18,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+            }}
+          >
+            {title}
+          </ProTitle>
         )}
         {title && typeof title !== "string" && title}
         <div style={{ position: "relative", top: 0 }}>{titleRight}</div>