fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu: fix cart badge place in LTR case

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-11 09:52:16 +03:00
parent 072cfd60a1
commit 26f05c9a27
3 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.css
View File

@@ -319,3 +319,7 @@ label {
position: relative !important; position: relative !important;
top: 3px !important; top: 3px !important;
} }
.cart-button .ant-badge-count {
left: 0px !important;
}

6
src/pages/menu/components/CartButton/CartButton.module.css
View File

@@ -2,6 +2,12 @@
.scrollToTopButton { .scrollToTopButton {
animation: fadeInUp 0.3s ease-out; animation: fadeInUp 0.3s ease-out;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background-color: var(--primary);
border-color: var(--primary);
width: 56px !important;
height: 56px !important;
gap: 0; /* // this overrides antd's gap that is preventing centering icon */
} }
.scrollToTopButton:hover { .scrollToTopButton:hover {

14
src/pages/menu/components/CartButton/CartButton.tsx
View File

@@ -4,12 +4,10 @@ import { selectCartItems } from "features/order/orderSlice";
import { useCallback } from "react"; import { useCallback } from "react";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks"; import { useAppSelector } from "redux/hooks";
import { colors } from "ThemeConstants";
import styles from "./CartButton.module.css"; import styles from "./CartButton.module.css";
export function CartButton() { export function CartButton() {
const { isRTL } = useAppSelector((state) => state.locale); const { isRTL } = useAppSelector((state) => state.locale);
const { themeName } = useAppSelector((state) => state.theme);
const { id } = useParams(); const { id } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const items = useAppSelector(selectCartItems); const items = useAppSelector(selectCartItems);
@@ -28,8 +26,9 @@ export function CartButton() {
right: !isRTL ? "auto" : "20px", right: !isRTL ? "auto" : "20px",
left: !isRTL ? "20px" : "auto", left: !isRTL ? "20px" : "auto",
}} }}
className={'cart-button'}
> >
<Badge count={totalItems} size="default"> <Badge count={totalItems} size="default" className={styles.badge}>
<Button <Button
type="primary" type="primary"
shape="circle" shape="circle"
@@ -37,15 +36,6 @@ export function CartButton() {
icon={<CartIcon />} icon={<CartIcon />}
onClick={onCartClick} onClick={onCartClick}
className={`${styles.scrollToTopButton}`} className={`${styles.scrollToTopButton}`}
style={{
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
backgroundColor:
themeName === "dark" ? colors.primary : colors.primary,
borderColor: themeName === "dark" ? colors.primary : colors.primary,
width: 56,
height: 56,
gap: "0", // this overrides antd's gap that is preventing centering icon
}}
/> />
</Badge> </Badge>
</div> </div>