checkout: UI + styles enhacnements

2025-12-30 23:50:42 +03:00
parent 3ed5c4d5d6
commit 5d523e2508
24 changed files with 355 additions and 122 deletions
--- a/src/ThemeConstants.ts
+++ b/src/ThemeConstants.ts
@@ -108,6 +108,7 @@ export const SharedThemeVars = {
  colorPrimary: colors.primary,
  fontFamily: "var(--font-roboto)",
  colorLink: colors.primary,
+  lineHeight: "140%"
  // colorItemTextSelected: colors.primary // Menu Item Active Item Color
 };

--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -425,12 +425,10 @@
    "description": "تقسيم الفاتورة",
    "splitBill": "تقسيم الفاتورة",
    "splitBillDescription": "تقسيم الفاتورة",
-    "splitBillButton": "تقسيم الفاتورة",
+    "customAmount": "مبلغ مخصص",
+    "divideEqually": "تقسيم الى حسب العدد",
+    "payForItems": "دفع للطلبات الخاصة بي",
    "splitBillButtonDescription": "تقسيم الفاتورة",
-    "payAsCustomAmount": "دفع كمبلغ مخصص",
-    "payAsSplitAmount": "دفع كمبلغ مقسم",
-    "divideTheBillEqually": "تقسيم الفاتورة الى حسب العدد",
-    "payForYourItems": "دفع للطلبات الخاصة بي",
    "enterCustomAmount": "أدخل المبلغ المخصص",
    "amountPlaceholder": "0.00",
    "divisionPreview": "معاينة التقسيم",
--- a/src/assets/locals/en.json
+++ b/src/assets/locals/en.json
@@ -437,12 +437,10 @@
    "description": "Split Bill",
    "splitBill": "Split Bill",
    "splitBillDescription": "Split Bill",
-    "splitBillButton": "Split Bill",
+    "customAmount": "Custom Amount",
+    "divideEqually": "Divide Equally",
+    "payForItems": "Pay for Items",
    "splitBillButtonDescription": "Split Bill",
-    "payAsCustomAmount": "Pay as Custom Amount",
-    "payAsSplitAmount": "Pay as Split Amount",
-    "divideTheBillEqually": "Divide the Bill Equally",
-    "payForYourItems": "Pay for Your Items",
    "enterCustomAmount": "Enter Custom Amount",
    "amountPlaceholder": "0.00",
    "divisionPreview": "Division Preview",
--- a/src/components/Icons/EditIcon.tsx
+++ b/src/components/Icons/EditIcon.tsx
@@ -7,23 +7,26 @@ const EditIcon = ({ className, onClick }: EditIconType) => {
  return (
    <svg
      width="16"
-      height="17"
-      viewBox="0 0 16 17"
+      height="16"
+      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      onClick={onClick}
    >
-      <path
-        d="M5.33323 10.3008C5.33323 9.97468 5.33323 9.81162 5.37007 9.65817C5.40274 9.52212 5.45661 9.39206 5.52971 9.27276C5.61217 9.13821 5.72747 9.02291 5.95808 8.7923L12.3333 2.41714C12.8855 1.86486 13.781 1.86486 14.3333 2.41714C14.8855 2.96943 14.8855 3.86486 14.3333 4.41714L7.95809 10.7923C7.72749 11.0229 7.61219 11.1382 7.47763 11.2207C7.35834 11.2938 7.22828 11.3476 7.09223 11.3803C6.93878 11.4171 6.77572 11.4171 6.4496 11.4171H5.33323V10.3008Z"
-        fill="var(--primary)"
-      />
-      <path
-        d="M7.33325 3.41714H4.53325C3.41315 3.41714 2.85309 3.41714 2.42527 3.63513C2.04895 3.82688 1.74299 4.13284 1.55124 4.50916C1.33325 4.93699 1.33325 5.49704 1.33325 6.61714V12.2171C1.33325 13.3372 1.33325 13.8973 1.55124 14.3251C1.74299 14.7014 2.04895 15.0074 2.42527 15.1992C2.85309 15.4171 3.41315 15.4171 4.53325 15.4171H10.1333C11.2534 15.4171 11.8134 15.4171 12.2412 15.1992C12.6176 15.0074 12.9235 14.7014 13.1153 14.3251C13.3333 13.8973 13.3333 13.3372 13.3333 12.2171V9.41714M5.33323 11.4171H6.4496C6.77572 11.4171 6.93878 11.4171 7.09223 11.3803C7.22828 11.3476 7.35834 11.2938 7.47763 11.2207C7.61219 11.1382 7.72749 11.0229 7.95809 10.7923L14.3333 4.41714C14.8855 3.86486 14.8855 2.96943 14.3333 2.41714C13.781 1.86486 12.8855 1.86486 12.3333 2.41714L5.95808 8.79231C5.72747 9.02291 5.61217 9.13821 5.52971 9.27276C5.45661 9.39206 5.40274 9.52212 5.37007 9.65817C5.33323 9.81162 5.33323 9.97468 5.33323 10.3008V11.4171Z"
-        stroke="#333333"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <g clipPath="url(#clip0_1571_6925)">
+        <path
+          d="M7.33203 2.66617H4.53203C3.41193 2.66617 2.85187 2.66617 2.42405 2.88415C2.04773 3.0759 1.74176 3.38186 1.55002 3.75819C1.33203 4.18601 1.33203 4.74606 1.33203 5.86617V11.4662C1.33203 12.5863 1.33203 13.1463 1.55002 13.5741C1.74176 13.9505 2.04773 14.2564 2.42405 14.4482C2.85187 14.6662 3.41193 14.6662 4.53203 14.6662H10.132C11.2521 14.6662 11.8122 14.6662 12.24 14.4482C12.6163 14.2564 12.9223 13.9505 13.114 13.5741C13.332 13.1463 13.332 12.5863 13.332 11.4662V8.66617M5.33201 10.6662H6.44838C6.7745 10.6662 6.93756 10.6662 7.09101 10.6293C7.22706 10.5967 7.35711 10.5428 7.47641 10.4697C7.61097 10.3872 7.72627 10.2719 7.95687 10.0413L14.332 3.66617C14.8843 3.11388 14.8843 2.21845 14.332 1.66617C13.7797 1.11388 12.8843 1.11388 12.332 1.66617L5.95685 8.04133C5.72625 8.27193 5.61095 8.38723 5.52849 8.52179C5.45539 8.64108 5.40152 8.77114 5.36885 8.90719C5.33201 9.06064 5.33201 9.2237 5.33201 9.54982V10.6662Z"
+          stroke="#B58D00"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1571_6925">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
    </svg>
  );
 };
--- a/src/components/Icons/RCardIcon.tsx
+++ b/src/components/Icons/RCardIcon.tsx
@@ -0,0 +1,31 @@
+interface RCardIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const RCardIcon = ({ className, onClick }: RCardIconType) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M1.33203 6.66732H14.6654V5.46732C14.6654 4.72058 14.6654 4.34721 14.52 4.062C14.3922 3.81112 14.1882 3.60714 13.9374 3.47931C13.6521 3.33398 13.2788 3.33398 12.532 3.33398H3.46536C2.71863 3.33398 2.34526 3.33398 2.06004 3.47931C1.80916 3.60714 1.60519 3.81111 1.47736 4.062C1.33203 4.34721 1.33203 4.72058 1.33203 5.46732V6.66732Z"
+        fill="#FFB700"
+      />
+      <path
+        d="M12.6654 14.0007V10.0007M10.6654 12.0007H14.6654M14.6654 6.66732H1.33203M14.6654 8.00065V5.46732C14.6654 4.72058 14.6654 4.34721 14.52 4.062C14.3922 3.81112 14.1882 3.60714 13.9374 3.47931C13.6521 3.33398 13.2788 3.33398 12.532 3.33398H3.46536C2.71863 3.33398 2.34526 3.33398 2.06004 3.47931C1.80916 3.60714 1.60519 3.81111 1.47736 4.062C1.33203 4.34721 1.33203 4.72058 1.33203 5.46732V10.534C1.33203 11.2807 1.33203 11.6541 1.47736 11.9393C1.60519 12.1902 1.80916 12.3942 2.06004 12.522C2.34526 12.6673 2.71863 12.6673 3.46536 12.6673H7.9987"
+        stroke="#333333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RCardIcon;
--- a/src/components/Icons/cart/CouponHeart.tsx
+++ b/src/components/Icons/cart/CouponHeart.tsx
@@ -6,16 +6,16 @@ interface CouponHeartType {
 const CouponHeartIcon = ({ className, onClick }: CouponHeartType) => {
  return (
    <svg
-      width="15"
-      height="14"
-      viewBox="0 0 15 14"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      onClick={onClick}
    >
      <path
-        d="M5.49992 6.08333L6.83325 7.41667L9.83325 4.41667M7.49535 2.17388C6.16245 0.6156 3.93975 0.196428 2.26972 1.62334C0.599681 3.05026 0.364564 5.43598 1.67605 7.1236C2.66665 8.39829 5.48078 10.9573 6.79859 12.1333C7.04084 12.3494 7.16197 12.4575 7.30381 12.5001C7.42694 12.537 7.56377 12.537 7.6869 12.5001C7.82874 12.4575 7.94986 12.3494 8.19211 12.1333C9.50993 10.9573 12.3241 8.39829 13.3147 7.1236C14.6261 5.43598 14.4197 3.03525 12.721 1.62334C11.0223 0.211438 8.82826 0.6156 7.49535 2.17388Z"
+        d="M5.9987 7.33333L7.33203 8.66667L10.332 5.66667M7.99413 3.42388C6.66123 1.8656 4.43853 1.44643 2.76849 2.87334C1.09846 4.30026 0.863343 6.68598 2.17483 8.3736C3.16542 9.64829 5.97956 12.2073 7.29737 13.3833C7.53962 13.5994 7.66075 13.7075 7.80258 13.7501C7.92572 13.787 8.06255 13.787 8.18568 13.7501C8.32752 13.7075 8.44864 13.5994 8.69089 13.3833C10.0087 12.2073 12.8228 9.64829 13.8134 8.3736C15.1249 6.68598 14.9185 4.28525 13.2198 2.87334C11.521 1.46144 9.32703 1.8656 7.99413 3.42388Z"
        stroke="white"
        strokeWidth="1.5"
        strokeLinecap="round"
--- a/src/components/OrderSummary/OrderSummary.tsx
+++ b/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")}
--- a/src/components/PaymentMethods/PaymentMethods.module.css
+++ b/src/components/PaymentMethods/PaymentMethods.module.css
@@ -27,4 +27,78 @@
  top: 1px
 }

+.eCardIcon {
+  position: relative;
+  top: 3px;
+  margin-right: 4px;
+}
+
+/* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
+.circleCheckbox :global(.ant-checkbox-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #D5D8DA;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+/* Replace AntD checkmark with a filled inner circle when checked (match SVG) */
+.circleCheckbox :global(.ant-checkbox-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}
+
+/* Apply same circular style to Radio buttons */
+.circleCheckbox :global(.ant-radio-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #D5D8DA;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-radio-checked .ant-radio-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+.circleCheckbox :global(.ant-radio-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+.circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}

--- a/src/components/PaymentMethods/PaymentMethods.tsx
+++ b/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,
--- a/src/components/ProHeader/ProHeader.tsx
+++ b/src/components/ProHeader/ProHeader.tsx
@@ -77,7 +77,20 @@ const ProHeader: FunctionComponent<ProHeaderProps> = ({
              }}
              {...other}
            >
-              <ProTitle level={5}>{children}</ProTitle>
+              <ProTitle
+                level={5}
+                style={{
+                  fontWeight: 500,
+                  fontStyle: "Medium",
+                  fontSize: 16,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  textAlign: "center",
+                  color: "#333333",
+                }}
+              >
+                {children}
+              </ProTitle>
            </Text>
          </div>

@@ -96,7 +109,20 @@ const ProHeader: FunctionComponent<ProHeaderProps> = ({
              }}
              {...other}
            >
-              <ProTitle level={5}>{children}</ProTitle>
+              <ProTitle
+                level={5}
+                style={{
+                  fontWeight: 500,
+                  fontStyle: "Medium",
+                  fontSize: 16,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  textAlign: "center",
+                  color: "#333333",
+                }}
+              >
+                {children}
+              </ProTitle>
            </Text>
          </div>
        </>
--- a/src/components/ProInputCard/ProInputCard.tsx
+++ b/src/components/ProInputCard/ProInputCard.tsx
@@ -35,6 +35,7 @@ const ProInputCard: FunctionComponent<ProInputCardProps> = ({
              fontSize: 18,
              lineHeight: "140%",
              letterSpacing: "0%",
+              color: '#333333',
            }}
          >
            {title}
@@ -43,7 +44,7 @@ const ProInputCard: FunctionComponent<ProInputCardProps> = ({
        {title && typeof title !== "string" && title}
        <div style={{ position: "relative", top: 0 }}>{titleRight}</div>
      </div>
-      <Divider style={{ margin: "5px 0 15px 0", ...dividerStyle }} />
+      <Divider style={{ margin: "3px 0 12px 0", ...dividerStyle }} />
      {children}
    </Card>
  );
--- a/src/components/ProPhoneInput.tsx
+++ b/src/components/ProPhoneInput.tsx
@@ -13,6 +13,7 @@ interface ProPhoneInput {
  getValueCallback?: (value: string) => void;
  value?: string;
  onChange?: (value: string) => void;
+  hiddenLabel?: boolean;
 }

 const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
@@ -21,6 +22,7 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
  getValueCallback,
  value,
  onChange,
+  hiddenLabel = true,
 }) => {
  const form = useFormInstance();
  const { t } = useTranslation();
@@ -29,7 +31,7 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
  return (
    <Form.Item
      name={propName}
-      label={label}
+      label={hiddenLabel ? undefined : label}
      rules={[
        { required: true, message: t("validation.phoneRequired") },
        {
@@ -60,7 +62,7 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
        themeName={themeName}
        placeholder={t("login.mobileNumber")}
        propName={propName}
-        label={label}
+        label={hiddenLabel ? undefined : label}
      />
    </Form.Item>
  );
--- a/src/pages/address/address.module.css
+++ b/src/pages/address/address.module.css
@@ -184,6 +184,7 @@
  width: 100%;
  font-size: 16px;
  box-shadow: none;
+  border-color: #C0BFC4;
 }

 .placeOrderButton {
--- a/src/pages/cart/cart.module.css
+++ b/src/pages/cart/cart.module.css
@@ -67,11 +67,6 @@
  top: 5px !important;
 }

-.couponApplyIcon {
-  margin-left: 8px;
-  font-size: 14px;
-}
-
 .donateHandIcon {
  color: var(--primary);
  font-size: 24px;
@@ -434,11 +429,6 @@
    font-size: 14px !important;
  }

-  .couponApplyIcon {
-    margin-left: 10px;
-    font-size: 16px;
-  }
-
  .donateHandIcon {
    font-size: 28px;
  }
@@ -481,11 +471,6 @@
    font-size: 16px !important;
  }

-  .couponApplyIcon {
-    margin-left: 12px;
-    font-size: 18px;
-  }
-
  .donateHandIcon {
    font-size: 32px;
  }
@@ -607,6 +592,17 @@
 }

 .deleteIcon {
- position: relative;
- top: 1px;
+  position: relative;
+  top: 1px;
+}
+
+.couponApplyIcon {
+  position: relative;
+  top: 1px;
+}
+
+.editIcon {
+  position: absolute;
+  top: -7px;
+  right: 5px;
 }
--- a/src/pages/cart/components/CouponCard.tsx
+++ b/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>
            }
          />
--- a/src/pages/cart/components/RewardWaiterCard.tsx
+++ b/src/pages/cart/components/RewardWaiterCard.tsx
@@ -12,7 +12,6 @@ import styles from "pages/cart/cart.module.css";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
-import { colors } from "ThemeConstants.ts";

 export default function RewardWaiterCard() {
  const { t } = useTranslation();
@@ -54,10 +53,32 @@ export default function RewardWaiterCard() {
            <DonateHandIcon className={styles.donateHandIcon} />
          </div>
          <div style={{ marginTop: 7 }}>
-            <ProTitle style={{ fontSize: 18, margin: 0 }}>
-              {t("cart.rewardYourWaiter")}
-            </ProTitle>
-            <ProText style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}>
+            <div>
+              <ProText
+                style={{
+                  fontWeight: 500,
+                  fontStyle: "Medium",
+                  fontSize: 16,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  textAlign: "center",
+                  color: "#333333",
+                }}
+              >
+                {t("cart.rewardYourWaiter")}
+              </ProText>
+            </div>
+            <ProText
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: 12,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#5F6C7B",
+              }}
+            >
              {t("cart.rewardYourWaiter100")}
            </ProText>
          </div>
@@ -74,41 +95,66 @@ export default function RewardWaiterCard() {
            style={{
              borderRadius: 100,
              height: 32,
-              borderColor: "rgba(255, 183, 0, 0.12)",
-              backgroundColor: colors.primary,
-              color: colors.primary,
-            }}
-          >
-            <ArabicPrice price={0.5} />
-          </Button>
-          <Button
-            style={{
-              borderRadius: 100,
-              height: 32,
-              backgroundColor: "#5F6C7B0D",
-              color: "rgba(95, 108, 123, 1)",
              border: "none",
+              backgroundColor: "#5F6C7B0D",
            }}
          >
-            <ArabicPrice price={1.0} />
+            <ArabicPrice
+              price={0.5}
+              textStyle={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#5F6C7B",
+              }}
+            />
          </Button>
          <Button
            style={{
              borderRadius: 100,
              height: 32,
-              color: colors.primary,
-              borderColor: "#d9d9d9",
+              border: "none",
+              backgroundColor: "#5F6C7B0D",
            }}
-            onClick={() => setIsTipOpen(true)}
          >
-            <EditIcon />
-            <ProText
-              style={{
-                color: colors.primary,
+            <ArabicPrice
+              price={1.0}
+              textStyle={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#5F6C7B",
              }}
-            >
-              {t("cart.other")}
-            </ProText>
+            />
+          </Button>
+          <Button
+            style={{
+              borderRadius: 100,
+              height: 32,
+              border: "none",
+              backgroundColor: "#FFB7001F",
+            }}
+            icon={<EditIcon className={styles.editIcon} />}
+            iconPlacement="end"
+          >
+            <ArabicPrice
+              price={3.0}
+              textStyle={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#CC9300",
+              }}
+            />
          </Button>
        </div>
      </Card>
--- a/src/pages/checkout/components/CheckoutButton.tsx
+++ b/src/pages/checkout/components/CheckoutButton.tsx
@@ -58,6 +58,17 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
    [orderType],
  );

+  const getSplitButtonTitle = useMemo(() => {
+    if (selectedSplitWay === "customAmount") {
+      return t("splitBill.customAmount");
+    } else if (selectedSplitWay === "equality") {
+      return t("splitBill.divideEqually");
+    } else if (selectedSplitWay === "payForItems") {
+      return t("splitBill.payForItems");
+    }
+    return t("checkout.splitBill");
+  }, [selectedSplitWay, t]);
+
  return (
    <>
      <Layout.Footer className={styles.checkoutButtonContainer}>
@@ -66,9 +77,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
            className={styles.splitBillButton}
            onClick={handleSplitBillClick}
          >
-            {selectedSplitWay
-              ? t("checkout.removeSplitBill")
-              : t("checkout.splitBill")}
+            {getSplitButtonTitle}
          </Button>
        )}

--- a/src/pages/checkout/components/CustomerInformationCard.module.css
+++ b/src/pages/checkout/components/CustomerInformationCard.module.css
@@ -1,3 +1,5 @@
 .customerInformationCard {
-  height: 215px !important;
-}
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
--- a/src/pages/checkout/components/CustomerInformationCard.tsx
+++ b/src/pages/checkout/components/CustomerInformationCard.tsx
@@ -16,12 +16,9 @@ export default function CustomerInformationCard() {
  return (
    orderType !== OrderType.Gift && (
      <>
-        <ProInputCard
-          title={t("checkout.customerInformation")}
-          className={styles.customerInformationCard}
-        >
-          <div style={{ position: "relative", top: -25 }}>
-            <Form.Item label={t("checkout.customerName")} name="customerName">
+        <ProInputCard title={t("checkout.customerInformation")}>
+          <div className={styles.customerInformationCard}>
+            <Form.Item name="customerName">
              <Input
                placeholder={t("checkout.customerName")}
                size="large"
@@ -33,9 +30,7 @@ export default function CustomerInformationCard() {
                }}
              />
            </Form.Item>
-          </div>
-          <div style={{ position: "relative", top: -35 }}>
-            <ProPhoneInput label={t("login.phone")} propName="phone" />
+            <ProPhoneInput propName="phone" />
          </div>
        </ProInputCard>
      </>
--- a/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
@@ -71,7 +71,7 @@ export function CustomAmountChoiceBottomSheet({
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
-      title={t("splitBill.payAsCustomAmount")}
+      title={t("splitBill.customAmount")}
      showCloseButton={true}
      initialSnap={1}
      height={425}
--- a/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
@@ -67,7 +67,7 @@ export function EqualltyChoiceBottomSheet({
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
-      title={t("splitBill.divideTheBillEqually")}
+      title={t("splitBill.divideEqually")}
      showCloseButton={true}
      initialSnap={1}
      height={630}
--- a/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
@@ -69,7 +69,7 @@ export function PayForYourItemsChoiceBottomSheet({
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
-      title={t("splitBill.payForYourItems")}
+      title={t("splitBill.payForItems")}
      showCloseButton={true}
      initialSnap={1}
      height={720}
--- a/src/pages/restaurant/RestaurantServices.tsx
+++ b/src/pages/restaurant/RestaurantServices.tsx
@@ -237,6 +237,8 @@ export default function RestaurantServices() {
                      letterSpacing: "0%",
                      verticalAlign: "middle",
                      color: "#434E5C",
+                      position: "relative",
+                      top: -1
                    }}
                  >
                    {s?.title}
--- a/src/pages/restaurant/restaurant.module.css
+++ b/src/pages/restaurant/restaurant.module.css
@@ -975,6 +975,7 @@
 }

 .scheduledOrderIcon {
-  margin-top: -2px;
+  position: relative;
+  top: 1px;
  font-size: 22px;
 }