cart & checkout: UI enhacnements

src/components/CartActionsButtons/CartActionsButtons.tsx

@@ -104,7 +104,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
           )}
           <InputNumber
             min={1}
-            max={100}
+            max={99}
             value={item.quantity || 1}
             onChange={(value: number | null) =>
               dispatch(

src/components/CustomBottomSheet/TipBottomSheet.tsx

@@ -42,7 +42,7 @@ export function TipBottomSheet({
       showCloseButton={false}
       initialSnap={1}
       height={370}
-      snapPoints={["30vh"]}
+      snapPoints={[370]}
     >
       <div
         style={{
@@ -52,7 +52,9 @@ export function TipBottomSheet({
           justifyContent: "center",
         }}
       >
-        <WaiterRewardingIcon />
+        <div style={{ marginTop: 20 }}>
+          <WaiterRewardingIcon />
+        </div>
 
         <br />
 

src/components/Icons/DeleteIcon.tsx

@@ -1,22 +1,26 @@
 interface DeleteIconType {
   className?: string;
   onClick?: () => void;
+  color?: string;
+  dimension?: number;
 }
 
-const DeleteIcon = ({ className, onClick }: DeleteIconType) => {
+const DeleteIcon = ({ className, onClick, color, dimension }: DeleteIconType) => {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width={dimension || "14"}
+      height={dimension || "14"}
+      viewBox="0 0 14 14"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       onClick={onClick}
     >
       <path
-        d="M3 2.4V0.6C3 0.44087 3.06321 0.288258 3.17574 0.175736C3.28826 0.0632141 3.44087 0 3.6 0H8.4C8.55913 0 8.71174 0.0632141 8.82426 0.175736C8.93679 0.288258 9 0.44087 9 0.6V2.4H12V3.6H10.8V11.4C10.8 11.5591 10.7368 11.7117 10.6243 11.8243C10.5117 11.9368 10.3591 12 10.2 12H1.8C1.64087 12 1.48826 11.9368 1.37574 11.8243C1.26321 11.7117 1.2 11.5591 1.2 11.4V3.6H0V2.4H3ZM6.8484 7.2L7.9092 6.1392L7.0608 5.2908L6 6.3516L4.9392 5.2908L4.0908 6.1392L5.1516 7.2L4.0908 8.2608L4.9392 9.1092L6 8.0484L7.0608 9.1092L7.9092 8.2608L6.8484 7.2ZM4.2 1.2V2.4H7.8V1.2H4.2Z"
-        fill="#DC2626"
+        d="M11.375 3.20866L11.0133 9.05658C10.9212 10.5505 10.8751 11.2977 10.5 11.835C10.3148 12.1005 10.0764 12.3246 9.8 12.493C9.24175 12.8337 8.49333 12.8337 6.9965 12.8337C5.49733 12.8337 4.74775 12.8337 4.18833 12.4924C3.91177 12.3237 3.67337 12.0992 3.48833 11.8332C3.11383 11.2954 3.06833 10.547 2.9785 9.05074L2.625 3.20866M1.75 3.20866H12.25M9.366 3.20866L8.96758 2.38733C8.70333 1.84133 8.57092 1.56891 8.34283 1.39858C8.29217 1.36084 8.23852 1.32729 8.18242 1.29824C7.92983 1.16699 7.6265 1.16699 7.02042 1.16699C6.39858 1.16699 6.08767 1.16699 5.83042 1.30349C5.77355 1.33395 5.71931 1.36907 5.66825 1.40849C5.43783 1.58524 5.30892 1.86816 5.05108 2.43341L4.69758 3.20866M5.54167 9.62533V6.12533M8.45833 9.62533V6.12533"
+        stroke={color || "#DD4143"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
       />
     </svg>
   );

src/components/Icons/PlusIcon.tsx

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

src/components/InputCard.tsx

@@ -32,7 +32,7 @@ export default function InputCard({
             placeholder={placeholder}
             size="large"
             autoFocus={false}
-            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+            style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
             value={value}
             onChange={handleChange}
           />

src/components/PaymentMethods/PaymentMethods.tsx

@@ -88,7 +88,7 @@ const PaymentMethods = () => {
           }}
           size="large"
         >
-          <Space orientation="vertical" style={{ width: "100%" }}>
+          <Space orientation="vertical" style={{ width: "100%", gap: 16 }}>
             {options.map((option) => (
               <div key={option.value}>
                 <Radio
@@ -96,7 +96,7 @@ const PaymentMethods = () => {
                   value={option.value}
                   onClick={() => onPaymentSelect(option.value)}
                   style={{
-                    height: 50,
+                    height: 48,
                     borderRadius: 888,
                     border: "1px solid #DDD",
                     padding: 16,

src/components/ProPhoneInput.tsx

@@ -86,7 +86,7 @@ export const PhoneInputWrapper = ({
   const inputStyle = useMemo(
     () => ({
       borderRadius: 1000,
-      height: 50,
+      height: 48,
       width: "100%",
       color: themeName === "light" ? "#000" : "#FFF",
       backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,

src/components/ProRatioGroups/ProRatioGroups.tsx

@@ -37,9 +37,15 @@ const ProRatioGroups = ({
         onChange={handleChange}
         {...props}
       >
-        <Space direction="vertical" style={{ width: "100%" }}>
+        <Space orientation="vertical" style={{ width: "100%" }}>
           {options.map((option) => (
-            <Radio key={option.value} value={option.value}>
+            <Radio
+              key={option.value}
+              value={option.value}
+              // style={{
+              //   height: 48,
+              // }}
+            >
               <div
                 style={{
                   display: "flex",