feat: fix explore and pools titles to match designs. (#4399)

init

src/pages/Pool/PositionPage.tsx

@@ -594,7 +594,7 @@ export function PositionPage() {
                 to="/pool"
               >
                 <HoverText>
-                  <Trans>← Back to Pools Overview</Trans>
+                  <Trans>← Back to Pools</Trans>
                 </HoverText>
               </Link>
               <ResponsiveRow>

src/pages/Pool/index.tsx

@@ -159,9 +159,9 @@ function WrongNetworkCard() {
         <AutoColumn gap="lg" justify="center">
           <AutoColumn gap="lg" style={{ width: '100%' }}>
             <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
-              <ThemedText.DeprecatedBody fontSize={'20px'}>
-                <Trans>Pools Overview</Trans>
-              </ThemedText.DeprecatedBody>
+              <ThemedText.LargeHeader>
+                <Trans>Pools</Trans>
+              </ThemedText.LargeHeader>
             </TitleRow>
 
             <MainContentWrapper>
@@ -257,9 +257,9 @@ export default function Pool() {
           <AutoColumn gap="lg" justify="center">
             <AutoColumn gap="lg" style={{ width: '100%' }}>
               <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
-                <ThemedText.DeprecatedBody fontSize={'20px'}>
-                  <Trans>Pools Overview</Trans>
-                </ThemedText.DeprecatedBody>
+                <ThemedText.LargeHeader>
+                  <Trans>Pools</Trans>
+                </ThemedText.LargeHeader>
                 <ButtonRow>
                   {showV2Features && (
                     <Menu

src/pages/Tokens/index.tsx

+import { Trans } from '@lingui/macro'
 import { PageName } from 'components/AmplitudeAnalytics/constants'
 import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
@@ -12,6 +13,7 @@ import { useAtomValue, useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import styled from 'styled-components/macro'
+import { ThemedText } from 'theme'
 
 const ExploreContainer = styled.div`
   width: 100%;
@@ -21,8 +23,7 @@ const ExploreContainer = styled.div`
 const TokenTableContainer = styled.div`
   padding: 16px 0px;
 `
-const TitleContainer = styled.div`
-  font-size: 32px;
+export const TitleContainer = styled.div`
   margin-bottom: 16px;
   max-width: 960px;
   margin-left: auto;
@@ -70,7 +71,11 @@ const Tokens = () => {
   return (
     <Trace page={PageName.TOKENS_PAGE} shouldLogImpression>
       <ExploreContainer>
-        <TitleContainer>Explore Tokens</TitleContainer>
+        <TitleContainer>
+          <ThemedText.LargeHeader>
+            <Trans>Explore Tokens</Trans>
+          </ThemedText.LargeHeader>
+        </TitleContainer>
         <FiltersWrapper>
           <FiltersContainer>
             <NetworkFilter />

src/theme/index.tsx

@@ -320,6 +320,9 @@ export const ThemedText = {
   DeprecatedLargeHeader(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={24} {...props} />
   },
+  LargeHeader(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={36} color={'textPrimary'} {...props} />
+  },
   DeprecatedMediumHeader(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={20} {...props} />
   },