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>
2023-04-24 15:06:15 -04:00 · 2023-04-24 15:06:15 -04:00 · 545fdd2cbe
commit 545fdd2cbe
parent 201dc2ce85
16 changed files with 33 additions and 39 deletions
--- a/src/components/AccountDrawer/AuthenticatedHeader.tsx
+++ b/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 */}
--- a/src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx
+++ b/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}
--- a/src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx
+++ b/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>
--- a/src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx
+++ b/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>
--- a/src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx
+++ b/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">
--- a/src/components/AccountDrawer/SlideOutMenu.tsx
+++ b/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>

--- a/src/components/ErrorBoundary/index.tsx
+++ b/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>
--- a/src/components/Popups/TransactionPopup.tsx
+++ b/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}
--- a/src/components/WalletModal/index.tsx
+++ b/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 ? (
--- a/src/nft/components/collection/Sweep.tsx
+++ b/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>
--- a/src/nft/components/details/AssetPriceDetails.tsx
+++ b/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>
--- a/src/nft/components/details/detailsV2/snapshots/DataPage.test.tsx.snap
+++ b/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>
--- a/src/nft/components/profile/list/ListPage.tsx
+++ b/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>
  ) : (
--- a/src/nft/components/profile/list/Modal/SuccessScreen.tsx
+++ b/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)}
--- a/src/nft/components/profile/view/snapshots/EmptyWalletContent.test.tsx.snap
+++ b/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>
--- a/src/theme/components/text.tsx
+++ b/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} />