checkout: keep enhacning

src/components/OrderSummary/OrderSummary.tsx

@@ -18,6 +18,7 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
 import ProText from "../ProText";
 import ProTitle from "../ProTitle";
 import styles from "./OrderSummary.module.css";
+import { CSSProperties } from "react";
 
 export default function OrderSummary() {
   const { t } = useTranslation();
@@ -38,6 +39,15 @@ export default function OrderSummary() {
       (restaurant?.customer_loyalty_points ?? 0) <=
     0;
 
+  const titlesStyle: CSSProperties = {
+    fontWeight: 400,
+    fontStyle: "Regular",
+    fontSize: 16,
+    lineHeight: "140%",
+    letterSpacing: "0%",
+    textAlign: "center",
+  };
+
   return (
     <>
       <Card className={`${styles.orderSummary}`}>
@@ -45,37 +55,67 @@ export default function OrderSummary() {
         <Divider style={{ margin: "15px 0 15px 0" }} />
         <Space orientation="vertical" style={{ width: "100%" }}>
           <div className={styles.summaryRow}>
-            <ProText type="secondary">{t("cart.basketTotal")}</ProText>
-            <ArabicPrice price={subtotal} />
+            <ProText type="secondary" style={titlesStyle}>
+              {t("cart.basketTotal")}
+            </ProText>
+            <ArabicPrice price={subtotal} style={titlesStyle} />
           </div>
           {orderType === OrderType.Delivery && (
             <div className={styles.summaryRow}>
-              <ProText type="secondary">{t("cart.deliveryFee")}</ProText>
-              <ArabicPrice price={Number(restaurant?.delivery_fees || 0)} />
+              <ProText type="secondary" style={titlesStyle}>
+                {t("cart.deliveryFee")}
+              </ProText>
+              <ArabicPrice
+                price={Number(restaurant?.delivery_fees || 0)}
+                style={titlesStyle}
+              />
             </div>
           )}
           <div className={styles.summaryRow}>
-            <ProText type="secondary">{t("cart.discount")}</ProText>
-            <ArabicPrice price={discountAmount} />
+            <ProText type="secondary" style={titlesStyle}>
+              {t("cart.discount")}
+            </ProText>
+            <ArabicPrice price={discountAmount} style={titlesStyle} />
           </div>
           <div className={styles.summaryRow}>
-            <ProText type="secondary">{t("cart.tax")}</ProText>
-            <ArabicPrice price={taxAmount || 0} />
+            <ProText type="secondary" style={titlesStyle}>
+              {t("cart.tax")}
+            </ProText>
+            <ArabicPrice price={taxAmount || 0} style={titlesStyle} />
           </div>
           {splitBillAmount > 0 && (
             <div className={styles.summaryRow}>
-              <ProText type="secondary">
+              <ProText type="secondary" style={titlesStyle}>
                 {t("splitBill.splitBillAmount")}
               </ProText>
-              <ArabicPrice price={splitBillAmount} />
+              <ArabicPrice price={splitBillAmount} style={titlesStyle} />
             </div>
           )}
           <Divider className={styles.summaryDivider} />
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
-            <ProText strong type="secondary">
+            <ProText
+              style={{
+                fontWeight: 600,
+                fontStyle: "SemiBold",
+                fontSize: 18,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+              }}
+            >
               {t("cart.totalAmount")}
             </ProText>
-            <ArabicPrice price={grandTotal} />
+            <ArabicPrice
+              price={grandTotal}
+              style={{
+                fontWeight: 600,
+                fontStyle: "SemiBold",
+                fontSize: 18,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+              }}
+            />
           </div>
         </Space>