ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Tina 2023-04-24 15:06:15 -04:00 committed by GitHub
parent 201dc2ce85
commit 545fdd2cbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 33 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AccountDrawer/AuthenticatedHeader.tsx
View File

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

2
src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx
View File

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

2
src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx
View File

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

4
src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx
View File

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

4
src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx
View File

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

2
src/components/AccountDrawer/SlideOutMenu.tsx
View File

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

4
src/components/ErrorBoundary/index.tsx
View File

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

2
src/components/Popups/TransactionPopup.tsx
View File

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

2
src/components/WalletModal/index.tsx
View File

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

5
src/nft/components/collection/Sweep.tsx
View File

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

12
src/nft/components/details/AssetPriceDetails.tsx
View File

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

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

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

2
src/nft/components/profile/list/ListPage.tsx
View File

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

4
src/nft/components/profile/list/Modal/SuccessScreen.tsx
View File

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

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

@ -88,7 +88,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
/> />
</svg> </svg>
<div <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 No NFTs yet
</div> </div>
@ -128,7 +128,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
/> />
</svg> </svg>
<div <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 No tokens yet
</div> </div>
@ -174,7 +174,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
/> />
</svg> </svg>
<div <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 No activity yet
</div> </div>
@ -209,7 +209,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
/> />
</svg> </svg>
<div <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 No pools yet
</div> </div>

3
src/theme/components/text.tsx
View File

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