fix: nav bar icon sizes (#5051)

* init

* fix

src/components/NavBar/MenuDropdown.tsx

@@ -123,7 +123,7 @@ export const MenuDropdown = () => {
     <>
       <Box position="relative" ref={ref}>
         <NavIcon isActive={isOpen} onClick={toggleOpen}>
-          <EllipsisIcon width={20} height={20} />
+          <EllipsisIcon viewBox="0 0 20 20" width={24} height={24} />
         </NavIcon>
 
         {isOpen && (

src/components/NavBar/NavIcon.css.ts

@@ -4,6 +4,7 @@ import { sprinkles, vars } from '../../nft/css/sprinkles.css'
 
 export const navIcon = style([
   sprinkles({
+    alignItems: 'center',
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
@@ -11,7 +12,6 @@ export const navIcon = style([
     justifyContent: 'center',
     textAlign: 'center',
     cursor: 'pointer',
-    padding: '10',
     borderRadius: '8',
     transition: '250',
   }),

src/components/NavBar/NavIcon.tsx

@@ -18,6 +18,7 @@ export const NavIcon = ({ children, isActive, onClick }: NavIconProps) => {
       color={isActive ? 'textPrimary' : 'textSecondary'}
       onClick={onClick}
       height="40"
+      width="40"
     >
       {children}
     </Box>

src/components/NavBar/ShoppingBag.tsx

@@ -29,14 +29,14 @@ export const ShoppingBag = () => {
     <NavIcon onClick={toggleBag}>
       {isProfilePage ? (
         <>
-          <TagIcon width={20} height={20} />
+          <TagIcon viewBox="0 0 20 20" width={24} height={24} />
           {sellQuantity ? (
             <Box className={styles.bagQuantity}>{sellQuantity > 99 ? <HundredsOverflowIcon /> : sellQuantity}</Box>
           ) : null}
         </>
       ) : (
         <>
-          <BagIcon width={20} height={20} />
+          <BagIcon viewBox="0 0 20 20" width={24} height={24} />
           {bagQuantity ? (
             <Box className={styles.bagQuantity}>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</Box>
           ) : null}