checkout: UI + styles enhacnements

src/components/OrderSummary/OrderSummary.tsx

@@ -51,9 +51,20 @@ export default function OrderSummary() {
   return (
     <>
       <Card className={`${styles.orderSummary}`}>
-        <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
+        <ProTitle
+          style={{
+            fontWeight: 500,
+            fontStyle: "Medium",
+            fontSize: 18,
+            lineHeight: "140%",
+            letterSpacing: "0%",
+            color: "#333333",
+          }}
+        >
+          {t("cart.orderSummary")}
+        </ProTitle>
         <Divider style={{ margin: "15px 0 15px 0" }} />
-        <Space orientation="vertical" style={{ width: "100%" }}>
+        <Space orientation="vertical" style={{ width: "100%", gap: 16 }}>
           <div className={styles.summaryRow}>
             <ProText type="secondary" style={titlesStyle}>
               {t("cart.basketTotal")}
@@ -67,7 +78,7 @@ export default function OrderSummary() {
               </ProText>
               <ArabicPrice
                 price={Number(restaurant?.delivery_fees || 0)}
-                style={titlesStyle}
+                style={{ ...titlesStyle, color: "#434E5C" }}
               />
             </div>
           )}
@@ -75,23 +86,32 @@ export default function OrderSummary() {
             <ProText type="secondary" style={titlesStyle}>
               {t("cart.discount")}
             </ProText>
-            <ArabicPrice price={discountAmount} style={titlesStyle} />
+            <ArabicPrice
+              price={discountAmount}
+              style={{ ...titlesStyle, color: "#434E5C" }}
+            />
           </div>
           <div className={styles.summaryRow}>
             <ProText type="secondary" style={titlesStyle}>
               {t("cart.tax")}
             </ProText>
-            <ArabicPrice price={taxAmount || 0} style={titlesStyle} />
+            <ArabicPrice
+              price={taxAmount || 0}
+              style={{ ...titlesStyle, color: "#434E5C" }}
+            />
           </div>
           {splitBillAmount > 0 && (
             <div className={styles.summaryRow}>
               <ProText type="secondary" style={titlesStyle}>
                 {t("splitBill.splitBillAmount")}
               </ProText>
-              <ArabicPrice price={splitBillAmount} style={titlesStyle} />
+              <ArabicPrice
+                price={splitBillAmount}
+                style={{ ...titlesStyle, color: "#434E5C" }}
+              />
             </div>
           )}
-          <Divider className={styles.summaryDivider} />
+          <Divider className={styles.summaryDivider} style={{ margin: "0" }} />
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
             <ProText
               style={{
@@ -101,6 +121,7 @@ export default function OrderSummary() {
                 lineHeight: "140%",
                 letterSpacing: "0%",
                 textAlign: "center",
+                color: "#333333",
               }}
             >
               {t("cart.totalAmount")}