working on tip card and BS

src/pages/cart/cart.module.css

@@ -602,12 +602,16 @@
   top: 1px;
 }
 
-.editIcon {
+.editIconOnSide {
   position: absolute;
   top: -7px;
   right: 5px;
 }
 
+.editIconMiddle {
+  position: relative;
+}
+
 :global(.ant-app-rtl) .editIcon {
   right: auto;
   left: 5px;

src/pages/cart/components/RewardWaiterCard.tsx

@@ -5,11 +5,10 @@ import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
 import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
 import EditIcon from "components/Icons/EditIcon.tsx";
 import ProText from "components/ProText.tsx";
-import ProTitle from "components/ProTitle.tsx";
 import { selectCart, updateTip } from "features/order/orderSlice.ts";
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import styles from "pages/cart/cart.module.css";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 
@@ -18,12 +17,18 @@ export default function RewardWaiterCard() {
   const dispatch = useAppDispatch();
   const { tip } = useAppSelector(selectCart);
   const { isDesktop } = useBreakPoint();
+  const [selectedTip, setSelectedTip] = useState<number | null>(null);
 
   const [isTipOpen, setIsTipOpen] = useState(false);
 
-  const handleTipSave = (value: string) => {
-    dispatch(updateTip(value));
-    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
+  const isDefaultTip = useMemo(() => {
+    const amount = parseFloat(tip);
+    return amount === 0.5 || amount === 1.0 || amount === 3.0;
+  }, [tip]);
+
+  const handleTipClick = (value: number) => {
+    setSelectedTip(value);
+    dispatch(updateTip(value.toString()));
   };
 
   const handleTipClose = () => {
@@ -86,9 +91,9 @@ export default function RewardWaiterCard() {
         <Divider style={{ margin: "15px 0 15px 0" }} />
         <div
           style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-around",
+            display: "grid",
+            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+            gap: 16,
           }}
         >
           <Button
@@ -96,8 +101,11 @@ export default function RewardWaiterCard() {
               borderRadius: 100,
               height: 32,
               border: "none",
-              backgroundColor: "#5F6C7B0D",
+              backgroundColor:
+                selectedTip === 0.5 && isDefaultTip ? "#FFB7001F" : "#5F6C7B0D",
             }}
+            iconPlacement="end"
+            onClick={() => handleTipClick(0.5)}
           >
             <ArabicPrice
               price={0.5}
@@ -108,7 +116,8 @@ export default function RewardWaiterCard() {
                 lineHeight: "140%",
                 letterSpacing: "0%",
                 textAlign: "center",
-                color: "#5F6C7B",
+                color:
+                  selectedTip === 0.5 && isDefaultTip ? "#CC9300" : "#5F6C7B",
               }}
             />
           </Button>
@@ -117,8 +126,10 @@ export default function RewardWaiterCard() {
               borderRadius: 100,
               height: 32,
               border: "none",
-              backgroundColor: "#5F6C7B0D",
+              backgroundColor:
+                selectedTip === 1 && isDefaultTip ? "#FFB7001F" : "#5F6C7B0D",
             }}
+            onClick={() => handleTipClick(1)}
           >
             <ArabicPrice
               price={1.0}
@@ -129,7 +140,8 @@ export default function RewardWaiterCard() {
                 lineHeight: "140%",
                 letterSpacing: "0%",
                 textAlign: "center",
-                color: "#5F6C7B",
+                color:
+                  selectedTip === 1 && isDefaultTip ? "#CC9300" : "#5F6C7B",
               }}
             />
           </Button>
@@ -137,24 +149,31 @@ export default function RewardWaiterCard() {
             style={{
               borderRadius: 100,
               height: 32,
-              border: "none",
-              backgroundColor: "#FFB7001F",
+              backgroundColor: tip && !isDefaultTip ? "#FFB7001F" : "inherit",
+              border: tip && !isDefaultTip ? "none" : "1px solid #C0BFC4",
             }}
-            icon={<EditIcon className={styles.editIcon} />}
-            iconPlacement="end"
+            icon={
+              <EditIcon
+                className={styles.editIcon}
+                color={tip && !isDefaultTip ? "#CC9300" : "#3D3B4A"}
+              />
+            }
+            iconPlacement="start"
+            onClick={() => setIsTipOpen(true)}
           >
-            <ArabicPrice
-              price={3.0}
-              textStyle={{
+            <ProText
+              style={{
+                color: tip && !isDefaultTip ? "#CC9300" : "#FFB700",
                 fontWeight: 500,
                 fontStyle: "Medium",
                 fontSize: 14,
                 lineHeight: "140%",
                 letterSpacing: "0%",
                 textAlign: "center",
-                color: "#CC9300",
               }}
-            />
+            >
+              {tip && !isDefaultTip ? tip : t("cart.other")}
+            </ProText>
           </Button>
         </div>
       </Card>
@@ -163,14 +182,12 @@ export default function RewardWaiterCard() {
           isOpen={isTipOpen}
           onClose={handleTipClose}
           initialValue={tip}
-          onSave={handleTipSave}
         />
       ) : (
         <TipBottomSheet
           isOpen={isTipOpen}
           onClose={handleTipClose}
           initialValue={tip}
-          onSave={handleTipSave}
         />
       )}
     </>