update footer BS height & enhnace custom split bill BS styles

src/components/ArabicPrice/ArabicPrice.tsx

@@ -9,6 +9,7 @@ interface ArabicPriceProps {
   type?: "secondary" | "success" | "warning" | "danger";
   className?: string;
   hideCurrency?: boolean;
+  textStyle?: React.CSSProperties;
 }
 
 const ArabicPrice: React.FC<ArabicPriceProps> = ({
@@ -18,6 +19,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
   type,
   className,
   hideCurrency = false,
+  textStyle = {},
 }) => {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { restaurant } = useAppSelector((state) => state.order);
@@ -49,6 +51,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
               lineHeight: 1,
               fontSize: "14px",
               ...(decorationStyle ?? {}),
+              ...textStyle,
             }}
           >
             {formattedPrice}
@@ -62,6 +65,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
               position: "relative",
               top: -3,
               ...(decorationStyle ?? {}),
+              ...textStyle,
             }}
           >
             {isRTL ? restaurant.local_currency : restaurant.global_currency}
@@ -76,6 +80,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
               display: "inline-block",
               fontSize: "14px",
               ...(decorationStyle ?? {}),
+              ...textStyle,
             }}
           >
             {formattedPrice}
@@ -88,13 +93,16 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
               lineHeight: 1,
               display: "inline-block",
               ...(decorationStyle ?? {}),
+              ...textStyle,
             }}
           >
             {isRTL ? restaurant.local_currency : restaurant.global_currency}
           </span>
         </>
       ) : (
-        <span style={decorationStyle}>{formattedPrice}</span>
+        <span style={{ ...decorationStyle, ...textStyle }}>
+          {formattedPrice}
+        </span>
       )}
     </ProText>
   );

src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx

@@ -122,7 +122,7 @@ export function CancelOrderBottomSheet() {
           >
             <Button
               type="primary"
-              style={{ width: "100%", height: 50, color: "#FFF" }}
+              style={{ width: "100%", height: 48, color: "#FFF" }}
               onClick={handleKeepOrder}
             >
               {t("order.keepOrder")}
@@ -132,7 +132,7 @@ export function CancelOrderBottomSheet() {
               type="primary"
               style={{
                 width: "100%",
-                height: 50,
+                height: 48,
                 color: "#ea1f22",
                 borderColor: "#ea1f22",
                 backgroundColor: "#fff",

src/components/CustomBottomSheet/DatePickerBottomSheet.tsx

@@ -277,7 +277,7 @@ export default function DatePickerBottomSheet({
 
         <Button
           type="primary"
-          style={{ width: "100%", height: 50, marginTop: 10 }}
+          style={{ width: "100%", height: 48, marginTop: 10 }}
           onClick={handleConfirm}
         >
           {t("common.confirm")}

src/components/CustomBottomSheet/InfoButtonSheet.tsx

@@ -50,7 +50,7 @@ export function InfoButtonSheet({
         <ProText type="secondary" style={{textAlign:"center"}}>{description}</ProText>
       </div>
       <br />
-      <Button type="primary" style={{ width: "100%", boxShadow: "none" }} onClick={handleSave}>
+      <Button type="primary" style={{ width: "100%", boxShadow: "none", height: 48 }} onClick={handleSave}>
         {t("address.gotIt")}
       </Button>
     </ProBottomSheet>

src/components/CustomBottomSheet/MapBottomSheet.module.css

@@ -62,5 +62,5 @@
 
 .actionButton {
   flex: 1;
-  height: 50px;
+  height: 48px;
 }

src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx

@@ -205,7 +205,7 @@ export function OpeningTimesBottomSheet({
       </div>
       <Button
         type="primary"
-        style={{ width: "100%", height: 50 }}
+        style={{ width: "100%", height: 48 }}
         onClick={onClose}
       >
         {t("menu.close")}

src/components/CustomBottomSheet/RateBottomSheet.tsx

@@ -231,7 +231,7 @@ export function RateBottomSheet() {
               type="primary"
               style={{
                 width: "100%",
-                height: 50,
+                height: 48,
                 color: colors.primary,
                 borderColor: colors.primary,
                 backgroundColor: "#fff",

src/components/CustomBottomSheet/TipBottomSheet.tsx

@@ -70,7 +70,7 @@ export function TipBottomSheet({
 
         <Button
           type="primary"
-          style={{ width: "100%", height: 50 }}
+          style={{ width: "100%", height: 48 }}
           onClick={handleSave}
         >
           {t("cart.addTip")}

src/components/Inputs/ProInputNumber.tsx

@@ -0,0 +1,20 @@
+import { InputNumber, InputNumberProps } from "antd";
+
+export const ProInputNumber = (props: InputNumberProps) => {
+  return (
+    <InputNumber
+      style={{
+        fontFamily: "Outfit",
+        fontWeight: 400,
+        fontStyle: "Regular",
+        fontSize: 12,
+        lineHeight: "140%",
+        letterSpacing: "0%",
+        height: 48,
+        width: "100%",
+      }}
+      min={"0"}
+      {...props}
+    />
+  );
+};

src/components/ProBottomSheet/ProBottomSheet.tsx

@@ -213,7 +213,9 @@ export function ProBottomSheet({
     bottom: 0,
     height: snapPoints[currentSnap] || height,
     backgroundColor:
-      themeName === "dark" ? darkColors.bgColor : lightColors.bgColor,
+      themeName === "dark"
+        ? darkColors.secondaryBgColor
+        : lightColors.secondaryBgColor,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     boxShadow:
@@ -259,7 +261,9 @@ export function ProBottomSheet({
     overflow: "auto",
     padding: "0 20px",
     backgroundColor:
-      themeName === "dark" ? darkColors.bgColor : lightColors.bgColor,
+      themeName === "dark"
+        ? darkColors.secondaryBgColor
+        : lightColors.secondaryBgColor,
     color: themeName === "dark" ? "#ffffff" : "#000000",
     ...contentStyle,
   };