Position styles (#55)

* Better position list layout WIP

* Position list updates

* add badge data and current price hover

* merge cleanup

* fix missing library

* position page improvements

* Clean up position page and overview

* layout and color updates

* Clean up page

* Clean up position page

* clean up errors

* Add icons

* Merge main

* Position styles tweaks
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

public/locales/en.json

@@ -89,7 +89,7 @@
   "toleranceExplanation": "Lowering this limit decreases your risk of frontrunning. However, this makes more likely that your transaction will fail due to normal price movements.",
   "tokenSearchPlaceholder": "Search name or paste address",
   "selectFee": "Select Fee",
-  "selectLiquidityRange": "Select Liquidity Range",
+  "selectLiquidityRange": "Select Price Range",
   "selectPool": "Select Fee Tier",
   "depositAmounts": "Deposit Amounts",
   "fee": "fee",

src/components/Badge/RangeBadge.tsx

+import React from 'react'
+
+import Badge, { BadgeVariant } from 'components/Badge'
+import styled from 'styled-components'
+
+import { MouseoverTooltip } from '../../components/Tooltip'
+import { useTranslation } from 'react-i18next'
+import { AlertCircle } from 'react-feather'
+
+const BadgeWrapper = styled.div`
+  font-size: 14px;
+  display: flex;
+  justify-content: flex-end;
+`
+
+const BadgeText = styled.div`
+  font-weight: 500;
+  font-size: 14px;
+`
+
+const ActiveDot = styled.span`
+  background-color: ${({ theme }) => theme.success};
+  border-radius: 50%;
+  height: 8px;
+  width: 8px;
+  margin-right: 4px;
+`
+
+export const DarkBadge = styled.div`
+  width: fit-content;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.bg0};
+  padding: 4px 6px;
+`
+
+export default function RangeBadge({ inRange }: { inRange?: boolean }) {
+  const { t } = useTranslation()
+
+  return (
+    <BadgeWrapper>
+      {inRange ? (
+        <MouseoverTooltip
+          text={`The price of this pair is within your selected range. Your positions is earning fees.`}
+        >
+          <Badge variant={BadgeVariant.DEFAULT}>
+            <ActiveDot /> &nbsp;
+            <BadgeText>{t('In range')}</BadgeText>
+          </Badge>
+        </MouseoverTooltip>
+      ) : (
+        <MouseoverTooltip
+          text={`The price of this pair is outside of your selected range. Your positions is not earning fees.`}
+        >
+          <Badge variant={BadgeVariant.WARNING}>
+            <AlertCircle width={14} height={14} />
+            &nbsp;
+            <BadgeText>{t('Out of range')}</BadgeText>
+          </Badge>
+        </MouseoverTooltip>
+      )}
+    </BadgeWrapper>
+  )
+}

src/components/Button/index.tsx

@@ -37,6 +37,10 @@ const Base = styled(RebassButton)<{
   > * {
     user-select: none;
   }
+
+  > a {
+    text-decoration: none;
+  }
 `
 
 export const ButtonPrimary = styled(Base)`

src/components/PositionList/index.tsx

@@ -9,19 +9,17 @@ const DesktopHeader = styled.div`
   display: none;
   font-size: 14px;
   font-weight: 500;
-  opacity: 0.6;
-  padding: 8px 8px 0 8px;
+  padding: 8px 8px 8px 8px;
 
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     align-items: center;
     display: flex;
-    margin: 0 0 8px 0;
-    & > div:first-child {
-      flex: 1 1 auto;
-    }
-    & > div:not(:first-child) {
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    & > div:last-child {
       text-align: right;
-      min-width: 18%;
+      margin-right: 12px;
     }
   }
 `
@@ -45,10 +43,11 @@ export default function PositionList({ positions }: PositionListProps) {
   return (
     <>
       <DesktopHeader>
-        <div>{t('Position')}</div>
-        <div>{t('Range')}</div>
-        <div>{t('Liquidity')}</div>
-        <div>{t('Fees Earned')}</div>
+        <div>
+          {t('Your positions')}
+          {positions && ' (' + positions.length + ')'}
+        </div>
+        <div>{t('Price range')}</div>
       </DesktopHeader>
       <MobileHeader>Your positions</MobileHeader>
       {positions.map((p) => {

src/components/RateToggle/index.tsx

@@ -3,6 +3,15 @@ import { Currency } from '@uniswap/sdk-core'
 import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle'
 import { useActiveWeb3React } from 'hooks'
 import { wrappedCurrency } from 'utils/wrappedCurrency'
+import Switch from '../../assets/svg/switch.svg'
+import { useDarkModeManager } from '../../state/user/hooks'
+import styled from 'styled-components'
+
+const StyledSwitchIcon = styled.img<{ darkMode: boolean }>`
+  margin: 0 4px;
+  opacity: 0.4;
+  filter: ${({ darkMode }) => (darkMode ? 'invert(0)' : 'invert(1)')};
+`
 
 // the order of displayed base currencies from left to right is always in sort order
 // currencyA is treated as the preferred base currency
@@ -22,14 +31,21 @@ export default function RateToggle({
 
   const isSorted = tokenA && tokenB && tokenA.sortsBefore(tokenB)
 
+  const [darkMode] = useDarkModeManager()
+
   return tokenA && tokenB ? (
-    <ToggleWrapper width="fit-content">
-      <ToggleElement isActive={isSorted} fontSize="12px" onClick={handleRateToggle}>
-        {isSorted ? currencyA.symbol : currencyB.symbol}
-      </ToggleElement>
-      <ToggleElement isActive={!isSorted} fontSize="12px" onClick={handleRateToggle}>
-        {isSorted ? currencyB.symbol : currencyA.symbol}
-      </ToggleElement>
-    </ToggleWrapper>
+    <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }}>
+      <ToggleWrapper width="fit-content">
+        <ToggleElement isActive={isSorted} fontSize="12px" onClick={handleRateToggle}>
+          {isSorted ? currencyA.symbol : currencyB.symbol} {' price'}
+        </ToggleElement>
+        <StyledSwitchIcon onClick={handleRateToggle} width={'16px'} src={Switch} alt="logo" darkMode={darkMode} />
+
+        <ToggleElement isActive={!isSorted} fontSize="12px" onClick={handleRateToggle}>
+          {isSorted ? currencyB.symbol : currencyA.symbol}
+          {' price'}
+        </ToggleElement>
+      </ToggleWrapper>
+    </div>
   ) : null
 }

src/components/Toggle/MultiToggle.tsx

@@ -4,11 +4,11 @@ import styled from 'styled-components'
 export const ToggleWrapper = styled.button<{ width?: string }>`
   display: flex;
   align-items: center;
-  width: ${({ width }) => width ?? '100%'}
-  padding: 1px;
-  background: ${({ theme }) => theme.bg0};
+  width: ${({ width }) => width ?? '100%'};
+  padding: 2px;
+  background: ${({ theme }) => theme.bg1};
   border-radius: 8px;
-  border: ${({ theme }) => '2px solid ' + theme.bg2};
+  border: ${({ theme }) => '1px solid ' + theme.bg1};
   cursor: pointer;
   outline: none;
 `
@@ -21,7 +21,7 @@ export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string
   border-radius: 6px;
   justify-content: center;
   height: 100%;
-  background: ${({ theme, isActive }) => (isActive ? theme.bg2 : 'none')};
+  background: ${({ theme, isActive }) => (isActive ? theme.bg0 : 'none')};
   color: ${({ theme, isActive }) => (isActive ? theme.text1 : theme.text3)};
   font-size: ${({ fontSize }) => fontSize ?? '1rem'};
   font-weight: 500;
@@ -32,6 +32,15 @@ export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string
   }
 `
 
+export const ToggleText = styled.div`
+  color: ${({ theme }) => theme.text3};
+  font-size: 12px;
+  margin-right: 0.5rem;
+  width: 100%;
+  white-space: nowrap;
+  padding: 0 0 0 4px;
+`
+
 export interface ToggleProps {
   options: string[]
   activeIndex: number

src/pages/Pool/CTACards.tsx

+import React from 'react'
+import styled from 'styled-components'
+import { TYPE } from 'theme'
+import { useTranslation } from 'react-i18next'
+import { ExternalLink } from '../../theme'
+
+const CTASection = styled.section`
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 8px;
+`
+
+const CTA1 = styled(ExternalLink)`
+  background-color: ${({ theme }) => theme.bg1};
+  padding: 32px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 220px;
+  border: 1px solid ${({ theme }) => theme.bg4};
+
+  * {
+    color: ${({ theme }) => theme.text1};
+    text-decoration: none !important;
+  }
+
+  :hover {
+    border: 1px solid ${({ theme }) => theme.bg5};
+    background-color: ${({ theme }) => theme.bg2};
+    text-decoration: none;
+    * {
+      text-decoration: none !important;
+    }
+  }
+`
+
+export default function CTACards() {
+  const { t } = useTranslation()
+
+  return (
+    <CTASection>
+      <CTA1 href={''}>
+        <span>
+          <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex', marginBottom: '24px' }}>
+            {t('What’s new in V3 Liquidity Pools?')}
+          </TYPE.largeHeader>
+          <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex' }}>
+            {t(
+              'Learn all about concentrated liquidity and get informed about how to choose ranges that make sense for you.'
+            )}
+          </TYPE.body>
+        </span>
+        <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
+          {t('↗')}
+        </TYPE.largeHeader>
+      </CTA1>
+      <CTA1 href={''}>
+        <span>
+          <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex', marginBottom: '24px' }}>
+            {t('Top pools')}
+          </TYPE.largeHeader>
+          <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex' }}>
+            {t('Explore the top pools with Uniswap Analytics.')}
+          </TYPE.body>
+        </span>
+        <TYPE.largeHeader fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
+          {t('↗')}
+        </TYPE.largeHeader>
+      </CTA1>
+    </CTASection>
+  )
+}

src/pages/Pool/index.tsx

@@ -15,6 +15,8 @@ import styled, { ThemeContext } from 'styled-components'
 import { HideSmall, TYPE } from 'theme'
 import { LoadingRows } from './styleds'
 
+import CTACards from './CTACards'
+
 const PageWrapper = styled(AutoColumn)`
   max-width: 870px;
   width: 100%;
@@ -76,7 +78,7 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`
 
 const MainContentWrapper = styled.main`
   background-color: ${({ theme }) => theme.bg0};
-  padding: 16px;
+  padding: 8px;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
@@ -131,7 +133,7 @@ export default function Pool() {
           <AutoColumn gap="lg" style={{ width: '100%' }}>
             <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
               <HideSmall>
-                <TYPE.mediumHeader>Your Positions</TYPE.mediumHeader>
+                <TYPE.mediumHeader>{t('Pools Overview')}</TYPE.mediumHeader>
               </HideSmall>
               <ButtonRow>
                 <Menu
@@ -152,6 +154,8 @@ export default function Pool() {
               </ButtonRow>
             </TitleRow>
 
+            <CTACards />
+
             <MainContentWrapper>
               {positionsLoading ? (
                 <LoadingRows>
@@ -194,6 +198,16 @@ export default function Pool() {
                 </NoLiquidity>
               )}
             </MainContentWrapper>
+            <RowFixed justify="center" style={{ width: '100%' }}>
+              <ButtonGray
+                as={Link}
+                to="/migrate/v2"
+                id="import-pool-link"
+                style={{ padding: '8px 16px', borderRadius: '12px', width: 'fit-content' }}
+              >
+                <TYPE.subHeader>{t('Looking for your V2 Liquidity')}?</TYPE.subHeader>
+              </ButtonGray>
+            </RowFixed>
           </AutoColumn>
         </AutoColumn>
       </PageWrapper>

src/pages/Pool/styleds.tsx

@@ -68,6 +68,7 @@ const loadingAnimation = keyframes`
 export const LoadingRows = styled.div`
   display: grid;
   min-width: 75%;
+  max-width: 960px;
   grid-column-gap: 0.5em;
   grid-row-gap: 0.8em;
   grid-template-columns: repeat(3, 1fr);

src/theme/index.tsx

@@ -143,7 +143,7 @@ export const TYPE = {
     return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
   },
   label(props: TextProps) {
-    return <TextWrapper fontWeight={600} color={'text1'} {...props} />
+    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
   },
   black(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'text1'} {...props} />