fix(bag): update active/hover/open-state styles (#5221)

* fix(bag): update active/hover/open-state styles

* bag svg update, item counter update

src/components/NavBar/ShoppingBag.css.ts

-import { style } from '@vanilla-extract/css'
-import { sprinkles } from 'nft/css/sprinkles.css'
-
-export const bagQuantity = style([
-  sprinkles({
-    position: 'absolute',
-    top: '4',
-    right: '4',
-    backgroundColor: 'accentAction',
-    borderRadius: 'round',
-    color: 'explicitWhite',
-    textAlign: 'center',
-    fontWeight: 'semibold',
-    paddingY: '1',
-    paddingX: '4',
-  }),
-  {
-    fontSize: '8px',
-    lineHeight: '12px',
-    minWidth: '14px',
-  },
-])

src/components/NavBar/ShoppingBag.tsx

 import { NavIcon } from 'components/NavBar/NavIcon'
-import * as styles from 'components/NavBar/ShoppingBag.css'
-import { Box } from 'nft/components/Box'
 import { BagIcon, HundredsOverflowIcon } from 'nft/components/icons'
 import { useBag, useSellAsset } from 'nft/hooks'
 import { useCallback, useEffect, useState } from 'react'
+import styled from 'styled-components/macro'
 import shallow from 'zustand/shallow'
 
+const CounterDot = styled.div`
+  background-color: ${({ theme }) => theme.accentAction};
+  border-radius: 100px;
+  color: ${({ theme }) => theme.accentTextLightPrimary};
+  font-size: 10px;
+  line-height: 12px;
+  min-height: 16px;
+  min-width: 16px;
+  padding: 2px 4px;
+  position: absolute;
+  right: 0px;
+  text-align: center;
+  top: 4px;
+`
+
 export const ShoppingBag = () => {
   const itemsInBag = useBag((state) => state.itemsInBag)
   const [bagQuantity, setBagQuantity] = useState(0)
@@ -37,11 +51,9 @@ export const ShoppingBag = () => {
   const bagHasItems = bagQuantity > 0
 
   return (
-    <NavIcon onClick={handleIconClick}>
-      <BagIcon viewBox="0 0 20 20" width={24} height={24} />
-      {bagHasItems && (
-        <Box className={styles.bagQuantity}>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</Box>
-      )}
+    <NavIcon isActive={bagExpanded} onClick={handleIconClick}>
+      <BagIcon viewBox="0 0 24 24" width={24} height={24} />
+      {bagHasItems && <CounterDot>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</CounterDot>}
     </NavIcon>
   )
 }

src/nft/components/icons.tsx

@@ -961,25 +961,18 @@ export const NavMagnifyingGlassIcon = () => (
 )
 
 export const BagIcon = (props: SVGProps) => (
-  <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>
     <path
-      d="M15.8333 5H4.16667C3.24619 5 2.5 5.68401 2.5 6.52778V17.2222C2.5 18.066 3.24619 18.75 4.16667 18.75H15.8333C16.7538 18.75 17.5 18.066 17.5 17.2222V6.52778C17.5 5.68401 16.7538 5 15.8333 5Z"
+      d="M19.2893 5H4.5115C3.34557 5 2.40039 5.89543 2.40039 7V21C2.40039 22.1046 3.34557 23 4.5115 23H19.2893C20.4552 23 21.4004 22.1046 21.4004 21V7C21.4004 5.89543 20.4552 5 19.2893 5Z"
       stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12.5 8.33331C12.5 8.99635 12.2366 9.63224 11.7678 10.1011C11.2989 10.5699 10.663 10.8333 10 10.8333C9.33696 10.8333 8.70107 10.5699 8.23223 10.1011C7.76339 9.63224 7.5 8.99635 7.5 8.33331"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      d="M7.5 5L7.5 4.375C7.5 3.71196 7.76339 3.07607 8.23223 2.60723C8.70107 2.13839 9.33696 1.875 10 1.875C10.663 1.875 11.2989 2.13839 11.7678 2.60723C12.2366 3.07607 12.5 3.71196 12.5 4.375L12.5 5"
+      d="M9 5L9 4.25C9 3.45435 9.31607 2.69129 9.87868 2.12868C10.4413 1.56607 11.2044 1.25 12 1.25C12.7957 1.25 13.5587 1.56607 14.1213 2.12868C14.6839 2.69129 15 3.45435 15 4.25L15 5"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />