working on car card & car view BS

src/components/CustomBottomSheet/CustomBottomSheet.module.css

@@ -17,8 +17,6 @@
   width: 100%;
 }
 
-
-
 .serviceIcon path {
   stroke: #ea1f22;
 }
@@ -32,3 +30,96 @@
   width: 24px;
   height: 24px;
 }
+
+/* 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%;
+}
+
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-inner::after) {
+  left: auto;
+  right: 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;
+}
+
+:global(.ant-app-rtl)
+  .circleCheckbox
+  :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}
+
+/* Apply same circular style to Radio buttons */
+.radioCheckbox :global(.ant-radio-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #d5d8da;
+  background: transparent;
+}
+
+.radioCheckbox :global(.ant-radio-checked .ant-radio-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+.radioCheckbox :global(.ant-radio-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+:global(.ant-app-rtl) .radioCheckbox :global(.ant-radio-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
+.radioCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}
+
+:global(.ant-app-rtl)
+  .radioCheckbox
+  :global(.ant-radio-checked .ant-radio-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}

src/components/CustomBottomSheet/TipBottomSheet.tsx

@@ -1,10 +1,11 @@
-import { Button, Input } from "antd";
+import { Button, Input, InputNumber } from "antd";
 import WaiterRewardingIcon from "components/Icons/waiter/WaiterRewardingIcon";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
 import { updateTip } from "features/order/orderSlice";
 import { useAppDispatch } from "redux/hooks";
+import ProText from "components/ProText";
 
 interface TipBottomSheetProps {
   isOpen: boolean;
@@ -42,8 +43,8 @@ export function TipBottomSheet({
       onClose={handleCancel}
       title={t("cart.tip")}
       initialSnap={1}
-      height={370}
-      snapPoints={[370]}
+      height={380}
+      snapPoints={[380]}
     >
       <div
         style={{
@@ -51,29 +52,43 @@ export function TipBottomSheet({
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
+          gap: 10,
         }}
       >
         <div style={{ marginTop: 20 }}>
           <WaiterRewardingIcon />
         </div>
 
-        <br />
+        <ProText
+          style={{
+            fontWeight: 400,
+            fontStyle: "Regular",
+            fontSize: 16,
+            lineHeight: "140%",
+            letterSpacing: "0%",
+            color: "#333333",
+            textAlign: "left",
+            width: "100%",
+          }}
+        >
+          {t("cart.amount")}
+        </ProText>
 
-        <Input
+        <InputNumber
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={(value) => setValue(value?.toString() || "")}
           placeholder={t("cart.amount")}
           autoFocus={false}
           size="large"
-          style={{ height: 48 }}
+          style={{ height: 48, width: "100%", marginBottom: 8 }}
+          min={"0"}
         />
 
-        <br />
-
         <Button
           type="primary"
           style={{ width: "100%", height: 48 }}
           onClick={handleSave}
+          disabled={value === "" || parseFloat(value) <= 0}
         >
           {t("cart.addTip")}
         </Button>

src/components/Icons/PlusIcon.tsx

@@ -1,15 +1,15 @@
 interface PlusIconType {
   className?: string;
   onClick?: () => void;
-  dimesion?: string
+  dimension?: string
   color?: string
 }
 
-const PlusIcon = ({ className, onClick, dimesion, color }: PlusIconType) => {
+const PlusIcon = ({ className, onClick, dimension, color }: PlusIconType) => {
   return (
     <svg
-      width={dimesion || "16"}
-      height={dimesion || "16"}
+      width={dimension || "16"}
+      height={dimension || "16"}
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"