fix: Update pools page to match token table design (#4861)

* Update pool pages design

* Fix small text

* Mobile tweaks

* remove redesign flag
Co-authored-by: Vignesh Mohankumar <me@vig.xyz>

src/components/PositionList/index.tsx

 import { Trans } from '@lingui/macro'
 import PositionListItem from 'components/PositionListItem'
-import Toggle from 'components/Toggle'
 import React from 'react'
 import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
@@ -10,7 +9,8 @@ const DesktopHeader = styled.div`
   display: none;
   font-size: 14px;
   font-weight: 500;
-  padding: 8px;
+  padding: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
 
   @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     align-items: center;
@@ -25,12 +25,14 @@ const DesktopHeader = styled.div`
 
 const MobileHeader = styled.div`
   font-weight: medium;
-  font-size: 16px;
-  font-weight: 500;
   padding: 8px;
+  font-weight: 500;
+  padding: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
 
   @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     display: none;
@@ -38,8 +40,8 @@ const MobileHeader = styled.div`
 
   @media screen and (max-width: ${MEDIA_WIDTHS.deprecated_upToExtraSmall}px) {
     display: flex;
-    flex-direction: column;
-    align-items: start;
+    flex-direction: row;
+    justify-content: space-between;
   }
 `
 
@@ -49,16 +51,12 @@ const ToggleWrap = styled.div`
   align-items: center;
 `
 
-const ToggleLabel = styled.div`
-  opacity: ${({ theme }) => theme.opacity.hover};
-  margin-right: 10px;
-`
-
-const MobileTogglePosition = styled.div`
-  @media screen and (max-width: ${MEDIA_WIDTHS.deprecated_upToExtraSmall}px) {
-    position: absolute;
-    right: 20px;
-  }
+const ToggleLabel = styled.button`
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  color: ${({ theme }) => theme.accentAction};
+  font-size: 1rem;
 `
 
 type PositionListProps = React.PropsWithChildren<{
@@ -79,34 +77,26 @@ export default function PositionList({
           <Trans>Your positions</Trans>
           {positions && ' (' + positions.length + ')'}
         </div>
-        <ToggleWrap>
-          <ToggleLabel>
-            <Trans>Show closed positions</Trans>
-          </ToggleLabel>
-          <Toggle
-            id="desktop-hide-closed-positions"
-            isActive={!userHideClosedPositions}
-            toggle={() => {
-              setUserHideClosedPositions(!userHideClosedPositions)
-            }}
-          />
-        </ToggleWrap>
+
+        <ToggleLabel
+          id="desktop-hide-closed-positions"
+          onClick={() => {
+            setUserHideClosedPositions(!userHideClosedPositions)
+          }}
+        >
+          {userHideClosedPositions ? <Trans>Show closed positions</Trans> : <Trans>Hide closed positions</Trans>}
+        </ToggleLabel>
       </DesktopHeader>
       <MobileHeader>
         <Trans>Your positions</Trans>
         <ToggleWrap>
-          <ToggleLabel>
-            <Trans>Show closed positions</Trans>
+          <ToggleLabel
+            onClick={() => {
+              setUserHideClosedPositions(!userHideClosedPositions)
+            }}
+          >
+            {userHideClosedPositions ? <Trans>Show closed positions</Trans> : <Trans>Hide closed positions</Trans>}
           </ToggleLabel>
-          <MobileTogglePosition>
-            <Toggle
-              id="mobile-hide-closed-positions"
-              isActive={!userHideClosedPositions}
-              toggle={() => {
-                setUserHideClosedPositions(!userHideClosedPositions)
-              }}
-            />
-          </MobileTogglePosition>
         </ToggleWrap>
       </MobileHeader>
       {positions.map((p) => {

src/components/PositionListItem/index.tsx

@@ -23,29 +23,22 @@ import { DAI, USDC_MAINNET, USDT, WBTC, WRAPPED_NATIVE_CURRENCY } from '../../co
 
 const LinkRow = styled(Link)`
   align-items: center;
-  border-radius: 20px;
   display: flex;
   cursor: pointer;
   user-select: none;
   display: flex;
   flex-direction: column;
-
   justify-content: space-between;
   color: ${({ theme }) => theme.deprecated_text1};
-  margin: 8px 0;
   padding: 16px;
   text-decoration: none;
   font-weight: 500;
-  background-color: ${({ theme }) => theme.deprecated_bg1};
 
-  &:last-of-type {
-    margin: 8px 0 0 0;
-  }
   & > div:not(:first-child) {
     text-align: center;
   }
   :hover {
-    background-color: ${({ theme }) => theme.deprecated_bg2};
+    background-color: ${({ theme }) => theme.hoverDefault};
   }
 
   @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
@@ -54,7 +47,7 @@ const LinkRow = styled(Link)`
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     flex-direction: column;
-    row-gap: 12px;
+    row-gap: 8px;
   `};
 `
 
@@ -74,29 +67,17 @@ const RangeLineItem = styled(DataLineItem)`
   display: flex;
   flex-direction: row;
   align-items: center;
-
   margin-top: 4px;
   width: 100%;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-  background-color: ${({ theme }) => theme.deprecated_bg2};
-    border-radius: 12px;
-    padding: 8px 0;
-`};
 `
 
 const DoubleArrow = styled.span`
   margin: 0 2px;
   color: ${({ theme }) => theme.deprecated_text3};
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    margin: 4px;
-    padding: 20px;
-  `};
 `
 
 const RangeText = styled.span`
-  /* background-color: ${({ theme }) => theme.deprecated_bg2}; */
-  padding: 0.25rem 0.5rem;
+  padding: 0.25rem 0.25rem;
   border-radius: 8px;
 `
 
@@ -123,7 +104,7 @@ const DataText = styled.div`
   font-size: 18px;
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    font-size: 14px;
+    font-size: 18px;
   `};
 `
 

src/pages/Pool/index.tsx

@@ -134,10 +134,13 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`
 
 const MainContentWrapper = styled.main`
   background-color: ${({ theme }) => theme.deprecated_bg0};
-  padding: 8px;
-  border-radius: 20px;
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  padding: 0;
+  border-radius: 16px;
   display: flex;
   flex-direction: column;
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
+    0px 24px 32px rgba(0, 0, 0, 0.01);
 `
 
 function PositionsLoadingPlaceholder() {
@@ -161,6 +164,7 @@ function PositionsLoadingPlaceholder() {
 
 function WrongNetworkCard() {
   const theme = useTheme()
+
   return (
     <>
       <PageWrapper>

src/pages/Pool/styleds.tsx

@@ -58,12 +58,13 @@ export const Dots = styled.span`
 `
 
 export const LoadingRows = styled(BaseLoadingRows)`
-  padding-top: 48px;
+  padding-top: 36px;
   min-width: 75%;
   max-width: 960px;
   grid-column-gap: 0.5em;
   grid-row-gap: 0.8em;
   grid-template-columns: repeat(3, 1fr);
+  padding: 8px;
 
   & > div:nth-child(4n + 1) {
     grid-column: 1 / 3;