fix: remove hover state for chevrons in nav (#4681)

* fix

* fix

src/components/Icons/index.tsx

-import { ChevronDown, ChevronUp } from 'react-feather'
-import styled from 'styled-components/macro'
-
-export const StyledChevronDown = styled(ChevronDown)<{ customColor?: string }>`
-  color: ${({ theme, customColor }) => customColor ?? theme.textSecondary};
-  height: 20px;
-  width: 20px;
-
-  &:hover {
-    color: ${({ theme }) => theme.accentActionSoft};
-    transition: ${({
-      theme: {
-        transition: { duration, timing },
-      },
-    }) => `${duration.fast} color ${timing.in}`};
-  }
-`
-
-export const StyledChevronUp = styled(ChevronUp)<{ customColor?: string }>`
-  color: ${({ theme, customColor }) => customColor ?? theme.textSecondary};
-  height: 20px;
-  width: 20px;
-
-  &:hover {
-    color: ${({ theme }) => theme.accentActionSoft};
-    transition: ${({
-      theme: {
-        transition: { duration, timing },
-      },
-    }) => `${duration.fast} color ${timing.in}`};
-  }
-`

src/components/NavBar/ChainSelector.tsx

 import { useWeb3React } from '@web3-react/core'
-import { StyledChevronDown, StyledChevronUp } from 'components/Icons'
 import { getChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
@@ -13,6 +12,8 @@ import { subhead } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useIsMobile } from 'nft/hooks'
 import { useCallback, useRef, useState } from 'react'
+import { ChevronDown, ChevronUp } from 'react-feather'
+import { useTheme } from 'styled-components/macro'
 
 import * as styles from './ChainSelector.css'
 import ChainSelectorRow from './ChainSelectorRow'
@@ -35,6 +36,8 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const isMobile = useIsMobile()
 
+  const theme = useTheme()
+
   const ref = useRef<HTMLDivElement>(null)
   const modalRef = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, () => setIsOpen(false), [modalRef])
@@ -77,6 +80,12 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
     </NavDropdown>
   )
 
+  const chevronProps = {
+    height: 20,
+    width: 20,
+    color: theme.textSecondary,
+  }
+
   return (
     <Box position="relative" ref={ref}>
       <Row
@@ -101,7 +110,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
             </Box>
           </>
         )}
-        {isOpen ? <StyledChevronUp /> : <StyledChevronDown />}
+        {isOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
       </Row>
       {isOpen && (isMobile ? <Portal>{dropdown}</Portal> : <>{dropdown}</>)}
     </Box>

src/components/Web3Status/index.tsx

@@ -3,7 +3,6 @@ import { t, Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
-import { StyledChevronDown, StyledChevronUp } from 'components/Icons'
 import WalletDropdown from 'components/WalletDropdown'
 import { getConnection } from 'connection/utils'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
@@ -11,7 +10,7 @@ import { Portal } from 'nft/components/common/Portal'
 import { getIsValidSwapQuote } from 'pages/Swap'
 import { darken } from 'polished'
 import { useMemo, useRef } from 'react'
-import { AlertTriangle } from 'react-feather'
+import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
 import { useAppSelector } from 'state/hooks'
 import { useDerivedSwapInfo } from 'state/swap/hooks'
 import styled, { css, useTheme } from 'styled-components/macro'
@@ -178,6 +177,11 @@ const StyledConnect = styled.div`
   }
 `
 
+const CHEVRON_PROPS = {
+  height: 20,
+  width: 20,
+}
+
 function Web3StatusInner() {
   const { account, connector, chainId, ENSName } = useWeb3React()
   const connectionType = getConnection(connector).type
@@ -219,6 +223,10 @@ function Web3StatusInner() {
       </Web3StatusError>
     )
   } else if (account) {
+    const chevronProps = {
+      ...CHEVRON_PROPS,
+      color: theme.textSecondary,
+    }
     return (
       <Web3StatusConnected data-testid="web3-status-connected" onClick={toggleWallet} pending={hasPendingTransactions}>
         {navbarFlagEnabled && !hasPendingTransactions && <StatusIcon size={24} connectionType={connectionType} />}
@@ -235,9 +243,9 @@ function Web3StatusInner() {
             <Text>{ENSName || shortenAddress(account)}</Text>
             {navbarFlagEnabled ? (
               walletIsOpen ? (
-                <StyledChevronUp onClick={toggleWalletDropdown} />
+                <ChevronUp {...chevronProps} />
               ) : (
-                <StyledChevronDown onClick={toggleWalletDropdown} />
+                <ChevronDown {...chevronProps} />
               )
             ) : null}
           </>
@@ -246,6 +254,12 @@ function Web3StatusInner() {
       </Web3StatusConnected>
     )
   } else {
+    const chevronProps = {
+      ...CHEVRON_PROPS,
+      color: theme.accentAction,
+      'data-testid': 'navbar-wallet-dropdown',
+      onClick: toggleWalletDropdown,
+    }
     return (
       <TraceEvent
         events={[Event.onClick]}
@@ -259,19 +273,7 @@ function Web3StatusInner() {
               <Trans>Connect</Trans>
             </StyledConnect>
             <VerticalDivider />
-            {walletIsOpen ? (
-              <StyledChevronUp
-                data-testid="navbar-wallet-dropdown"
-                customColor={theme.accentAction}
-                onClick={toggleWalletDropdown}
-              />
-            ) : (
-              <StyledChevronDown
-                data-testid="navbar-wallet-dropdown"
-                customColor={theme.accentAction}
-                onClick={toggleWalletDropdown}
-              />
-            )}
+            {walletIsOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
           </Web3StatusConnectButton>
         ) : (
           <Web3StatusConnect onClick={toggleWallet} faded={!account}>