feat: design refresh on pool list items (#6230)

* update LP tags

* design feedback

src/components/Badge/RangeBadge.tsx

 import { Trans } from '@lingui/macro'
-import Badge, { BadgeVariant } from 'components/Badge'
-import { AlertCircle } from 'react-feather'
-import styled from 'styled-components/macro'
+import { AlertTriangle, Slash } from 'react-feather'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { MouseoverTooltip } from '../../components/Tooltip'
 
@@ -13,7 +12,9 @@ const BadgeWrapper = styled.div`
 
 const BadgeText = styled.div`
   font-weight: 500;
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 14px;
+  margin-right: 8px;
 `
 
 const ActiveDot = styled.span`
@@ -21,7 +22,14 @@ const ActiveDot = styled.span`
   border-radius: 50%;
   height: 8px;
   width: 8px;
-  margin-right: 4px;
+`
+
+const LabelText = styled.div<{ color: string }>`
+  align-items: center;
+  color: ${({ color }) => color};
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
 `
 
 export default function RangeBadge({
@@ -31,17 +39,17 @@ export default function RangeBadge({
   removed: boolean | undefined
   inRange: boolean | undefined
 }) {
+  const theme = useTheme()
   return (
     <BadgeWrapper>
       {removed ? (
         <MouseoverTooltip text={<Trans>Your position has 0 liquidity, and is not earning fees.</Trans>}>
-          <Badge variant={BadgeVariant.DEFAULT}>
-            <AlertCircle width={14} height={14} />
-            &nbsp;
+          <LabelText color={theme.textSecondary}>
             <BadgeText>
               <Trans>Closed</Trans>
             </BadgeText>
-          </Badge>
+            <Slash width={12} height={12} />
+          </LabelText>
         </MouseoverTooltip>
       ) : inRange ? (
         <MouseoverTooltip
@@ -51,12 +59,12 @@ export default function RangeBadge({
             </Trans>
           }
         >
-          <Badge variant={BadgeVariant.DEFAULT}>
-            <ActiveDot /> &nbsp;
+          <LabelText color={theme.accentSuccess}>
             <BadgeText>
-              <Trans>In range</Trans>
+              <Trans>In Range</Trans>
             </BadgeText>
-          </Badge>
+            <ActiveDot />
+          </LabelText>
         </MouseoverTooltip>
       ) : (
         <MouseoverTooltip
@@ -66,13 +74,12 @@ export default function RangeBadge({
             </Trans>
           }
         >
-          <Badge variant={BadgeVariant.WARNING}>
-            <AlertCircle width={14} height={14} />
-            &nbsp;
+          <LabelText color={theme.accentWarning}>
             <BadgeText>
               <Trans>Out of range</Trans>
             </BadgeText>
-          </Badge>
+            <AlertTriangle width={12} height={12} />
+          </LabelText>
         </MouseoverTooltip>
       )}
     </BadgeWrapper>

src/components/PositionListItem/index.tsx

@@ -2,7 +2,6 @@ import { BigNumber } from '@ethersproject/bignumber'
 import { Trans } from '@lingui/macro'
 import { Percent, Price, Token } from '@uniswap/sdk-core'
 import { Position } from '@uniswap/v3-sdk'
-import Badge from 'components/Badge'
 import RangeBadge from 'components/Badge/RangeBadge'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import HoverInlineText from 'components/HoverInlineText'
@@ -15,7 +14,7 @@ import { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { Bound } from 'state/mint/v3/actions'
 import styled from 'styled-components/macro'
-import { HideSmall, MEDIA_WIDTHS, SmallOnly } from 'theme'
+import { HideSmall, MEDIA_WIDTHS, SmallOnly, ThemedText } from 'theme'
 import { formatTickPrice } from 'utils/formatTickPrice'
 import { unwrappedToken } from 'utils/unwrappedToken'
 import { hasURL } from 'utils/urlChecks'
@@ -52,14 +51,6 @@ const LinkRow = styled(Link)`
   `};
 `
 
-const BadgeText = styled.div`
-  font-weight: 500;
-  font-size: 14px;
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    font-size: 12px;
-  `};
-`
-
 const DataLineItem = styled.div`
   font-size: 14px;
 `
@@ -73,20 +64,27 @@ const RangeLineItem = styled(DataLineItem)`
 `
 
 const DoubleArrow = styled.span`
+  font-size: 12px;
   margin: 0 2px;
   color: ${({ theme }) => theme.textTertiary};
 `
 
-const RangeText = styled.div`
+const RangeText = styled(ThemedText.Caption)`
+  font-size: 12px !important;
   word-break: break-word;
   padding: 0.25rem 0.25rem;
   border-radius: 8px;
 `
 
-const ExtentsText = styled.span`
+const FeeTierText = styled(ThemedText.UtilityBadge)`
+  font-size: 10px !important;
+  margin-left: 14px !important;
+`
+const ExtentsText = styled(ThemedText.Caption)`
   color: ${({ theme }) => theme.textTertiary};
-  font-size: 14px;
-  margin-right: 4px;
+  display: inline-block;
+  line-height: 16px;
+  margin-right: 4px !important;
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: none;
   `};
@@ -101,15 +99,6 @@ const PrimaryPositionIdData = styled.div`
   }
 `
 
-const DataText = styled.div`
-  font-weight: 600;
-  font-size: 18px;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    font-size: 18px;
-  `};
-`
-
 interface PositionListItemProps {
   token0: string
   token1: string
@@ -228,15 +217,13 @@ export default function PositionListItem({
       <RowBetween>
         <PrimaryPositionIdData>
           <DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={18} margin />
-          <DataText>
+          <ThemedText.SubHeader>
             &nbsp;{currencyQuote?.symbol}&nbsp;/&nbsp;{currencyBase?.symbol}
-          </DataText>
-          &nbsp;
-          <Badge>
-            <BadgeText>
+          </ThemedText.SubHeader>
+
+          <FeeTierText>
             <Trans>{new Percent(feeAmount, 1_000_000).toSignificant()}%</Trans>
-            </BadgeText>
-          </Badge>
+          </FeeTierText>
         </PrimaryPositionIdData>
         <RangeBadge removed={removed} inRange={!outOfRange} />
       </RowBetween>
@@ -259,10 +246,10 @@ export default function PositionListItem({
             </Trans>
           </RangeText>{' '}
           <HideSmall>
-            <DoubleArrow>⟷</DoubleArrow>{' '}
+            <DoubleArrow>↔</DoubleArrow>{' '}
           </HideSmall>
           <SmallOnly>
-            <DoubleArrow>⟷</DoubleArrow>{' '}
+            <DoubleArrow>↔</DoubleArrow>{' '}
           </SmallOnly>
           <RangeText>
             <ExtentsText>

src/nft/themes/darkTheme.ts

@@ -10,7 +10,7 @@ export const darkTheme: Theme = {
 
     explicitWhite: '#FFFFFF',
     green: vars.color.green200,
-    gold: vars.color.gold400,
+    gold: vars.color.gold200,
     violet: vars.color.violet200,
 
     backgroundFloating: '0000000C',

src/theme/colors.ts

@@ -149,14 +149,14 @@ export const darkTheme = {
   accentAction: colors.blue400,
   accentActive: colors.blue400,
   accentSuccess: colors.green200,
-  accentWarning: colors.gold400,
+  accentWarning: colors.gold200,
   accentFailure: colors.red300,
   accentCritical: colors.red300,
 
   accentActionSoft: opacify(24, colors.blue400),
   accentActiveSoft: opacify(24, colors.blue400),
   accentSuccessSoft: opacify(24, colors.green400),
-  accentWarningSoft: opacify(24, colors.gold400),
+  accentWarningSoft: opacify(24, colors.gold200),
   accentFailureSoft: opacify(12, colors.red300),
 
   accentTextDarkPrimary: opacify(80, colors.gray900),