chore: add appropriate padding and update chain selector to styled (#7549)

* chore: add appropriate padding and update chain selector to styled

* light gray on hover remove

* Update src/components/NavBar/ChainSelector.tsx

Co-authored-by: Charles Bachmeier <charles@bachmeier.io>

---------

Co-authored-by: Charles Bachmeier <charles@bachmeier.io>

src/components/NavBar/ChainSelector.css.ts

@@ -1,16 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { lightGrayOverlayOnHover } from 'nft/css/common.css'
-
-import { sprinkles } from '../../nft/css/sprinkles.css'
-
-export const ChainSelector = style([
-  lightGrayOverlayOnHover,
-  sprinkles({
-    borderRadius: '20',
-    height: '36',
-    cursor: 'pointer',
-    border: 'none',
-    color: 'neutral1',
-    background: 'none',
-  }),
-])

src/components/NavBar/ChainSelector.tsx

@@ -2,6 +2,7 @@ import { t } from '@lingui/macro'
 import { ChainId } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { showTestnetsAtom } from 'components/AccountDrawer/TestnetsToggle'
+import { BaseButton } from 'components/Button'
 import { ChainLogo } from 'components/Logo/ChainLogo'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { getConnection } from 'connection'
@@ -13,24 +14,38 @@ import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useSelectChain from 'hooks/useSelectChain'
 import useSyncChainQuery from 'hooks/useSyncChainQuery'
 import { useAtomValue } from 'jotai/utils'
-import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
-import { Column, Row } from 'nft/components/Flex'
+import { Column } from 'nft/components/Flex'
 import { useIsMobile } from 'nft/hooks'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { getSupportedChainIdsFromWalletConnectSession } from 'utils/getSupportedChainIdsFromWalletConnectSession'
 
-import * as styles from './ChainSelector.css'
 import ChainSelectorRow from './ChainSelectorRow'
 import { NavDropdown } from './NavDropdown'
 
 const NETWORK_SELECTOR_CHAINS = [...L1_CHAIN_IDS, ...L2_CHAIN_IDS]
 
-interface ChainSelectorProps {
+const ChainSelectorWrapper = styled.div`
-  leftAlign?: boolean
+  position: relative;
-}
+`
+
+const ChainSelectorButton = styled(BaseButton)<{ isOpen: boolean }>`
+  display: flex;
+  background: ${({ theme, isOpen }) => (isOpen ? theme.accent2 : 'none')};
+  padding: 10px 8px;
+  gap: 4px;
+  border-radius: 12px;
+  height: 40px;
+  color: ${({ theme }) => theme.neutral1};
+  transition: ${({ theme }) =>
+    `${theme.transition.duration.medium} ${theme.transition.timing.ease} background-color, ${theme.transition.duration.medium} ${theme.transition.timing.ease} margin`};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.deprecated_stateOverlayHover};
+  }
+`
 
 function useWalletSupportedChains(): ChainId[] {
   const { connector } = useWeb3React()
@@ -45,7 +60,7 @@ function useWalletSupportedChains(): ChainId[] {
   }
 }
 
-export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
+export const ChainSelector = ({ leftAlign }: { leftAlign?: boolean }) => {
   const { chainId } = useWeb3React()
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const isMobile = useIsMobile()
@@ -133,25 +148,18 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
   }
 
   return (
-    <Box position="relative" ref={ref}>
+    <ChainSelectorWrapper ref={ref}>
       <MouseoverTooltip text={t`Your wallet's current network is unsupported.`} disabled={isSupported}>
-        <Row
+        <ChainSelectorButton data-testid="chain-selector" onClick={() => setIsOpen(!isOpen)} isOpen={isOpen}>
-          data-testid="chain-selector"
-          as="button"
-          gap="8"
-          className={styles.ChainSelector}
-          background={isOpen ? 'accent2' : 'none'}
-          onClick={() => setIsOpen(!isOpen)}
-        >
           {!isSupported ? (
             <AlertTriangle size={20} color={theme.neutral2} />
           ) : (
-            <ChainLogo chainId={chainId} size={24} testId="chain-selector-logo" />
+            <ChainLogo chainId={chainId} size={20} testId="chain-selector-logo" />
           )}
           {isOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
-        </Row>
+        </ChainSelectorButton>
       </MouseoverTooltip>
       {isOpen && (isMobile ? <Portal>{dropdown}</Portal> : <>{dropdown}</>)}
-    </Box>
+    </ChainSelectorWrapper>
   )
 }

src/nft/css/common.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import { sprinkles, vars } from './sprinkles.css'
+import { sprinkles } from './sprinkles.css'
 
 export const center = sprinkles({
   display: 'flex',
@@ -58,14 +58,3 @@ export const magicalGradientOnHover = style([
     },
   },
 ])
-
-export const lightGrayOverlayOnHover = style([
-  sprinkles({
-    transition: '250',
-  }),
-  {
-    ':hover': {
-      background: vars.color.lightGrayOverlay,
-    },
-  },
-])