feat: Match tokens table & price designs with nft (#5402)

* Match tokens table & price designs with nft
- adjust token table max width
- update price percentage changes styling

* Default delta arrow iconSize to 20px
* Pass in boolean instead of number to styled component param

src/components/NavBar/SuggestionRow.tsx

@@ -22,11 +22,27 @@ import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
+import { getDeltaArrow } from '../Tokens/TokenDetails/PriceChart'
 import * as styles from './SearchBar.css'
 
 const StyledLogoContainer = styled(LogoContainer)`
   margin-right: 8px;
 `
+const PriceChangeContainer = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const PriceChangeText = styled.span<{ isNegative: boolean }>`
+  font-size: 14px;
+  line-height: 20px;
+  color: ${({ theme, isNegative }) => (isNegative ? theme.accentFailure : theme.accentSuccess)};
+`
+
+const ArrowCell = styled.span`
+  padding-top: 5px;
+  padding-right: 3px;
+`
 
 interface CollectionRowProps {
   collection: GenieCollection
@@ -161,6 +177,8 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
     }
   }, [toggleOpen, isHovered, token, navigate, handleClick, tokenDetailsPath])
 
+  const arrow = getDeltaArrow(token.price24hChange, 18)
+
   return (
     <Link
       to={tokenDetailsPath}
@@ -198,9 +216,12 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
           </Row>
         )}
         {token.price24hChange && (
-          <Box className={styles.secondaryText} color={token.price24hChange >= 0 ? 'green400' : 'red400'}>
-            {token.price24hChange.toFixed(2)}%
-          </Box>
+          <PriceChangeContainer>
+            <ArrowCell>{arrow}</ArrowCell>
+            <PriceChangeText isNegative={token.price24hChange < 0}>
+              {Math.abs(token.price24hChange).toFixed(2)}%
+            </PriceChangeText>
+          </PriceChangeContainer>
         )}
       </Column>
     </Link>

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -42,14 +42,14 @@ export function calculateDelta(start: number, current: number) {
   return (current / start - 1) * 100
 }
 
-export function getDeltaArrow(delta: number | null | undefined) {
+export function getDeltaArrow(delta: number | null | undefined, iconSize = 20) {
   // Null-check not including zero
   if (delta === null || delta === undefined) {
     return null
   } else if (Math.sign(delta) < 0) {
-    return <StyledDownArrow size={24} key="arrow-down" />
+    return <StyledDownArrow size={iconSize} key="arrow-down" aria-label="down" />
   }
-  return <StyledUpArrow size={24} key="arrow-up" />
+  return <StyledUpArrow size={iconSize} key="arrow-up" aria-label="up" />
 }
 
 export function formatDelta(delta: number | null | undefined) {
@@ -57,13 +57,15 @@ export function formatDelta(delta: number | null | undefined) {
   if (delta === null || delta === undefined || delta === Infinity || isNaN(delta)) {
     return '-'
   }
-  let formattedDelta = delta.toFixed(2) + '%'
-  if (Math.sign(delta) > 0) {
-    formattedDelta = '+' + formattedDelta
-  }
+  const formattedDelta = Math.abs(delta).toFixed(2) + '%'
   return formattedDelta
 }
 
+export const DeltaText = styled.span<{ delta: number | undefined }>`
+  color: ${({ theme, delta }) =>
+    delta !== undefined ? (Math.sign(delta) < 0 ? theme.accentFailure : theme.accentSuccess) : theme.textPrimary};
+`
+
 export const ChartHeader = styled.div`
   position: absolute;
 `
@@ -77,8 +79,8 @@ export const DeltaContainer = styled.div`
   align-items: center;
   margin-top: 4px;
 `
-const ArrowCell = styled.div`
-  padding-left: 2px;
+export const ArrowCell = styled.div`
+  padding-right: 3px;
   display: flex;
 `
 
@@ -236,8 +238,8 @@ export function PriceChart({ width, height, prices, timePeriod }: PriceChartProp
       <ChartHeader>
         <TokenPrice>{formatDisplayPrice(displayPrice.value)}</TokenPrice>
         <DeltaContainer>
-          {formattedDelta}
           <ArrowCell>{arrow}</ArrowCell>
+          <DeltaText delta={delta}>{formattedDelta}</DeltaText>
         </DeltaContainer>
       </ChartHeader>
       {!hasData ? (

src/components/Tokens/TokenTable/FilterOption.tsx

-//import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
 const FilterOption = styled.button<{ active: boolean; highlight?: boolean }>`
   height: 100%;

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -32,7 +32,7 @@ import {
   useSetSortMethod,
 } from '../state'
 import InfoTip from '../TokenDetails/InfoTip'
-import { formatDelta, getDeltaArrow } from '../TokenDetails/PriceChart'
+import { ArrowCell, DeltaText, formatDelta, getDeltaArrow } from '../TokenDetails/PriceChart'
 
 const Cell = styled.div`
   display: flex;
@@ -197,6 +197,7 @@ const PriceInfoCell = styled(Cell)`
     align-items: flex-end;
   }
 `
+
 const HeaderCellWrapper = styled.span<{ onClick?: () => void }>`
   align-items: center;
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
@@ -442,6 +443,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   const timePeriod = useAtomValue(filterTimeAtom)
   const delta = token.market?.pricePercentChange?.value
   const arrow = getDeltaArrow(delta)
+  const smallArrow = getDeltaArrow(delta, 14)
   const formattedDelta = formatDelta(delta)
   const rank = sortAscending ? tokenListLength - tokenListIndex : tokenListIndex + 1
 
@@ -483,16 +485,16 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
               <PriceInfoCell>
                 {formatUSDPrice(token.market?.price?.value)}
                 <PercentChangeInfoCell>
-                  {formattedDelta}
-                  {arrow}
+                  <ArrowCell>{smallArrow}</ArrowCell>
+                  <DeltaText delta={delta}>{formattedDelta}</DeltaText>
                 </PercentChangeInfoCell>
               </PriceInfoCell>
             </ClickableContent>
           }
           percentChange={
             <ClickableContent>
-              {formattedDelta}
-              {arrow}
+              <ArrowCell>{arrow}</ArrowCell>
+              <DeltaText delta={delta}>{formattedDelta}</DeltaText>
             </ClickableContent>
           }
           tvl={

src/components/Tokens/constants.ts

-export const MAX_WIDTH_MEDIA_BREAKPOINT = '960px'
+export const MAX_WIDTH_MEDIA_BREAKPOINT = '1200px'
+export const XLARGE_MEDIA_BREAKPOINT = '960px'
 export const LARGE_MEDIA_BREAKPOINT = '840px'
 export const MEDIUM_MEDIA_BREAKPOINT = '720px'
 export const SMALL_MEDIA_BREAKPOINT = '540px'

src/nft/pages/collection/index.css.ts

 import { style } from '@vanilla-extract/css'
-import {
-  MAX_WIDTH_MEDIA_BREAKPOINT,
-  MOBILE_MEDIA_BREAKPOINT,
-  SMALL_MEDIA_BREAKPOINT,
-} from 'components/Tokens/constants'
+import { MOBILE_MEDIA_BREAKPOINT, SMALL_MEDIA_BREAKPOINT, XLARGE_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
 import { buttonTextMedium } from 'nft/css/common.css'
 import { loadingBlock } from 'nft/css/loading.css'
 import { css } from 'styled-components/macro'
@@ -66,12 +62,12 @@ export const noCollectionAssets = sprinkles({
 })
 
 export const ScreenBreakpointsPaddings = css`
-  @media screen and (min-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
+  @media screen and (min-width: ${XLARGE_MEDIA_BREAKPOINT}) {
     padding-left: 48px;
     padding-right: 48px;
   }
 
-  @media screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
+  @media screen and (max-width: ${XLARGE_MEDIA_BREAKPOINT}) {
     padding-left: 26px;
     padding-right: 26px;
   }

src/pages/Tokens/index.tsx

@@ -32,7 +32,7 @@ const ExploreContainer = styled.div`
 `
 export const TitleContainer = styled.div`
   margin-bottom: 32px;
-  max-width: 960px;
+  max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
   margin-left: auto;
   margin-right: auto;
   display: flex;