cart: enhance actions buttons and enhance go to cart btn UI

src/components/CartActionsButtons/CartActionsButtons.module.css

@@ -1,12 +1,11 @@
 .quantityControls {
   display: flex;
   align-items: center;
-  background-color: #ffb70014;
+  background-color: var(--background);
   border-radius: 888px;
   width: fit-content;
 }
 
-
 .quantityLabel {
   font-size: 14px;
   color: var(--secondary-color);
@@ -15,8 +14,8 @@
 
 .quantityInputContainer {
   display: flex;
+  padding: 0 1px;
   align-items: center;
-  padding: 8px;
   border-radius: 888px;
   width: 90px;
   height: 32px;
@@ -24,12 +23,14 @@
 
 .quantityButton {
   padding: 0;
-  width: 25px;
-  height: 32px;
+  width: 28px !important;
+  height: 28px !important;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--secondary-color);
+  color: var(--secondary-background);
+  background-color: var(--primary);
+  border-radius: 50%;
   transition: all 0.2s ease;
 }
 
@@ -78,10 +79,15 @@
 }
 
 .plusIcon {
-margin-bottom: 1px;
+  margin-bottom: 1px;
+  color: var(--secondary-background);
+}
+
+.minusIcon{
+  color: var(--secondary-foreground);
 }
 
 .deleteIcon {
   position: relative;
   right: 1px;
-}
+}

src/components/CartActionsButtons/CartActionsButtons.tsx

@@ -1,7 +1,6 @@
-import { MinusOutlined } from "@ant-design/icons";
+import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
 import { Button, InputNumber, Popconfirm } from "antd";
 import DeleteIcon from "components/Icons/DeleteIcon";
-import PlusIcon from "components/Icons/PlusIcon";
 import { removeItem, updateQuantity } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch } from "redux/hooks";
@@ -46,20 +45,31 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
         <div className={styles.quantityInputContainer}>
           {item.quantity > 1 ? (
             <Button
-              type="text"
+              shape="circle"
+              iconPosition="start"
+              icon={<MinusOutlined title="add" className={styles.minusIcon} />}
               size="small"
               onClick={() =>
-                dispatch(updateQuantity({ id: item.id, uniqueId: item.uniqueId || '', quantity: Math.max(1, item.quantity - 1) }))
+                dispatch(
+                  updateQuantity({
+                    id: item.id,
+                    uniqueId: item.uniqueId || "",
+                    quantity: Math.max(1, item.quantity - 1),
+                  }),
+                )
               }
-              className={styles.quantityButton}
-            >
-              <MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
-            </Button>
+              className={styles.addButton}
+              style={{
+                width: 28,
+                height: 28,
+                border: "none",
+              }}
+            />
           ) : (
             <Popconfirm
               title={t("cart.deleteConfirmation.title")}
               description={t("cart.deleteConfirmation.content")}
-              onConfirm={() => handleDeleteItem(item.uniqueId || '')}
+              onConfirm={() => handleDeleteItem(item.uniqueId || "")}
               okText={t("cart.deleteConfirmation.confirm")}
               cancelText={t("cart.deleteConfirmation.cancel")}
               okButtonProps={{ danger: true }}
@@ -72,11 +82,26 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
               }}
             >
               <Button
-                type="text"
+                shape="circle"
+                iconPosition="start"
+                icon={<DeleteIcon />}
                 size="small"
-                danger
-                icon={<DeleteIcon className={styles.deleteIcon} />}
-                className={styles.removeButton}
+                onClick={() =>
+                  dispatch(
+                    updateQuantity({
+                      id: item.id,
+                      uniqueId: item.uniqueId || "",
+                      quantity: Math.max(1, item.quantity - 1),
+                    }),
+                  )
+                }
+                className={styles.addButton}
+                style={{
+                  background: "#FEF2F2",
+                  width: 28,
+                  height: 28,
+                  border: "none",
+                }}
               />
             </Popconfirm>
           )}
@@ -84,22 +109,42 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
             min={1}
             max={100}
             value={item.quantity || 1}
-            onChange={(value) => dispatch(updateQuantity({ id: item.id, uniqueId: item.uniqueId || '', quantity: value || 1 }))}
+            onChange={(value) =>
+              dispatch(
+                updateQuantity({
+                  id: item.id,
+                  uniqueId: item.uniqueId || "",
+                  quantity: value || 1,
+                }),
+              )
+            }
             size="small"
             controls={false}
             className={styles.quantityInput}
             name="id"
           />
           <Button
-            type="text"
+            shape="circle"
+            iconPosition="start"
+            icon={<PlusOutlined title="add" className={styles.plusIcon} />}
             size="small"
             onClick={() =>
-              dispatch(updateQuantity({ id: item.id, uniqueId: item.uniqueId || '', quantity: Math.min(100, item.quantity + 1) }))
+              dispatch(
+                updateQuantity({
+                  id: item.id,
+                  uniqueId: item.uniqueId || "",
+                  quantity: Math.min(100, item.quantity + 1),
+                }),
+              )
             }
-            className={styles.quantityButton}
-          >
-            <PlusIcon className={styles.plusIcon} />
-          </Button>
+            className={styles.addButton}
+            style={{
+              backgroundColor: colors.primary,
+              width: 28,
+              height: 28,
+              border: "none",
+            }}
+          />
         </div>
       </div>
     </div>