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

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: 50,
+                height: 48,
                 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}
-                  icon={<NextIcon className={styles.openCloseIcon} iconColor="#278655" iconSize={9} />}
+                  className={
+                    restaurant?.isOpened
+                      ? styles.openButton
+                      : styles.closeButton
+                  }
+                  icon={
+                    <NextIcon
+                      iconColor={restaurant?.isOpened ? "#278655" : "#DD4143"}
+                      iconSize={9}
+                    />
+                  }
                   iconPosition="end"
                   onClick={() => setIsOpeningTimesOpen(true)}
                 >