chore: change style of cart count badge

pooriaset · May 22, 2024 · e2ebb5d · e2ebb5d
1 parent f8e7866
commit e2ebb5d
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/src/components/Footer/components/MobileFooter.tsx b/src/components/Footer/components/MobileFooter.tsx
@@ -7,7 +7,7 @@ import {
   HomeOutlined,
   ShoppingBasketOutlined,
 } from '@mui/icons-material';
-import { Badge } from '@mui/material';
+import { Badge, BadgeProps, styled } from '@mui/material';
 import MuiBottomNavigation from '@mui/material/BottomNavigation';
 import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import Box from '@mui/material/Box';
@@ -22,6 +22,13 @@ interface Page {
   icon: ReactNode;
 }
 
+const StyledBadge = styled(Badge)<BadgeProps>(() => ({
+  '& .MuiBadge-badge': {
+    right: -3,
+    top: 12,
+  },
+}));
+
 const MobileFooter = () => {
   const pathname = usePathname();
   const t = useTranslations();
@@ -42,9 +49,9 @@ const MobileFooter = () => {
       label: t('footer.navigation.cart'),
       href: '/cart',
       icon: (
-        <Badge badgeContent={cart?.productsCount} color="error">
+        <StyledBadge badgeContent={cart?.productsCount} color="error">
           <ShoppingBasketOutlined />
-        </Badge>
+        </StyledBadge>
       ),
     },
     {