fix: Simplifying opacity hover and fixing a link (#5200)

* Simplifying Opacity hover state and fixing a link styling

src/components/Common/index.tsx

@@ -29,3 +29,19 @@ export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>`
     border-radius: 8px;
   }
 `
+
+export const OpacityHoverState = css`
+  &:hover {
+    opacity: ${({ theme }) => theme.opacity.hover};
+  }
+
+  &:active {
+    opacity: ${({ theme }) => theme.opacity.click};
+  }
+
+  transition: ${({
+    theme: {
+      transition: { duration, timing },
+    },
+  }) => `opacity ${duration.medium} ${timing.ease}`};
+`

src/nft/components/bag/BagHeader.tsx

@@ -1,3 +1,4 @@
+import { OpacityHoverState } from 'components/Common'
 import { Column, Row } from 'nft/components/Flex'
 import { BagCloseIcon } from 'nft/components/icons'
 import { roundAndPluralize } from 'nft/utils/roundAndPluralize'
@@ -33,19 +34,8 @@ const IconWrapper = styled.button`
   display: flex;
   padding: 2px;
   opacity: 1;
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
 
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
+  ${OpacityHoverState}
 `
 interface BagHeaderProps {
   numberOfAssets: number

src/nft/components/collection/Card.tsx

@@ -1,5 +1,6 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import clsx from 'clsx'
+import { OpacityHoverState } from 'components/Common'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
@@ -93,12 +94,7 @@ const DetailsLinkContainer = styled.a`
   text-decoration: none;
   color: ${({ theme }) => theme.textSecondary};
 
-  :hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-  :focus {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
+  ${OpacityHoverState}
 `
 
 const SuspiciousIcon = styled(AlertTriangle)`

src/nft/components/collection/CollectionNfts.tsx

@@ -2,6 +2,7 @@ import { TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import clsx from 'clsx'
+import { OpacityHoverState } from 'components/Common'
 import { loadingAnimation } from 'components/Loader/styled'
 import { parseEther } from 'ethers/lib/utils'
 import { NftAssetTraitInput, NftMarketplace } from 'graphql/data/nft/__generated__/AssetQuery.graphql'
@@ -90,19 +91,7 @@ const EmptyCollectionWrapper = styled.div`
 `
 
 const ViewFullCollection = styled.span`
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
+  ${OpacityHoverState}
 `
 
 const ClearAllButton = styled.button`

src/nft/components/details/AssetActivity.tsx

@@ -1,4 +1,4 @@
-import { ScrollBarStyles } from 'components/Common'
+import { OpacityHoverState, ScrollBarStyles } from 'components/Common'
 import { ActivityEventResponse } from 'nft/types'
 import { shortenAddress } from 'nft/utils/address'
 import { formatEthPrice } from 'nft/utils/currency'
@@ -74,19 +74,7 @@ const Link = styled.a`
   color: ${({ theme }) => theme.textPrimary};
   text-decoration: none;
 
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
+  ${OpacityHoverState}
 `
 
 const ActivityContainer = styled.div`

src/nft/components/details/AssetDetails.tsx

@@ -1,4 +1,4 @@
-import { ScrollBarStyles } from 'components/Common'
+import { OpacityHoverState, ScrollBarStyles } from 'components/Common'
 import Resource from 'components/Tokens/TokenDetails/Resource'
 import { MouseoverTooltip } from 'components/Tooltip/index'
 import { Box } from 'nft/components/Box'
@@ -19,7 +19,7 @@ import { useCallback, useMemo, useReducer, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useInfiniteQuery, useQuery } from 'react-query'
 import { Link as RouterLink } from 'react-router-dom'
-import styled, { css } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 
 import AssetActivity from './AssetActivity'
 import * as styles from './AssetDetails.css'
@@ -27,22 +27,6 @@ import DetailsContainer from './DetailsContainer'
 import InfoContainer from './InfoContainer'
 import TraitsContainer from './TraitsContainer'
 
-const OpacityTransition = css`
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
-`
-
 const CollectionHeader = styled.span`
   display: flex;
   align-items: center;
@@ -51,7 +35,7 @@ const CollectionHeader = styled.span`
   color: ${({ theme }) => theme.textPrimary};
   margin-top: 28px;
   text-decoration: none;
-  ${OpacityTransition};
+  ${OpacityHoverState};
 `
 
 const AssetPriceDetailsContainer = styled.div`
@@ -89,7 +73,7 @@ const AddressTextLink = styled.a`
   text-decoration: none;
   max-width: 100%;
   word-wrap: break-word;
-  ${OpacityTransition};
+  ${OpacityHoverState};
 `
 
 const SocialsContainer = styled.div`
@@ -131,7 +115,7 @@ const Link = styled(RouterLink)`
   line-height: 16px;
   margin-top: 12px;
   cursor: pointer;
-  ${OpacityTransition};
+  ${OpacityHoverState};
 `
 
 const DefaultLink = styled(RouterLink)`
@@ -172,7 +156,7 @@ const FilterBox = styled.div<{ isActive?: boolean }>`
   cursor: pointer;
   box-sizing: border-box;
   border: ${({ isActive, theme }) => (isActive ? `1px solid ${theme.accentActive}` : undefined)};
-  ${OpacityTransition};
+  ${OpacityHoverState};
 `
 
 const ByText = styled.span`

src/nft/components/details/AssetPriceDetails.tsx

@@ -1,4 +1,5 @@
 import { useWeb3React } from '@web3-react/core'
+import { OpacityHoverState } from 'components/Common'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import { CancelListingIcon, MinusIcon, PlusIcon } from 'nft/components/icons'
 import { useBag } from 'nft/hooks'
@@ -139,19 +140,7 @@ const UploadLink = styled.a`
   color: ${({ theme }) => theme.textSecondary};
   cursor: pointer;
 
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
+  ${OpacityHoverState}
 `
 
 const NotForSaleContainer = styled.div`
@@ -177,19 +166,7 @@ const OwnerText = styled.a`
   color: ${({ theme }) => theme.textSecondary};
   text-decoration: none;
 
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
+  ${OpacityHoverState}
 `
 
 const OwnerInformationContainer = styled.div`
@@ -257,6 +234,11 @@ export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => {
   )
 }
 
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  ${OpacityHoverState}
+`
+
 export const NotForSale = ({ collectionName, collectionUrl }: { collectionName: string; collectionUrl: string }) => {
   const theme = useTheme()
 
@@ -271,9 +253,9 @@ export const NotForSale = ({ collectionName, collectionUrl }: { collectionName:
           <ThemedText.BodySecondary fontSize="14px" lineHeight="20px">
             Discover similar NFTs for sale in
           </ThemedText.BodySecondary>
-          <Link to={`/nfts/collection/${collectionUrl}`}>
+          <StyledLink to={`/nfts/collection/${collectionUrl}`}>
             <ThemedText.Link lineHeight="20px">{collectionName}</ThemedText.Link>
-          </Link>
+          </StyledLink>
         </DiscoveryContainer>
       </NotForSaleContainer>
     </BestPriceContainer>

src/nft/components/details/DetailsContainer.tsx

@@ -1,3 +1,4 @@
+import { OpacityHoverState } from 'components/Common'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import { CollectionInfoForAsset, GenieAsset } from 'nft/types'
 import { putCommas } from 'nft/utils'
@@ -39,38 +40,14 @@ const Center = styled.span`
   display: flex;
   gap: 8px;
 
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
+  ${OpacityHoverState}
 `
 
 const CreatorLink = styled.a`
   color: ${({ theme }) => theme.textPrimary};
   text-decoration: none;
 
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
+  ${OpacityHoverState}
 `
 
 const CopyIcon = styled(Copy)`

src/nft/components/details/TraitsContainer.tsx

@@ -1,3 +1,4 @@
+import { OpacityHoverState } from 'components/Common'
 import { GenieAsset, Trait } from 'nft/types'
 import qs from 'query-string'
 import { useMemo } from 'react'
@@ -26,19 +27,7 @@ const GridItemContainer = styled(Link)`
   padding: 12px;
   text-decoration: none;
 
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
+  ${OpacityHoverState}
   min-width: 0;
 `
 

src/nft/components/explore/TrendingCollections.tsx

@@ -1,3 +1,4 @@
+import { OpacityHoverState } from 'components/Common'
 import ms from 'ms.macro'
 import { CollectionTableColumn, Denomination, TimePeriod, VolumeType } from 'nft/types'
 import { fetchPrice } from 'nft/utils'
@@ -60,13 +61,7 @@ const Selector = styled.div<{ active: boolean }>`
   background: ${({ active, theme }) => (active ? theme.backgroundInteractive : 'none')};
   cursor: pointer;
 
-  :hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-
-  :active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
+  ${OpacityHoverState}
 `
 
 const StyledSelectorText = styled(ThemedText.SubHeader)<{ active: boolean }>`

src/nft/pages/collection/index.tsx

@@ -1,6 +1,7 @@
 import { Trace } from '@uniswap/analytics'
 import { PageName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
+import { OpacityHoverState } from 'components/Common'
 import { useLoadAssetsQuery } from 'graphql/data/nft/Asset'
 import { useCollectionQuery, useLoadCollectionQuery } from 'graphql/data/nft/Collection'
 import { MobileHoverBag } from 'nft/components/bag/MobileHoverBag'
@@ -49,19 +50,8 @@ const IconWrapper = styled.button`
   display: flex;
   padding: 2px 0px;
   opacity: 1;
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
 
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
-
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `opacity ${duration.medium} ${timing.ease}`};
+  ${OpacityHoverState}
 `
 
 const Collection = () => {