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;
+  width: 28px !important;
-  height: 32px;
+  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}
+              className={styles.addButton}
-            >
+              style={{
-              <MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
+                width: 28,
-            </Button>
+                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
+                onClick={() =>
-                icon={<DeleteIcon className={styles.deleteIcon} />}
+                  dispatch(
-                className={styles.removeButton}
+                    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}
+            className={styles.addButton}
-          >
+            style={{
-            <PlusIcon className={styles.plusIcon} />
+              backgroundColor: colors.primary,
-          </Button>
+              width: 28,
+              height: 28,
+              border: "none",
+            }}
+          />
         </div>
       </div>
     </div>

src/components/Icons/BackIcon.tsx

@@ -4,11 +4,12 @@ import { ProGray1 } from "ThemeConstants";
 interface BackIconType {
   className?: string;
   onClick?: () => void;
+  iconColor?: string;
 }
 
-const BackIcon = ({ className, onClick }: BackIconType) => {
+const BackIcon = ({ className, onClick, iconColor }: BackIconType) => {
   const { themeName } = useAppSelector((state) => state.theme);
-  const color = themeName === "dark" ? "white" : ProGray1;
+  const color = iconColor || (themeName === "dark" ? "white" : ProGray1);
   return (
     <svg
       width="16"

src/components/Icons/cart/CartIcon.tsx

@@ -6,20 +6,19 @@ interface CartType {
 const CartIcon = ({ className, onClick }: CartType) => {
   return (
     <svg
-      width="22px"
+      width="28"
-      height="22px"
+      height="24"
-      viewBox="0 0 16 16"
+      viewBox="0 0 28 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       onClick={onClick}
     >
       <path
-        d="M11.1664 5.33333C11.1664 6.04058 10.8855 6.71885 10.3854 7.21895C9.88527 7.71905 9.20699 8 8.49975 8C7.7925 8 7.11422 7.71905 6.61413 7.21895C6.11403 6.71885 5.83308 6.04058 5.83308 5.33333M2.92189 4.93426L2.45522 10.5343C2.35497 11.7373 2.30485 12.3388 2.5082 12.8028C2.68687 13.2105 2.99643 13.5469 3.38787 13.7588C3.83339 14 4.43699 14 5.64417 14H11.3553C12.5625 14 13.1661 14 13.6116 13.7588C14.0031 13.5469 14.3126 13.2105 14.4913 12.8028C14.6946 12.3388 14.6445 11.7373 14.5443 10.5343L14.0776 4.93426C13.9913 3.89917 13.9482 3.38162 13.719 2.9899C13.5171 2.64496 13.2166 2.3684 12.8561 2.1959C12.4467 2 11.9273 2 10.8887 2L6.11084 2C5.07216 2 4.55282 2 4.14342 2.1959C3.78291 2.3684 3.48234 2.64496 3.2805 2.9899C3.05128 3.38162 3.00815 3.89917 2.92189 4.93426Z"
+        fillRule="evenodd"
-        stroke="white"
+        clipRule="evenodd"
-        strokeWidth="1.5"
+        d="M4.28072 1.00076C3.02082 2.00297 2.68807 3.69745 2.02409 7.08786L0.889727 12.881C-0.0434755 17.6487 -0.509321 20.0326 0.850403 21.6025C2.21164 23.1724 4.74354 23.1724 9.81036 23.1724L18.1895 23.1724C23.2563 23.1724 25.7882 23.1724 27.1495 21.6025C28.5107 20.0326 28.0418 17.6487 27.1102 12.881L25.9758 7.08786C25.3103 3.6989 24.9791 2.00297 23.7192 1.00076C22.4593 0 20.6579 0 17.0552 0L10.9447 0C7.34198 0 5.54062 0 4.28072 1.00076ZM10.7904 5.43248C11.025 6.06833 11.4597 6.61888 12.0346 7.0083C12.6096 7.39772 13.2965 7.60683 14.0007 7.60683C14.7049 7.60683 15.3918 7.39772 15.9668 7.0083C16.5417 6.61888 16.9764 6.06833 17.2109 5.43248C17.3167 5.16817 17.5261 4.95383 17.7944 4.83511C18.0628 4.71639 18.3689 4.70267 18.6477 4.79687C18.9265 4.89107 19.1558 5.08574 19.2869 5.33944C19.418 5.59314 19.4405 5.88583 19.3496 6.15517C18.9585 7.21435 18.2342 8.1314 17.2762 8.78001C16.3183 9.42863 15.1739 9.77692 14.0007 9.77692C12.8275 9.77692 11.6831 9.42863 10.7252 8.78001C9.76722 8.1314 9.04285 7.21435 8.6518 6.15517C8.59929 6.02008 8.5754 5.87634 8.5815 5.73232C8.58759 5.5883 8.62357 5.44688 8.68732 5.3163C8.75107 5.18572 8.84133 5.06861 8.95282 4.97177C9.06432 4.87493 9.19484 4.80031 9.33675 4.75226C9.47867 4.7042 9.62916 4.68368 9.77945 4.69188C9.92974 4.70007 10.0768 4.73683 10.2121 4.80001C10.3474 4.86319 10.4682 4.95152 10.5675 5.05986C10.6668 5.16819 10.7426 5.29582 10.7904 5.43248Z"
-        strokeLinecap="round"
+        fill="white"
-        strokeLinejoin="round"
       />
     </svg>
   );

src/pages/menu/components/CartButton/CartButton.tsx

@@ -6,6 +6,7 @@ import { useCallback } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import styles from "./CartButton.module.css";
+import ProText from "components/ProText";
 
 export function CartButton() {
   const { isRTL } = useAppSelector((state) => state.locale);
@@ -33,8 +34,10 @@ export function CartButton() {
         bottom: "20px",
         right: !isRTL ? "auto" : "20px",
         left: !isRTL ? "20px" : "auto",
+        display: 'flex',
+        flexDirection: "row",
+        justifyContent:"space-around"
       }}
-      className={"cart-button"}
     >
       <Badge count={totalItems} size="default" className={styles.badge}>
         <Button
@@ -46,6 +49,7 @@ export function CartButton() {
           className={`${styles.scrollToTopButton}`}
         />
       </Badge>
+      <ProText>Cart</ProText>
     </div>
   );
 }

src/pages/menu/components/MenuFooter/MenuFooter.tsx

@@ -1,7 +1,10 @@
 import { Badge, Button } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+import BackIcon from "components/Icons/BackIcon";
 import CartIcon from "components/Icons/cart/CartIcon";
+import NextIcon from "components/Icons/NextIcon";
 import ProText from "components/ProText";
-import { selectCartItems } from "features/order/orderSlice";
+import { selectCartItems, selectGrandTotal } from "features/order/orderSlice";
 import useBreakPoint from "hooks/useBreakPoint";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
@@ -17,6 +20,8 @@ export function MenuFooter() {
   const { subdomain } = useParams();
   const { orderType } = useAppSelector((s) => s.order);
   const totalItems = items.length;
+  const grandTotal = useAppSelector(selectGrandTotal);
+  const { isRTL } = useAppSelector((state) => state.locale);
 
   console.log(orderType);
 
@@ -48,45 +53,74 @@ export function MenuFooter() {
             style={{
               width: "100%",
               padding: "0 16px",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              backgroundColor: colors.primary,
+              height: 48,
+              borderRadius: "999px",
             }}
           >
             <Button
               type="primary"
               shape="round"
               style={{
-                width: "100%",
+                height: 48,
-                height: 50,
                 boxShadow: "none",
               }}
             >
               <Badge
                 count={totalItems}
                 size="default"
+                offset={ isRTL ? [-2, 18] : [2, 18]}
                 style={{
                   borderColor: colors.primary,
                   color: "white",
                   fontSize: isMobile ? 10 : 12,
                   width: isMobile ? 10 : 12,
                 }}
+  
               >
-                <ProText
-                  style={{
-                    color: "white",
-                    margin: "0 10px",
-                  }}
-                >
-                  { orderType === OrderType.Pay ? t("menu.pay") : t("menu.viewCart")}
-                </ProText>
                 <span
                   style={{
                     position: "relative",
-                    top: 4,
+                    top: 1,
                   }}
                 >
                   <CartIcon />
                 </span>
               </Badge>
+              <ProText
+                style={{
+                  color: "white",
+                  margin: "0 10px",
+                }}
+              >
+                {orderType === OrderType.Pay
+                  ? t("menu.pay")
+                  : t("menu.viewCart")}
+              </ProText>
             </Button>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 10,
+              }}
+            >
+              <ArabicPrice
+                price={grandTotal}
+                style={{
+                  color: "var(--secondary-background)",
+                }}
+              />
+              {!isRTL ? (
+                <NextIcon iconColor="var(--secondary-background)" />
+              ) : (
+                <BackIcon iconColor="var(--secondary-background)" />
+              )}
+            </div>
           </Link>
         </div>
       )}

src/pages/menu/menu.module.css

@@ -21,7 +21,7 @@
   gap: 16px;
 }
 
-.openCloseButton {
+.openButton {
   background: #9fffcc4d;
   color: #278655;
   width: 62px !important;
@@ -45,6 +45,31 @@
   gap: 5px;
 }
 
+
+.closeButton {
+  background: #DD41434d;
+  color: #DD4143;
+  width: 62px !important;
+  height: 20px !important;
+  border: none;
+  box-shadow: none;
+  overflow: hidden;
+  font-family: Outfit;
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 12px;
+  line-height: 140%;
+  letter-spacing: 0%;
+
+  opacity: 1;
+  border-radius: 2px;
+  padding-top: 4px;
+  padding-right: 9px;
+  padding-bottom: 4px;
+  padding-left: 9px;
+  gap: 5px;
+}
+
 /* .restaurantHeader {
   margin-bottom: 24px;
 } */

src/pages/menu/page.tsx

@@ -120,8 +120,17 @@ function MenuPage() {
                   {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
                 </ProTitle>
                 <Button
-                  className={styles.openCloseButton}
+                  className={
-                  icon={<NextIcon className={styles.openCloseIcon} iconColor="#278655" iconSize={9} />}
+                    restaurant?.isOpened
+                      ? styles.openButton
+                      : styles.closeButton
+                  }
+                  icon={
+                    <NextIcon
+                      iconColor={restaurant?.isOpened ? "#278655" : "#DD4143"}
+                      iconSize={9}
+                    />
+                  }
                   iconPosition="end"
                   onClick={() => setIsOpeningTimesOpen(true)}
                 >