fix(token-details): nits from design re: headers, spacing, layout (#4829)

* fix(token-details): nits from design re: headers, spacing, layout

* pr feedback

src/components/Tokens/TokenDetails/About.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
+import { ThemedText } from 'theme'
 import { textFadeIn } from 'theme/animations'
 
 import Resource from './Resource'
@@ -24,8 +25,8 @@ const TokenDescriptionContainer = styled.div`
 const TruncateDescriptionButton = styled.div`
   color: ${({ theme }) => theme.textSecondary};
   font-weight: 400;
-  font-size: 14px;
-  padding-top: 14px;
+  font-size: 0.85em;
+  padding-top: 0.5em;
 
   &:hover,
   &:focus {
@@ -52,9 +53,8 @@ export const AboutContainer = styled.div`
   padding: 24px 0px;
   ${textFadeIn}
 `
-export const AboutHeader = styled.span`
-  font-size: 28px;
-  line-height: 36px;
+export const AboutHeader = styled(ThemedText.MediumHeader)`
+  font-size: 28px !important;
 `
 
 export const ResourcesContainer = styled.div`
@@ -90,10 +90,14 @@ export function AboutSection({ address, description, homepageUrl, twitterName }:
         {tokenDescription}
         {shouldTruncate && (
           <TruncateDescriptionButton onClick={() => setIsDescriptionTruncated(!isDescriptionTruncated)}>
-            {isDescriptionTruncated ? <Trans>Read more</Trans> : <Trans>Hide</Trans>}
+            {isDescriptionTruncated ? <Trans>Show more</Trans> : <Trans>Hide</Trans>}
           </TruncateDescriptionButton>
         )}
       </TokenDescriptionContainer>
+      <br />
+      <ThemedText.SubHeaderSmall>
+        <Trans>Links</Trans>
+      </ThemedText.SubHeaderSmall>
       <ResourcesContainer>
         <Resource name={'Etherscan'} link={`https://etherscan.io/address/${address}`} />
         <Resource name={'Protocol info'} link={`https://info.uniswap.org/#/tokens/${address}`} />

src/components/Tokens/TokenDetails/AddressSection.tsx

 import { Trans } from '@lingui/macro'
 import styled from 'styled-components/macro'
-import { CopyContractAddress } from 'theme'
+import { CopyContractAddress, ThemedText } from 'theme'
 
 export const ContractAddressSection = styled.div`
   display: flex;
   flex-direction: column;
   color: ${({ theme }) => theme.textSecondary};
-  font-weight: 600;
-  font-size: 14px;
+  font-size: 0.9em;
   gap: 4px;
-  padding: 36px 0px;
+  padding: 4px 0px;
 `
 
 const ContractAddress = styled.button`
@@ -26,7 +25,9 @@ const ContractAddress = styled.button`
 export default function AddressSection({ address }: { address: string }) {
   return (
     <ContractAddressSection>
-      <Trans>Contract address</Trans>
+      <ThemedText.SubHeaderSmall>
+        <Trans>Contract address</Trans>
+      </ThemedText.SubHeaderSmall>
       <ContractAddress>
         <CopyContractAddress address={address} />
       </ContractAddress>

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { TokenSortMethod } from 'graphql/data/TopTokens'
 import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
+import { ThemedText } from 'theme'
 import { textFadeIn } from 'theme/animations'
 import { formatDollarAmount } from 'utils/formatDollarAmt'
 
@@ -21,13 +22,16 @@ export const StatWrapper = styled.div`
 export const TokenStatsSection = styled.div`
   display: flex;
   flex-wrap: wrap;
-  ${textFadeIn}
 `
 export const StatPair = styled.div`
   display: flex;
   flex: 1;
   flex-wrap: wrap;
 `
+
+const Header = styled(ThemedText.MediumHeader)`
+  font-size: 28px !important;
+`
 const StatTitle = styled.div`
   display: flex;
   flex-direction: row;
@@ -40,6 +44,10 @@ const StatPrice = styled.span`
 const NoData = styled.div`
   color: ${({ theme }) => theme.textTertiary};
 `
+const Wrapper = styled.div`
+  gap: 16px;
+  ${textFadeIn}
+`
 
 type NumericStat = number | undefined | null
 
@@ -66,28 +74,33 @@ export default function StatsSection(props: StatsSectionProps) {
   const { priceLow52W, priceHigh52W, TVL, volume24H } = props
   if (TVL || volume24H || priceLow52W || priceHigh52W) {
     return (
-      <TokenStatsSection>
-        <StatPair>
-          <Stat
-            value={TVL}
-            description={HEADER_DESCRIPTIONS[TokenSortMethod.TOTAL_VALUE_LOCKED]}
-            title={<Trans>TVL</Trans>}
-          />
-          <Stat
-            value={volume24H}
-            description={
-              <Trans>
-                24H volume is the amount of the asset that has been traded on Uniswap v3 during the past 24 hours.
-              </Trans>
-            }
-            title={<Trans>24H volume</Trans>}
-          />
-        </StatPair>
-        <StatPair>
-          <Stat value={priceLow52W} title={<Trans>52W low</Trans>} />
-          <Stat value={priceHigh52W} title={<Trans>52W high</Trans>} />
-        </StatPair>
-      </TokenStatsSection>
+      <Wrapper>
+        <Header>
+          <Trans>Stats</Trans>
+        </Header>
+        <TokenStatsSection>
+          <StatPair>
+            <Stat
+              value={TVL}
+              description={HEADER_DESCRIPTIONS[TokenSortMethod.TOTAL_VALUE_LOCKED]}
+              title={<Trans>TVL</Trans>}
+            />
+            <Stat
+              value={volume24H}
+              description={
+                <Trans>
+                  24H volume is the amount of the asset that has been traded on Uniswap v3 during the past 24 hours.
+                </Trans>
+              }
+              title={<Trans>24H volume</Trans>}
+            />
+          </StatPair>
+          <StatPair>
+            <Stat value={priceLow52W} title={<Trans>52W low</Trans>} />
+            <Stat value={priceHigh52W} title={<Trans>52W high</Trans>} />
+          </StatPair>
+        </TokenStatsSection>
+      </Wrapper>
     )
   } else {
     return <NoData>No stats available</NoData>

src/pages/TokenDetails/index.tsx

@@ -31,6 +31,12 @@ import { ArrowLeft } from 'react-feather'
 import { useNavigate, useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
+const Hr = styled.hr`
+  background-color: ${({ theme }) => theme.textSecondary};
+  opacity: 24%;
+  border: none;
+  height: 0.5px;
+`
 export const TokenDetailsLayout = styled.div`
   display: flex;
   gap: 60px;
@@ -177,6 +183,7 @@ export default function TokenDetails() {
               priceHigh52W={tokenQueryData.market?.priceHigh52W?.value}
               priceLow52W={tokenQueryData.market?.priceLow52W?.value}
             />
+            <Hr />
             <AboutSection
               address={tokenQueryData.address ?? ''}
               description={tokenQueryData.project?.description}

src/theme/index.tsx

@@ -355,6 +355,9 @@ export const ThemedText = {
   SubHeader(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={16} color={'textPrimary'} {...props} />
   },
+  SubHeaderSmall(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={14} color={'textSecondary'} {...props} />
+  },
   DeprecatedSmall(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={11} {...props} />
   },