EqualltyChoiceBottomSheet: update UI

src/components/ActionsButtons/ActionsButtons.module.css

@@ -1,7 +1,7 @@
 .quantityControls {
   display: flex;
   align-items: center;
-  background-color: #ffb70014;
+  background-color: var(--background);
   border-radius: 888px;
   width: fit-content;
 }
@@ -15,7 +15,7 @@
 .quantityInputContainer {
   display: flex;
   align-items: center;
-  padding: 8px;
+  padding: 0 1px;
   border-radius: 888px;
   width: 100px;
   height: 32px;
@@ -77,10 +77,15 @@
 }
 
 .plusIcon {
-margin-bottom: 1px;
+  margin-bottom: 1px;
+  color: var(--secondary-background);
+}
+
+.minusIcon {
+  color: var(--secondary-foreground);
 }
 
 .deleteIcon {
   position: relative;
   right: 1px;
-}
+}

src/components/ActionsButtons/ActionsButtons.tsx

@@ -1,7 +1,6 @@
-import { MinusOutlined } from "@ant-design/icons";
+import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
 import { Button, Grid, InputNumber, Popconfirm } from "antd";
 import DeleteIcon from "components/Icons/DeleteIcon";
-import PlusIcon from "components/Icons/PlusIcon";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import { colors } from "../../ThemeConstants";
@@ -51,14 +50,19 @@ export default function ActionsButtons({
         <div className={styles.quantityInputContainer}>
           {quantity > 0 ? (
             <Button
-              type="text"
+              shape="circle"
+              iconPlacement="start"
+              icon={<MinusOutlined title="add" className={styles.minusIcon} />}
               size="small"
               onClick={() => setQuantity(Math.max(1, quantity - 1))}
               className={styles.quantityButton}
               {...(min && { disabled: quantity === min })}
-            >
-              <MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
-            </Button>
+              style={{
+                width: 28,
+                height: 28,
+                border: "none",
+              }}
+            />
           ) : (
             <Popconfirm
               title={t("cart.deleteConfirmation.title")}
@@ -70,17 +74,20 @@ export default function ActionsButtons({
               placement={isRTL ? "left" : "right"}
               styles={{
                 root: getPopconfirmOverlayStyle(),
-                body: {
-                  padding: xs ? "12px" : "16px",
-                },
               }}
             >
               <Button
-                type="text"
+                shape="circle"
+                iconPlacement="start"
+                icon={<DeleteIcon />}
                 size="small"
-                danger
-                icon={<DeleteIcon className={styles.deleteIcon} />}
-                className={styles.removeButton}
+                className={styles.addButton}
+                style={{
+                  background: "#FEF2F2",
+                  width: 28,
+                  height: 28,
+                  border: "none",
+                }}
               />
             </Popconfirm>
           )}
@@ -88,21 +95,27 @@ export default function ActionsButtons({
             min={min || 1}
             max={max || 100}
             value={quantity || 1}
-            onChange={(value) => setQuantity(value || 1)}
+            onChange={(value: number | null) => setQuantity(value || 1)}
             size="small"
             controls={false}
             className={styles.quantityInput}
             name="id"
           />
           <Button
-            type="text"
+            shape="circle"
+            iconPlacement="start"
+            icon={<PlusOutlined title="add" className={styles.plusIcon} />}
             size="small"
             onClick={() => setQuantity(Math.min(100, quantity + 1))}
             className={styles.quantityButton}
             {...(max && { disabled: quantity >= max })}
-          >
-            <PlusIcon className={styles.plusIcon} />
-          </Button>
+            style={{
+              backgroundColor: colors.primary,
+              width: 28,
+              height: 28,
+              border: "none",
+            }}
+          />
         </div>
       </div>
     </div>

src/components/CartActionsButtons/CartActionsButtons.module.css

@@ -56,7 +56,6 @@
   position: absolute;
   top: 12px;
   right: 12px;
-  background-color: #ffb70014;
   border-radius: 50%;
   padding: 8px;
   cursor: pointer;

src/components/CartActionsButtons/CartActionsButtons.tsx

@@ -46,7 +46,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
           {item.quantity > 1 ? (
             <Button
               shape="circle"
-              iconPosition="start"
+              iconPlacement="start"
               icon={<MinusOutlined title="add" className={styles.minusIcon} />}
               size="small"
               onClick={() =>
@@ -76,14 +76,11 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
               placement={isRTL ? "left" : "right"}
               styles={{
                 root: getPopconfirmOverlayStyle(),
-                body: {
-                  padding: isMobile ? "12px" : "16px",
-                },
               }}
             >
               <Button
                 shape="circle"
-                iconPosition="start"
+                iconPlacement="start"
                 icon={<DeleteIcon />}
                 size="small"
                 onClick={() =>
@@ -109,7 +106,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
             min={1}
             max={100}
             value={item.quantity || 1}
-            onChange={(value: number) =>
+            onChange={(value: number | null) =>
               dispatch(
                 updateQuantity({
                   id: item.id,
@@ -125,7 +122,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
           />
           <Button
             shape="circle"
-            iconPosition="start"
+            iconPlacement="start"
             icon={<PlusOutlined title="add" className={styles.plusIcon} />}
             size="small"
             onClick={() =>