feat: Update Subhead text to match Figma spec (#6307)

* update font weight and line height to match figma

* remove unnecessary fontWeight and lineHeight props

* revert textSecondary change

* revert SubheadSmall change

* remove lineHeight from Subheader for Success screen

* add Trans wrapper to Sweep text

* reduce gap between name and address to 2px

* update snapshot tests for classnames change

* fix failing snapshot

---------
Co-authored-by: Lynn Yu <lynn.yu@uniswap.org>

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -114,7 +114,7 @@ const AccountNamesWrapper = styled.div`
   width: 100%;
   flex-direction: column;
   justify-content: center;
-  gap: 4px;
+  gap: 2px;
 `
 
 const StyledInfoIcon = styled(Info)`
@@ -240,7 +240,7 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
           <StatusIcon connection={connection} size={40} />
           {account && (
             <AccountNamesWrapper>
-              <ThemedText.SubHeader color="textPrimary" fontWeight={500}>
+              <ThemedText.SubHeader>
                 <CopyText toCopy={ENSName ?? account}>{ENSName ?? shortenAddress(account, 4, 4)}</CopyText>
               </ThemedText.SubHeader>
               {/* Displays smaller view of account if ENS name was rendered above */}

src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx

@@ -48,7 +48,7 @@ export function ActivityRow({
             <PortfolioLogo chainId={chainId} currencies={currencies} images={logos} accountAddress={otherAccount} />
           </Column>
         }
-        title={<ThemedText.SubHeader fontWeight={500}>{title}</ThemedText.SubHeader>}
+        title={<ThemedText.SubHeader>{title}</ThemedText.SubHeader>}
         descriptor={
           <ActivityRowDescriptor color="textSecondary">
             {descriptor}

src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx

@@ -140,7 +140,7 @@ export function ActivityTab({ account }: { account: string }) {
       <PortfolioTabWrapper>
         {activityGroups.map((activityGroup) => (
           <ActivityGroupWrapper key={activityGroup.title}>
-            <ThemedText.SubHeader color="textSecondary" fontWeight={500} marginLeft="16px">
+            <ThemedText.SubHeader color="textSecondary" marginLeft="16px">
               {activityGroup.title}
             </ThemedText.SubHeader>
             <Column>

src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx

@@ -154,7 +154,7 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
         left={<PortfolioLogo chainId={chainId} currencies={[pool.token0, pool.token1]} />}
         title={
           <Row>
-            <ThemedText.SubHeader fontWeight={500}>
+            <ThemedText.SubHeader>
               {pool.token0.symbol} / {pool.token1?.symbol}
             </ThemedText.SubHeader>
           </Row>
@@ -173,7 +173,7 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
                 </div>
               }
             >
-              <ThemedText.SubHeader fontWeight={500}>
+              <ThemedText.SubHeader>
                 {formatNumber((liquidityValue ?? 0) + (feeValue ?? 0), NumberType.PortfolioBalance)}
               </ThemedText.SubHeader>
             </MouseoverTooltip>

src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx

@@ -112,7 +112,7 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
     >
       <PortfolioRow
         left={<PortfolioLogo chainId={currency.chainId} currencies={[currency]} size="40px" />}
-        title={<ThemedText.SubHeader fontWeight={500}>{token?.name}</ThemedText.SubHeader>}
+        title={<ThemedText.SubHeader>{token?.name}</ThemedText.SubHeader>}
         descriptor={
           <TokenBalanceText>
             {formatNumber(quantity, NumberType.TokenNonTx)} {token?.symbol}
@@ -122,7 +122,7 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
         right={
           denominatedValue && (
             <>
-              <ThemedText.SubHeader fontWeight={500}>
+              <ThemedText.SubHeader>
                 {formatNumber(denominatedValue?.value, NumberType.PortfolioBalance)}
               </ThemedText.SubHeader>
               <Row justify="flex-end">

src/components/AccountDrawer/SlideOutMenu.tsx

@@ -49,7 +49,7 @@ export const SlideOutMenu = ({
     <Header>
       <StyledArrow data-testid="wallet-back" onClick={onClose} size={24} />
       <Title>
-        <ThemedText.SubHeader fontWeight={500}>{title}</ThemedText.SubHeader>
+        <ThemedText.SubHeader>{title}</ThemedText.SubHeader>
       </Title>
     </Header>
 

src/components/ErrorBoundary/index.tsx

@@ -132,7 +132,7 @@ const Fallback = ({ error, eventId }: { error: Error; eventId: string | null })
               </Column>
               <CodeBlockWrapper>
                 <CodeTitle>
-                  <ThemedText.SubHeader fontWeight={500}>
+                  <ThemedText.SubHeader>
                     <Trans>Error ID: {eventId}</Trans>
                   </ThemedText.SubHeader>
                   <CopyToClipboard toCopy={eventId}>
@@ -164,7 +164,7 @@ const Fallback = ({ error, eventId }: { error: Error; eventId: string | null })
               </Column>
               <CodeBlockWrapper>
                 <CodeTitle>
-                  <ThemedText.SubHeader fontWeight={500}>Error details</ThemedText.SubHeader>
+                  <ThemedText.SubHeader>Error details</ThemedText.SubHeader>
                   <CopyToClipboard toCopy={errorDetails}>
                     <CopyIcon />
                   </CopyToClipboard>

src/components/Popups/TransactionPopup.tsx

@@ -43,7 +43,7 @@ function TransactionPopupContent({ tx, chainId }: { tx: TransactionDetails; chai
           <PopupAlertTriangle />
         )
       }
-      title={<ThemedText.SubHeader fontWeight={500}>{activity.title}</ThemedText.SubHeader>}
+      title={<ThemedText.SubHeader>{activity.title}</ThemedText.SubHeader>}
       descriptor={
         <Descriptor color="textSecondary">
           {activity.descriptor}

src/components/WalletModal/index.tsx

@@ -179,7 +179,7 @@ export default function WalletModal({ openSettings }: { openSettings: () => void
   return (
     <Wrapper data-testid="wallet-modal">
       <AutoRow justify="space-between" width="100%" marginBottom="16px">
-        <ThemedText.SubHeader fontWeight={500}>Connect a wallet</ThemedText.SubHeader>
+        <ThemedText.SubHeader>Connect a wallet</ThemedText.SubHeader>
         <IconButton Icon={Settings} onClick={openSettings} data-testid="wallet-settings" />
       </AutoRow>
       {pendingError ? (

src/nft/components/collection/Sweep.tsx

@@ -2,6 +2,7 @@ import 'rc-slider/assets/index.css'
 
 import { BigNumber } from '@ethersproject/bignumber'
 import { formatEther, parseEther } from '@ethersproject/units'
+import { Trans } from '@lingui/macro'
 import { SweepFetcherParams, useSweepNftAssets } from 'graphql/data/nft/Asset'
 import { useBag, useCollectionFilters } from 'nft/hooks'
 import { GenieAsset, isPooledMarket, Markets } from 'nft/types'
@@ -366,8 +367,8 @@ export const Sweep = ({ contractAddress, minPrice, maxPrice }: SweepProps) => {
     <SweepContainer data-testid="nft-sweep-slider">
       <SweepLeftmostContainer>
         <SweepHeaderContainer>
-          <ThemedText.SubHeader color="textPrimary" lineHeight="20px" paddingTop="6px" paddingBottom="6px">
-            Sweep
+          <ThemedText.SubHeader lineHeight="20px" paddingTop="6px" paddingBottom="6px">
+            <Trans>Sweep</Trans>
           </ThemedText.SubHeader>
         </SweepHeaderContainer>
         <SweepSubContainer>

src/nft/components/details/AssetPriceDetails.tsx

@@ -241,9 +241,7 @@ const OwnerContainer = ({ asset }: { asset: WalletAsset }) => {
   return (
     <BestPriceContainer>
       <HeaderRow>
-        <ThemedText.SubHeader color="accentAction" fontWeight={500} lineHeight="24px">
-          {listing ? 'Your Price' : 'List for Sale'}
-        </ThemedText.SubHeader>
+        <ThemedText.SubHeader color="accentAction">{listing ? 'Your Price' : 'List for Sale'}</ThemedText.SubHeader>
         {listing && (
           <ExternalLink href={listing.marketplaceUrl}>
             <MarketplaceIcon alt={listing.marketplace} src={getMarketplaceIcon(listing.marketplace)} />
@@ -300,9 +298,7 @@ const NotForSale = ({ collectionName, collectionUrl }: { collectionName: string;
     <BestPriceContainer>
       <NotForSaleContainer>
         <CancelListingIcon width="79px" height="79px" color={theme.textTertiary} />
-        <ThemedText.SubHeader fontWeight={500} lineHeight="24px">
-          Not for sale
-        </ThemedText.SubHeader>
+        <ThemedText.SubHeader>Not for sale</ThemedText.SubHeader>
         <DiscoveryContainer>
           <ThemedText.BodySecondary fontSize="14px" lineHeight="20px">
             Discover similar NFTs for sale in
@@ -376,9 +372,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
       ) : isForSale ? (
         <BestPriceContainer>
           <HeaderRow>
-            <ThemedText.SubHeader color="accentAction" fontWeight={500} lineHeight="24px">
-              Best Price
-            </ThemedText.SubHeader>
+            <ThemedText.SubHeader color="accentAction">Best Price</ThemedText.SubHeader>
             <ExternalLink href={cheapestOrder.marketplaceUrl}>
               <MarketplaceIcon alt={cheapestOrder.marketplace} src={getMarketplaceIcon(cheapestOrder.marketplace)} />
             </ExternalLink>

src/nft/components/details/detailsV2/__snapshots__/DataPage.test.tsx.snap

@@ -162,7 +162,7 @@ exports[`placeholder containers load 1`] = `
             class="c3 c4 c8"
           >
             <div
-              class="c9 c10 css-6ms77s"
+              class="c9 c10 css-rjqmed"
             >
               Traits
             </div>
@@ -179,12 +179,12 @@ exports[`placeholder containers load 1`] = `
             class="c3 c4 c8"
           >
             <div
-              class="c9 c11 css-6ms77s"
+              class="c9 c11 css-rjqmed"
             >
               Description
             </div>
             <div
-              class="c9 c12 css-6ms77s"
+              class="c9 c12 css-rjqmed"
             >
               Details
             </div>
@@ -202,17 +202,17 @@ exports[`placeholder containers load 1`] = `
           class="c3 c4 c8"
         >
           <div
-            class="c9 c11 css-6ms77s"
+            class="c9 c11 css-rjqmed"
           >
             Activity
           </div>
           <div
-            class="c9 c12 css-6ms77s"
+            class="c9 c12 css-rjqmed"
           >
             Offers
           </div>
           <div
-            class="c9 c12 css-6ms77s"
+            class="c9 c12 css-rjqmed"
           >
             Listings
           </div>

src/nft/components/profile/list/ListPage.tsx

@@ -251,7 +251,7 @@ export const ListPage = () => {
   }
 
   const BannerText = isMobile ? (
-    <ThemedText.SubHeader lineHeight="24px">
+    <ThemedText.SubHeader>
       <Trans>Receive</Trans>
     </ThemedText.SubHeader>
   ) : (

src/nft/components/profile/list/Modal/SuccessScreen.tsx

@@ -101,11 +101,11 @@ export const SuccessScreen = ({ overlayClick }: { overlayClick: () => void }) =>
         ))}
       </SuccessImageWrapper>
       <Row justify="space-between" align="flex-start" marginBottom="16px">
-        <ThemedText.SubHeader lineHeight="24px">
+        <ThemedText.SubHeader>
           <Trans>Proceeds if sold</Trans>
         </ThemedText.SubHeader>
         <ProceedsColumn>
-          <ThemedText.SubHeader lineHeight="24px">{formatEth(totalEthListingValue)} ETH</ThemedText.SubHeader>
+          <ThemedText.SubHeader>{formatEth(totalEthListingValue)} ETH</ThemedText.SubHeader>
           {usdcValue && (
             <ThemedText.BodySmall lineHeight="20px" color="textSecondary">
               {formatCurrencyAmount(usdcValue, NumberType.FiatTokenPrice)}

src/nft/components/profile/view/__snapshots__/EmptyWalletContent.test.tsx.snap

@@ -88,7 +88,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
         />
       </svg>
       <div
-        class="c1 c2 common__127l8hd1 sprinkles_fontWeight_semibold_sm__rgw6ezen sprinkles_fontSize_28_sm__rgw6ezcw sprinkles_lineHeight_36_sm__rgw6ezgl css-6ms77s"
+        class="c1 c2 common__127l8hd1 sprinkles_fontWeight_semibold_sm__rgw6ezen sprinkles_fontSize_28_sm__rgw6ezcw sprinkles_lineHeight_36_sm__rgw6ezgl css-rjqmed"
       >
         No NFTs yet
       </div>
@@ -128,7 +128,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
         />
       </svg>
       <div
-        class="c1 c2 common__127l8hd1 sprinkles_fontWeight_semibold_sm__rgw6ezen sprinkles_fontSize_28_sm__rgw6ezcw sprinkles_lineHeight_36_sm__rgw6ezgl css-6ms77s"
+        class="c1 c2 common__127l8hd1 sprinkles_fontWeight_semibold_sm__rgw6ezen sprinkles_fontSize_28_sm__rgw6ezcw sprinkles_lineHeight_36_sm__rgw6ezgl css-rjqmed"
       >
         No tokens yet
       </div>
@@ -174,7 +174,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
         />
       </svg>
       <div
-        class="c1 c2 common__127l8hd1 sprinkles_fontWeight_semibold_sm__rgw6ezen sprinkles_fontSize_28_sm__rgw6ezcw sprinkles_lineHeight_36_sm__rgw6ezgl css-6ms77s"
+        class="c1 c2 common__127l8hd1 sprinkles_fontWeight_semibold_sm__rgw6ezen sprinkles_fontSize_28_sm__rgw6ezcw sprinkles_lineHeight_36_sm__rgw6ezgl css-rjqmed"
       >
         No activity yet
       </div>
@@ -209,7 +209,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
         />
       </svg>
       <div
-        class="c1 c2 common__127l8hd1 sprinkles_fontWeight_semibold_sm__rgw6ezen sprinkles_fontSize_28_sm__rgw6ezcw sprinkles_lineHeight_36_sm__rgw6ezgl css-6ms77s"
+        class="c1 c2 common__127l8hd1 sprinkles_fontWeight_semibold_sm__rgw6ezen sprinkles_fontSize_28_sm__rgw6ezcw sprinkles_lineHeight_36_sm__rgw6ezgl css-rjqmed"
       >
         No pools yet
       </div>

src/theme/components/text.tsx

@@ -53,8 +53,7 @@ export const ThemedText = {
     return <TextWrapper fontWeight={400} fontSize={20} color="textPrimary" {...props} />
   },
   SubHeader(props: TextProps) {
-    // @todo designs use `fontWeight: 500` and we currently have a mix of 600 and 500
-    return <TextWrapper fontWeight={600} fontSize={16} color="textPrimary" {...props} />
+    return <TextWrapper fontWeight={500} fontSize={16} color="textPrimary" lineHeight="24px" {...props} />
   },
   SubHeaderSmall(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={14} color="textSecondary" {...props} />