diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html index 5a0c2910a4..3ae1c8155e 100644 --- a/packages/apps/public/index.html +++ b/packages/apps/public/index.html @@ -8,17 +8,35 @@ <%= htmlWebpackPlugin.options.PAGE_TITLE %> diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index 80b834efde..8caefe12fb 100644 --- a/packages/apps/src/Apps.tsx +++ b/packages/apps/src/Apps.tsx @@ -55,6 +55,12 @@ export default React.memo(styled(Apps)` flex-direction: column; min-height: 100vh; + .--digits { + font-variant-numeric: tabular-nums; + text-align: right; + white-space: nowrap; + } + .--hidden { display: none; } diff --git a/packages/apps/src/Endpoints/Network.tsx b/packages/apps/src/Endpoints/Network.tsx index d405303585..9994fe7683 100644 --- a/packages/apps/src/Endpoints/Network.tsx +++ b/packages/apps/src/Endpoints/Network.tsx @@ -90,7 +90,7 @@ export default React.memo(styled(NetworkDisplay)` position: relative; &.isUnreachable { - opacity: 0.6; + opacity: var(--opacity-light); } &.isSelected, @@ -114,7 +114,7 @@ export default React.memo(styled(NetworkDisplay)` .endpointValue { .endpointExtra { - font-size: 0.75rem; + font-size: var(--font-size-small); opacity: 0.8; } } diff --git a/packages/apps/src/Menu/ChainInfo.tsx b/packages/apps/src/Menu/ChainInfo.tsx index cbbcdf31bb..4baf9d04ee 100644 --- a/packages/apps/src/Menu/ChainInfo.tsx +++ b/packages/apps/src/Menu/ChainInfo.tsx @@ -88,25 +88,21 @@ export default React.memo(styled(ChainInfo)` .info { flex: 1; + font-size: var(--font-size-tiny); + line-height: 1.2; padding-right: 0.5rem; text-align: right; .chain { + font-size: var(--font-size-small); max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .chain, .bestNumber { - font-size: var(--font-size-small); - line-height: 1.2; - } - .runtimeVersion { - font-size: 0.75rem; - line-height: 1.2; - letter-spacing: -0.01em; + letter-spacing: -0.01em; } } } diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx index c71ce011d6..d4a4770312 100644 --- a/packages/apps/src/Menu/Grouping.tsx +++ b/packages/apps/src/Menu/Grouping.tsx @@ -59,8 +59,8 @@ export default React.memo(styled(Grouping)` .groupHdr { border-radius: 0.25rem; padding: 0.857rem 1.375rem; - font-size: var(--font-size-medium); - font-weight: 400; + font-size: var(--font-size-small); + font-weight: var(--font-weight-normal); line-height: 1.214rem; > .ui--Icon { @@ -70,7 +70,7 @@ export default React.memo(styled(Grouping)` &.isActive .groupHdr { background-color: var(--bg-tabs); - font-weight: 400; + font-weight: var(--font-weight-normal); margin-bottom: 0; } diff --git a/packages/apps/src/Menu/Item.tsx b/packages/apps/src/Menu/Item.tsx index f1c9b2039a..3475384b90 100644 --- a/packages/apps/src/Menu/Item.tsx +++ b/packages/apps/src/Menu/Item.tsx @@ -53,7 +53,7 @@ export default React.memo(styled(Item)` white-space: nowrap; &.topLevel { - font-weight: 400; + font-weight: var(--font-weight-normal); line-height: 1.214rem; border-radius: 0.15rem; @@ -65,7 +65,7 @@ export default React.memo(styled(Item)` &.isActive.highlight--color-contrast { font-size: 1.15rem; - font-weight: 400; + font-weight: var(--font-weight-normal); color: var(--color-text); a { @@ -100,8 +100,8 @@ export default React.memo(styled(Item)` display: block; padding: 0.5rem 1.15rem 0.57rem; text-decoration: none; - font-weight: 400; - font-size: var(--font-size-medium); + font-weight: var(--font-weight-normal); + font-size: var(--font-size-small); line-height: 1.5rem; } diff --git a/packages/apps/src/Menu/NodeInfo.tsx b/packages/apps/src/Menu/NodeInfo.tsx index 5bb14f27b9..9d365cc3cb 100644 --- a/packages/apps/src/Menu/NodeInfo.tsx +++ b/packages/apps/src/Menu/NodeInfo.tsx @@ -20,7 +20,7 @@ function NodeInfo ({ className = '' }: Props): React.ReactElement { return (
{isApiReady && ( -
+
 
@@ -33,11 +33,15 @@ function NodeInfo ({ className = '' }: Props): React.ReactElement { export default React.memo(styled(NodeInfo)` background: transparent; - font-size: var(--font-size-small); + font-size: var(--font-size-tiny); line-height: 1.2; padding: 0 0 0 1rem; text-align: right; + .node { + font-size: var(--font-size-small); + } + > div { margin-bottom: -0.125em; diff --git a/packages/page-accounts/src/Sidebar/Balances.tsx b/packages/page-accounts/src/Sidebar/Balances.tsx index 98dbac3cbd..9470123228 100644 --- a/packages/page-accounts/src/Sidebar/Balances.tsx +++ b/packages/page-accounts/src/Sidebar/Balances.tsx @@ -48,7 +48,7 @@ export default React.memo(styled(Balances)` } .ui--Expander-content .ui--FormatBalance-value { - font-size: 0.93rem; + font-size: var(--font-size-small); } } } diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx index 37d3eb6209..e51a63cc27 100644 --- a/packages/page-accounts/src/Sidebar/Sidebar.tsx +++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx @@ -124,7 +124,7 @@ export default React.memo(styled(FullSidebar)` .ui--AddressMenu-index { font: var(--font-mono); text-align: left; - font-size: 0.857rem; + font-size: var(--font-size-small); } .ui--AddressMenu-addr { @@ -138,7 +138,7 @@ export default React.memo(styled(FullSidebar)` .ui--AddressMenu-index { font: var(--font-mono); text-align: left; - font-size: 0.857rem; + font-size: var(--font-size-small); } .ui--AddressMenu-copyaaddr { @@ -154,7 +154,7 @@ export default React.memo(styled(FullSidebar)` flex-direction: row; label { - font-size: 0.857rem; + font-size: var(--font-size-small); margin-right: 0.4rem; text-transform: capitalize; } @@ -200,7 +200,7 @@ export default React.memo(styled(FullSidebar)` .ui--AddressMenu-multisig { .ui--AddressMenu-identityTable, .ui--AddressMenu-multisigTable { - font-size: 0.93rem; + font-size: var(--font-size-small); margin-top: 0.6rem; .tr { @@ -215,7 +215,7 @@ export default React.memo(styled(FullSidebar)` font-weight: var(--font-weight-normal); text-align: left; flex-basis: 25%; - font-size: var(--font-size-label); + font-size: var(--font-size-tiny); &.top { align-self: flex-start; @@ -236,7 +236,7 @@ export default React.memo(styled(FullSidebar)` } .subs-number { - font-size: 1rem; + font-size: var(--font-size-base); margin-bottom: 0.714rem; } } diff --git a/packages/page-accounts/src/Vanity/index.tsx b/packages/page-accounts/src/Vanity/index.tsx index 0e87c3dd39..0c14e31ee2 100644 --- a/packages/page-accounts/src/Vanity/index.tsx +++ b/packages/page-accounts/src/Vanity/index.tsx @@ -179,7 +179,7 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme count: keyCount, elapsed: (elapsed / 1000).toFixed(2) } - }), 'start'], + }), 'start --digits'], [t('secret'), 'start'], [] ], diff --git a/packages/page-bounties/src/Bounties.tsx b/packages/page-bounties/src/Bounties.tsx index bc1bc36915..7cab5acdd3 100644 --- a/packages/page-bounties/src/Bounties.tsx +++ b/packages/page-bounties/src/Bounties.tsx @@ -74,7 +74,7 @@ export default React.memo(styled(Bounties)` } .via-identity .name { - font-size: 1rem; + font-size: var(--font-size-base); line-height: 1.7rem; text-transform: initial; filter: initial; diff --git a/packages/page-bounties/src/Bounty.tsx b/packages/page-bounties/src/Bounty.tsx index b3da2bce50..cdc0f63e67 100644 --- a/packages/page-bounties/src/Bounty.tsx +++ b/packages/page-bounties/src/Bounty.tsx @@ -214,7 +214,7 @@ export default React.memo(styled(Bounty)` & .inline-balance { width: 50%; - font-size: 1rem; + font-size: var(--font-size-base); line-height: normal; } @@ -255,7 +255,7 @@ export default React.memo(styled(Bounty)` } .block-to-time { - font-size: 0.7rem; + font-size: var(--font-size-tiny); line-height: 1.5rem; color: var(--color-label); } diff --git a/packages/page-bounties/src/BountyInfos/VotingLink.tsx b/packages/page-bounties/src/BountyInfos/VotingLink.tsx index 6a48fc7cf8..dbafcdd127 100644 --- a/packages/page-bounties/src/BountyInfos/VotingLink.tsx +++ b/packages/page-bounties/src/BountyInfos/VotingLink.tsx @@ -25,6 +25,6 @@ function VotingLink ({ className }: Props): React.ReactElement { export default React.memo(styled(VotingLink)` line-height: 0.85rem; - font-size: 0.7rem; + font-size: var(--font-size-tiny); text-decoration: underline; `); diff --git a/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx b/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx index bb37ae3bfb..05cc327df6 100644 --- a/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx +++ b/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx @@ -34,8 +34,7 @@ function BountyInfo ({ className = '', description, type = 'info' }: Props): Rea export default React.memo(styled(BountyInfo)(({ theme }: ThemeProps) => ` display: flex; align-items: center; - font-weight: 500; - font-size: 0.857rem; + font-size: var(--font-size-small); line-height: 1.5rem; .info-icon{ @@ -46,8 +45,8 @@ export default React.memo(styled(BountyInfo)(({ theme }: ThemeProps) => ` } .description { - font-weight: 400; - var(--font-size-label) + font-weight: var(--font-weight-normal); + var(font-size: var(--font-size-tiny);) line-height: 0.864rem; color: var(--color-label); word-wrap: break-word; diff --git a/packages/page-bounties/src/Description.tsx b/packages/page-bounties/src/Description.tsx index c610d5e846..8bdec4561e 100644 --- a/packages/page-bounties/src/Description.tsx +++ b/packages/page-bounties/src/Description.tsx @@ -23,7 +23,7 @@ function Description ({ className = '', dataTestId = '', description }: Props): export default React.memo(styled(Description)` margin-top: 0.28rem; - font-size: 0.7rem; + font-size: var(--font-size-tiny); line-height: 0.85rem; color: var(--color-label); `); diff --git a/packages/page-bounties/src/VotersColumn.tsx b/packages/page-bounties/src/VotersColumn.tsx index b15ea1164f..118a9649ea 100644 --- a/packages/page-bounties/src/VotersColumn.tsx +++ b/packages/page-bounties/src/VotersColumn.tsx @@ -72,8 +72,8 @@ export default React.memo(styled(VotersColumn)` .vote-numbers-label { margin-left: 0.75rem; - font-weight: bold; - font-size: 0.7rem; + font-weight: var(--font-weight-bold); + font-size: var(--font-size-tiny); line-height: 0.85rem; text-transform: uppercase; color: var(--color-label); diff --git a/packages/page-calendar/src/DayHour.tsx b/packages/page-calendar/src/DayHour.tsx index 2d919acb62..3406a90d43 100644 --- a/packages/page-calendar/src/DayHour.tsx +++ b/packages/page-calendar/src/DayHour.tsx @@ -78,7 +78,7 @@ export default React.memo(styled(DayHour)` font-weight: var(--font-weight-normal); line-height: 1; min-width: 5.5rem; - opacity: 0.6; + opacity: var(--opacity-light); padding: 0.5rem 1rem; text-align: right; text-transform: uppercase; diff --git a/packages/page-calendar/src/Month.tsx b/packages/page-calendar/src/Month.tsx index 739f7da45d..ec67f4f95f 100644 --- a/packages/page-calendar/src/Month.tsx +++ b/packages/page-calendar/src/Month.tsx @@ -109,7 +109,7 @@ export default React.memo(styled(Month)` .dayOfWeek { > * { - font-size: 0.7em; + font-size: var(--font-size-tiny); font-weight: var(--font-weight-normal); letter-spacing: 0.1em; text-align: center; diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx index eeef95c75d..f4532ea44c 100644 --- a/packages/page-claims/src/Attest.tsx +++ b/packages/page-claims/src/Attest.tsx @@ -90,12 +90,12 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
{t('We found a pre-claim with this Polkadot address. However, attesting requires signing with this account. To continue with attesting, please add this account as an owned account first.')} -

+

('Account balance:')} value={claimValue} /> -

+
); @@ -108,12 +108,12 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi kind={statementKind} systemChain={systemChain} /> -

+

('Account balance:')} value={claimValue} /> -

+
{t('Your Ethereum account')} -

{addrToChecksum(ethereumAddress.toString())}

+

{addrToChecksum(ethereumAddress.toString())}

{hasClaim ? ( <> @@ -136,7 +136,7 @@ h2 { margin: 0.5rem 0 2rem; font-family: monospace; font-size: 2.5rem; - font-weight: 400; + font-weight: var(--font-weight-normal); } `; diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx index b21c1cd738..58f1a87f53 100644 --- a/packages/page-claims/src/index.tsx +++ b/packages/page-claims/src/index.tsx @@ -200,11 +200,11 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement { -

{t('1. Select your {{chain}} account', { +

{t('1. Select your {{chain}} account', { replace: { chain: systemChain } - })}

+ })}

('The account you want to claim to.')} @@ -231,7 +231,7 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement { // to be able to know the statement kind so that the users can sign it (step >= Step.ETHAddress && !isPreclaimed && !isOldClaimProcess) && ( -

{t('2. Enter the ETH address from the sale.')}

+

{t('2. Enter the ETH address from the sale.')}

{ )} {(step >= Step.Sign && !isPreclaimed) && ( -

{t('{{step}}. Sign with your ETH address', { replace: { step: isOldClaimProcess ? '2' : '3' } })}

+

{t('{{step}}. Sign with your ETH address', { replace: { step: isOldClaimProcess ? '2' : '3' } })}

{!isOldClaimProcess && ( | null { return ( -

+ #{formatNumber(value.number)} {hashHex} diff --git a/packages/page-explorer/src/BlockInfo/ByHash.tsx b/packages/page-explorer/src/BlockInfo/ByHash.tsx index af63a05051..e84e9b9601 100644 --- a/packages/page-explorer/src/BlockInfo/ByHash.tsx +++ b/packages/page-explorer/src/BlockInfo/ByHash.tsx @@ -104,7 +104,7 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme const header = useMemo<[React.ReactNode?, string?, number?][]>( () => getHeader ? [ - [formatNumber(getHeader.number.unwrap()), 'start', 1], + [formatNumber(getHeader.number.unwrap()), 'start --digits', 1], [t('hash'), 'start'], [t('parent'), 'start'], [t('extrinsics'), 'start media--1300'], diff --git a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx index 81309b9787..91b645fcdf 100644 --- a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx +++ b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx @@ -186,15 +186,15 @@ export default React.memo(styled(ExtrinsicDisplay)` } .explorer--BlockByHash-nonce { - font-size: 0.75rem; + font-size: var(--font-size-small); margin-left: 2.25rem; margin-top: -0.5rem; - opacity: 0.6; + opacity: var(--opacity-light); text-align: left; } .explorer--BlockByHash-unsigned { - opacity: 0.6; + opacity: var(--opacity-light); font-weight: var(--font-weight-normal); } diff --git a/packages/page-explorer/src/Forks.tsx b/packages/page-explorer/src/Forks.tsx index 4a7ed57b17..12c723a1ea 100644 --- a/packages/page-explorer/src/Forks.tsx +++ b/packages/page-explorer/src/Forks.tsx @@ -423,7 +423,7 @@ export default React.memo(styled(Forks)` } .parent { - font-size: 0.75rem; + font-size: var(--font-size-small); line-height: 0.75rem; max-width: 4.5rem; } diff --git a/packages/page-explorer/src/Latency/index.tsx b/packages/page-explorer/src/Latency/index.tsx index d7324df357..66561a8bb8 100644 --- a/packages/page-explorer/src/Latency/index.tsx +++ b/packages/page-explorer/src/Latency/index.tsx @@ -87,8 +87,8 @@ function getPoints (details: Detail[], timeAvg: number): ChartInfo { }; } -function formatTime (time: number, divisor = 1000): string { - return `${(time / divisor).toFixed(3)}s`; +function formatTime (time: number, divisor = 1000): React.ReactNode { + return {`${(time / divisor).toFixed(3)}`} s; } function Latency ({ className }: Props): React.ReactElement { @@ -110,7 +110,7 @@ function Latency ({ className }: Props): React.ReactElement { ); const isLoaded = details.length > 2; - const EMPTY_TIME = 0.000s; + const EMPTY_TIME = 0.000 s; return (
@@ -195,4 +195,10 @@ export default React.memo(styled(Latency)` .container+.container { margin-top: 1rem; } + + span.--digits { + .postfix { + font-size: var(--font-percent-tiny); + } + } `); diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx index 3ba2a42d72..7f56e8b7c8 100644 --- a/packages/page-referenda/src/Referenda/Referendum.tsx +++ b/packages/page-referenda/src/Referenda/Referendum.tsx @@ -484,10 +484,9 @@ function Referendum (props: Props): React.ReactElement { export default React.memo(styled(Referendum)` .chartColumn { h1 { - font-size: 1.25rem; margin-bottom: 0; margin-top: 1rem; - text-align: center; + padding-left: 3rem; } } diff --git a/packages/page-referenda/src/Referenda/Submit.tsx b/packages/page-referenda/src/Referenda/Submit.tsx index 551a8edfa7..e35713604e 100644 --- a/packages/page-referenda/src/Referenda/Submit.tsx +++ b/packages/page-referenda/src/Referenda/Submit.tsx @@ -350,7 +350,7 @@ export default React.memo(styled(Submit)` font-size: var(--font-size-small); font-weight: var(--font-weight-normal); margin-top: 0.125rem; - opacity: 0.6; + opacity: var(--opacity-light); } } diff --git a/packages/page-staking/src/Targets/Summary.tsx b/packages/page-staking/src/Targets/Summary.tsx index c22b63f91a..a40185a1a3 100644 --- a/packages/page-staking/src/Targets/Summary.tsx +++ b/packages/page-staking/src/Targets/Summary.tsx @@ -6,6 +6,7 @@ import type { Balance } from '@polkadot/types/interfaces'; import type { BN } from '@polkadot/util'; import React, { useMemo } from 'react'; +import styled from 'styled-components'; import { CardSummary, SummaryBox } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; @@ -16,6 +17,7 @@ import { useTranslation } from '../translate'; interface Props { avgStaked?: BN; + className?: string; lastEra?: BN; lowStaked?: BN; minNominated?: BN; @@ -48,7 +50,7 @@ function getProgressInfo (value?: BN, total?: BN): ProgressInfo { }; } -function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBond, stakedReturn, totalIssuance, totalStaked }: Props): React.ReactElement { +function Summary ({ avgStaked, className, lastEra, lowStaked, minNominated, minNominatorBond, stakedReturn, totalIssuance, totalStaked }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); const lastReward = useCall(lastEra && api.query.staking.erasValidatorReward, [lastEra], OPT_REWARD); @@ -63,8 +65,10 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon [avgStaked, lowStaked] ); + const percent = %; + return ( - +
('total staked')} @@ -81,9 +85,9 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon ('returns')}> {totalIssuance && (stakedReturn > 0) ? Number.isFinite(stakedReturn) - ? <>{stakedReturn.toFixed(1)}% + ? <>{stakedReturn.toFixed(1)}{percent} : '-.-%' - : 0.0% + : 0.0{percent} }
@@ -146,4 +150,8 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon ); } -export default React.memo(Summary); +export default React.memo(styled(Summary)` + .percent { + font-size: var(--font-percent-tiny); + } +`); diff --git a/packages/page-staking/src/Validators/Summary.tsx b/packages/page-staking/src/Validators/Summary.tsx index 163436a5ba..eedd82d4f7 100644 --- a/packages/page-staking/src/Validators/Summary.tsx +++ b/packages/page-staking/src/Validators/Summary.tsx @@ -23,6 +23,8 @@ interface Props { function Summary ({ className = '', stakingOverview, targets: { counterForNominators, inflation: { idealStake, inflation, stakedFraction }, nominators, waitingIds } }: Props): React.ReactElement { const { t } = useTranslation(); + const percent = %; + return (
@@ -68,7 +70,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina className='media--1400' label={t('ideal staked')} > - <>{(idealStake * 100).toFixed(1)}% + <>{(idealStake * 100).toFixed(1)}{percent} )} {(stakedFraction > 0) && ( @@ -76,7 +78,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina className='media--1300' label={t('staked')} > - <>{(stakedFraction * 100).toFixed(1)}% + <>{(stakedFraction * 100).toFixed(1)}{percent} )} {(inflation > 0) && Number.isFinite(inflation) && ( @@ -84,7 +86,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina className='media--1200' label={t('inflation')} > - <>{inflation.toFixed(1)}% + <>{inflation.toFixed(1)}{percent} )}
@@ -108,4 +110,8 @@ export default React.memo(styled(Summary)` margin-left: -1.5rem; } } + + .percent { + font-size: var(--font-percent-tiny); + } `); diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx index ebd105adcb..1e80e0f4e9 100644 --- a/packages/page-staking/src/index.tsx +++ b/packages/page-staking/src/index.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import type { DeriveStakingOverview } from '@polkadot/api-derive/types'; -import type { AppProps as Props, ThemeProps } from '@polkadot/react-components/types'; +import type { AppProps as Props } from '@polkadot/react-components/types'; import type { ElectionStatus, ParaValidatorIndex, ValidatorId } from '@polkadot/types/interfaces'; import type { BN } from '@polkadot/util'; @@ -220,7 +220,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement ` +export default React.memo(styled(StakingApp)` .staking--Chart { margin-top: 1.5rem; @@ -248,16 +248,6 @@ export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => ` .ui--Expander.stakeOver { .ui--Expander-summary { color: var(--color-error); - - ${theme.theme === 'dark' - ? `font-weight: bold; - .ui--FormatBalance-value { - - > .ui--FormatBalance-postfix { - opacity: 1; - } - }` - : ''}; } } @@ -269,11 +259,11 @@ export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => ` .greyAnim-${n} { animation: greyAnim${n} 2s; } + @keyframes greyAnim${n} { 0% { background: #a6a6a6; } 50% { background: darkorange; } 100% { background: #a6a6a6; } } - `).join('') -} -`)); + `).join('')} +`); diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx index ff4029a212..2888803cba 100644 --- a/packages/react-components/src/AccountName.tsx +++ b/packages/react-components/src/AccountName.tsx @@ -250,7 +250,7 @@ export default React.memo(styled(AccountName)` &.isAddress { font: var(--font-mono); - opacity: 0.6; + opacity: var(--opacity-light); text-transform: none; } @@ -260,8 +260,8 @@ export default React.memo(styled(AccountName)` } .sub { - font-size: 0.75rem; - opacity: 0.75; + font-size: var(--font-size-tiny); + opacity: var(--opacity-light); } } } diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx index b9a89a31c2..f8a72f5aa6 100644 --- a/packages/react-components/src/AddressMini.tsx +++ b/packages/react-components/src/AddressMini.tsx @@ -151,7 +151,7 @@ export default React.memo(styled(AddressMini)` .ui--Balance, .ui--Bonded, .ui--LockedVote { - font-size: 0.75rem; + font-size: var(--font-size-tiny); margin-left: 2.25rem; margin-top: -0.5rem; text-align: left; @@ -179,7 +179,7 @@ export default React.memo(styled(AddressMini)` } .ui--AddressMini-summary { - font-size: 0.75rem; + font-size: var(--font-size-small); line-height: 1.2; margin-left: 2.25rem; margin-top: -0.2rem; diff --git a/packages/react-components/src/AddressRow.tsx b/packages/react-components/src/AddressRow.tsx index f99b3d1a70..b2e6e9fee3 100644 --- a/packages/react-components/src/AddressRow.tsx +++ b/packages/react-components/src/AddressRow.tsx @@ -107,6 +107,6 @@ export default React.memo(styled(AddressRow)` } .ui--AddressRow-placeholder { - opacity: 0.6; + opacity: var(--opacity-light); } `); diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx index 73027194b6..4073c1067b 100644 --- a/packages/react-components/src/AddressSmall.tsx +++ b/packages/react-components/src/AddressSmall.tsx @@ -80,8 +80,11 @@ export default React.memo(styled(AddressSmall)` position: relative; vertical-align: middle; + .parentName, .shortAddress { + font-size: var(--font-size-tiny); + } + .parentName { - font-size: 0.75rem; left: 0; position: absolute; top: -0.80rem; @@ -90,7 +93,6 @@ export default React.memo(styled(AddressSmall)` .shortAddress { bottom: -0.95rem; color: #8B8B8B; - font-size: 0.75rem; left: 0; position: absolute; } diff --git a/packages/react-components/src/AddressToggle.tsx b/packages/react-components/src/AddressToggle.tsx index 252d2c2a32..3ac2b344fc 100644 --- a/packages/react-components/src/AddressToggle.tsx +++ b/packages/react-components/src/AddressToggle.tsx @@ -71,7 +71,7 @@ export default React.memo(styled(AddressToggle)` .ui--AddressToggle-address { filter: grayscale(100%); - opacity: 0.6; + opacity: var(--opacity-light); } &:hover { diff --git a/packages/react-components/src/AvatarItem.tsx b/packages/react-components/src/AvatarItem.tsx index a9daa2d04a..3e64803917 100644 --- a/packages/react-components/src/AvatarItem.tsx +++ b/packages/react-components/src/AvatarItem.tsx @@ -49,12 +49,12 @@ export default React.memo(styled(AvatarItem)` .ui--AvatarItem-details { .ui--AvatarItem-title { font-weight: 600; - font-size: 1rem; + font-size: var(--font-size-base); } .ui--AvatarItem-subtitle { font-weight: var(--font-weight-normal); - font-size: 1rem; + font-size: var(--font-size-base); } } diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx index 5cfabaa17c..71c132117f 100644 --- a/packages/react-components/src/Badge.tsx +++ b/packages/react-components/src/Badge.tsx @@ -82,7 +82,7 @@ export default React.memo(styled(Badge)` box-sizing: border-box; color: #eeedec; display: inline-block; - font-size: 12px; + font-size: var(--font-size-tiny); height: 20px; line-height: 20px; margin-right: 0.43rem; diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx index cc81ae2c73..f36080672b 100644 --- a/packages/react-components/src/CardSummary.tsx +++ b/packages/react-components/src/CardSummary.tsx @@ -123,12 +123,16 @@ export default React.memo(styled(CardSummary)` } > .ui--Labelled { - font-size: 1.75rem; - font-weight: var(--font-weight-light); + font-size: var(--font-size-h1); + font-weight: var(--font-weight-header); position: relative; line-height: 1; text-align: right; + > .ui--Labelled-content { + color: var(--color-header); + } + > * { margin: 0.25rem 0; @@ -142,7 +146,7 @@ export default React.memo(styled(CardSummary)` } .isSecondary { - font-size: 1rem; + font-size: var(--font-size-base); font-weight: var(--font-weight-normal); .timer { diff --git a/packages/react-components/src/Digits.tsx b/packages/react-components/src/Digits.tsx deleted file mode 100644 index b2089e24d8..0000000000 --- a/packages/react-components/src/Digits.tsx +++ /dev/null @@ -1,46 +0,0 @@ -// Copyright 2017-2023 @polkadot/apps authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -import React from 'react'; -import styled from 'styled-components'; - -interface Props { - className?: string; - value: string; -} - -function Digits ({ className = '', value }: Props): React.ReactElement { - return ( -
- {value.split(',').map((parts, index) => ( -
- {index !== 0 ? ',' : ''} - {parts.split('').map((d, index) => ( -
{d}
- ))} -
- ))} -
- ); -} - -export default React.memo(styled(Digits)` - display: inline-block; - white-space: nowrap; - - .group { - display: inline-block; - - .digit { - display: inline-block; - text-align: center; - width: 1ch; - } - } -`); diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx index 20e869b9d2..93ff22bbab 100644 --- a/packages/react-components/src/Dropdown.tsx +++ b/packages/react-components/src/Dropdown.tsx @@ -145,7 +145,7 @@ const Dropdown = React.memo(styled(BaseDropdown)` width: 32px; &.opaque { - opacity: 0.6; + opacity: var(--opacity-light); } } diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx index aa053ae2bf..347083dc9b 100644 --- a/packages/react-components/src/Expander.tsx +++ b/packages/react-components/src/Expander.tsx @@ -192,7 +192,7 @@ export default React.memo(styled(Expander)` .ui--Expander-summary-header-sub { font-size: var(--font-size-small); - opacity: 0.6; + opacity: var(--opacity-light); } } diff --git a/packages/react-components/src/Flag.tsx b/packages/react-components/src/Flag.tsx index deb656b6a1..ca86ef4c75 100644 --- a/packages/react-components/src/Flag.tsx +++ b/packages/react-components/src/Flag.tsx @@ -28,7 +28,7 @@ function Flag ({ className = '', color, label }: FlagProps): React.ReactElement< export default React.memo(styled(Flag)` border-radius: 0 0.25rem 0.25rem 0; padding: 0.5833em 1.25em 0.5833em 1.5em; - font-size: 0.78571429rem; + font-size: var(--font-size-tiny); line-height: 1; color: #fff !important; diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx index cfa87b492f..97c64d967e 100644 --- a/packages/react-components/src/InputAddress/KeyPair.tsx +++ b/packages/react-components/src/InputAddress/KeyPair.tsx @@ -51,7 +51,7 @@ export default React.memo(styled(KeyPair)` font: var(--font-mono); font-size: var(--font-size-small); margin-left: 1rem; - opacity: 0.6; + opacity: var(--opacity-light); overflow: hidden; text-align: right; } diff --git a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx index ea7ea143cc..cad4d1cab3 100644 --- a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx +++ b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx @@ -63,7 +63,7 @@ export default React.memo(styled(LinkedWrapper)` .ui--DropdownLinked-Item-text { flex: 1; font-size: var(--font-size-small); - opacity: 0.6; + opacity: var(--opacity-light); overflow: hidden; text-align: right; text-overflow: ellipsis; diff --git a/packages/react-components/src/InputFile.tsx b/packages/react-components/src/InputFile.tsx index e39e1d04df..482e0caf3a 100644 --- a/packages/react-components/src/InputFile.tsx +++ b/packages/react-components/src/InputFile.tsx @@ -138,7 +138,7 @@ export default React.memo(styled(InputFile)` background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 0.28571429rem; - font-size: 1rem; + font-size: var(--font-size-base); margin: 0.25rem 0; padding: 0.67857143em 1em; width: 100% !important; diff --git a/packages/react-components/src/InputTags.tsx b/packages/react-components/src/InputTags.tsx index 3ba900ed42..a82aff1539 100644 --- a/packages/react-components/src/InputTags.tsx +++ b/packages/react-components/src/InputTags.tsx @@ -89,7 +89,7 @@ export default React.memo(styled(InputTags)` box-shadow: none; color: #fff; display: inline-block; - font-size: 0.857rem; + font-size: var(--font-size-small); font-weight: var(--font-weight-normal); line-height: 1.143rem; margin: 0.125rem 0.125rem; diff --git a/packages/react-components/src/Inset.tsx b/packages/react-components/src/Inset.tsx index de71b09d66..2e1e794e07 100644 --- a/packages/react-components/src/Inset.tsx +++ b/packages/react-components/src/Inset.tsx @@ -45,7 +45,7 @@ function Inset ({ children, className = '', header, href, isCollapsible, isError className='header' onClick={toggleCollapsed} > -

{header}

+

{header}

{ return ( -

{formatNumber(value)}

+

{formatNumber(value)}

); } // We want 5.5ch (which should be ok-ish for 5 decimals, i.e. 99,999), however -// we wrap the display in an h1 with text at 1.75rem, so multiply it out -const WIDTH = `${(5.5 * 1.75).toFixed(3)}ch`; +// we wrap the display in an h2 with max size text at ~1.3rem, so multiply it out +const WIDTH = `${(5.5 * 1.3).toFixed(3)}ch`; export default React.memo(styled(Id)` && { diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx index 5d968d6e4b..e95dac2291 100644 --- a/packages/react-components/src/Table/Head.tsx +++ b/packages/react-components/src/Table/Head.tsx @@ -60,17 +60,15 @@ export default React.memo(styled(Head)` vertical-align: middle; white-space: nowrap; - h1, h2 { - font-size: 1.75rem; - } - h1 { display: table-cell; vertical-align: middle; .sub { display: inline-block; - font-size: 1rem; + font-size: var(--font-size-base); + font-weight: var(--font-weight-normal); + opacity: var(--opacity-light); padding-left: 1.5rem; text-overflow: ellipsis; vertical-align: middle; diff --git a/packages/react-components/src/Table/Table.tsx b/packages/react-components/src/Table/Table.tsx index d47dc4f3b9..f7d89a2560 100644 --- a/packages/react-components/src/Table/Table.tsx +++ b/packages/react-components/src/Table/Table.tsx @@ -199,7 +199,7 @@ export default React.memo(styled(Table)` } div.empty { - opacity: 0.6; + opacity: var(--opacity-light); padding: 0.25rem; } @@ -309,6 +309,7 @@ export default React.memo(styled(Table)` } &.number { + font-variant-numeric: tabular-nums; text-align: right; } diff --git a/packages/react-components/src/Tabs/CurrentSection.tsx b/packages/react-components/src/Tabs/CurrentSection.tsx index 643dcde0be..924c77884f 100644 --- a/packages/react-components/src/Tabs/CurrentSection.tsx +++ b/packages/react-components/src/Tabs/CurrentSection.tsx @@ -24,8 +24,8 @@ function CurrentSection ({ className = '', icon, text }: Props): React.ReactElem export default React.memo(styled(CurrentSection)` margin: 0 2.5rem 0 1.5rem; - font-weight: 400; - font-size: 1rem; + font-weight: var(--font-weight-normal); + font-size: var(--font-size-base); line-height: 1.57rem; min-width: max-content; height: 100%; diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx index a4516833dc..94dd09b57e 100644 --- a/packages/react-components/src/Tabs/Tab.tsx +++ b/packages/react-components/src/Tabs/Tab.tsx @@ -51,7 +51,7 @@ export default React.memo(styled(Tab)` align-items: center; display: flex; color: #8B8B8B; - font-size: var(--font-size-medium); + font-size: var(--font-size-small); height: 100%; padding: 0 1.5rem; position: relative; @@ -77,7 +77,7 @@ export default React.memo(styled(Tab)` &.tabLinkActive { color: var(--color-text) !important; - font-weight: 400; + font-weight: var(--font-weight-normal); &:hover { cursor: default; diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx index 12aa8ac77f..6151a1394f 100644 --- a/packages/react-components/src/Tag.tsx +++ b/packages/react-components/src/Tag.tsx @@ -45,7 +45,7 @@ export default React.memo(styled(Tag)` border-radius: 0.25rem; color: #fff; display: inline-block; - font-size: var(--font-size-small); + font-size: var(--font-size-tiny); font-weight: var(--font-weight-normal); line-height: 1rem; margin: 0 0.125rem; diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx index fb0329e8a4..adfdb9e6ff 100644 --- a/packages/react-components/src/Tooltip.tsx +++ b/packages/react-components/src/Tooltip.tsx @@ -101,7 +101,7 @@ export default React.memo(styled(Tooltip)` .faded { margin-top: 0; opacity: 0.75 !important; - font-size: 0.85em !important; + font-size: var(--font-size-tiny) !important; .faded { font-size: 1em !important; diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index 59d24c2dc5..fb07d57955 100644 --- a/packages/react-components/src/index.tsx +++ b/packages/react-components/src/index.tsx @@ -30,7 +30,6 @@ export { default as Columar } from './Columar'; export { default as ConvictionDropdown } from './ConvictionDropdown'; export { default as CopyButton } from './CopyButton'; export { default as CryptoType } from './CryptoType'; -export { default as Digits } from './Digits'; export { default as Dropdown } from './Dropdown'; export { default as EditButton } from './EditButton'; export { default as Editor } from './Editor'; diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts index 1b24a69972..a251887e80 100644 --- a/packages/react-components/src/styles/components.ts +++ b/packages/react-components/src/styles/components.ts @@ -46,7 +46,7 @@ export default (_theme: ThemeDef): string => ` button.ui--Button { font: var(--font-sans); - font-size: var(--font-size-medium); + font-size: var(--font-size-small); } .editable { diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts index 8438236585..f09e279e55 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -8,7 +8,6 @@ import { createGlobalStyle } from 'styled-components'; import cssComponents from './components'; import cssForm from './form'; import cssMedia from './media'; -import cssRx from './rx'; import cssSemantic from './semantic'; import cssTheme from './theme'; @@ -362,6 +361,7 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr background: var(--bg-page); color: var(--color-text); font: var(--font-sans); + font-weight: var(--font-weight-normal); height: 100%; } @@ -387,7 +387,7 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr &.error, &.warning { border-left-width: 0.25rem; - font-size: var(--font-size-medium); + font-size: var(--font-size-small); line-height: 1.5; margin-left: 2.25rem; padding: 0.75rem 1rem; @@ -487,24 +487,15 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr } h1, h2, h3, h4, h5 { - color: var(--color-summary); + color: var(--color-header); font: var(--font-sans); - font-weight: var(--font-weight-light); + font-weight: var(--font-weight-header); margin-bottom: 0.25rem; } - h5 { - color: var(--color-label); - font-style: normal; - font-weight: var(--font-weight-normal); - font-size: var(--font-size-label); - line-height: 1rem; - text-transform: var(--text-transform-label); - margin-bottom: 0.25rem; - } h1 { - font-size: 1.75rem; + font-size: var(--font-size-h1); text-transform: lowercase; em { @@ -514,7 +505,11 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr } h2 { - font-size: 1.71428571rem; + font-size: var(--font-size-h2); + } + + h3 { + font-size: var(--font-size-h3); } header { @@ -532,16 +527,25 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr label { box-sizing: border-box; - color: var(--color-label); display: block; font: var(--font-sans); + } + + // we treat h5 and label as equivalents + label, h5 { + color: var(--color-label); font-size: var(--font-size-label); - font-weight: var(--font-weight-normal); + font-style: normal; + font-weight: var(--font-weight-label); line-height: 1rem; text-transform: var(--text-transform-label); vertical-align: middle; } + button { + font-weight: var(--font-weight-normal); + } + main { > section { margin-bottom: 2em; @@ -553,6 +557,5 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr ${cssTheme} ${cssForm} ${cssMedia} - ${cssRx} ${cssComponents(theme)} `); diff --git a/packages/react-components/src/styles/rx.ts b/packages/react-components/src/styles/rx.ts deleted file mode 100644 index d2ece5a5f4..0000000000 --- a/packages/react-components/src/styles/rx.ts +++ /dev/null @@ -1,9 +0,0 @@ -// Copyright 2017-2023 @polkadot/react-components authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -export default ` - .rx--updated { - background: #ffffe0 !important; - transition: all 0.7s ease-out; - } -`; diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts index 4140feb1c7..412867ac70 100644 --- a/packages/react-components/src/styles/semantic.ts +++ b/packages/react-components/src/styles/semantic.ts @@ -27,7 +27,7 @@ export default (_theme: ThemeDef): string => ` border-color: var(--border-input); color: var(--color-text); font: var(--font-sans); - font-size: 1rem; + font-size: var(--font-size-base); &:focus { background: var(--bg-input); diff --git a/packages/react-params/src/Holder.tsx b/packages/react-params/src/Holder.tsx index fc554d45c0..e63cffb2b0 100644 --- a/packages/react-params/src/Holder.tsx +++ b/packages/react-params/src/Holder.tsx @@ -45,8 +45,6 @@ export default React.memo(styled(Holder)` .ui--Param-composite .ui--row .ui--InputAddressSimple { & > .ui--Labelled > label { text-transform: none !important; - font: var(--font-mono); - font-size: var(--font-size-label); } } @@ -69,7 +67,7 @@ export default React.memo(styled(Holder)` .ui--Param-text { display: inline-block; - font-size: 1rem; + font-size: var(--font-size-base); line-height: 1.714rem; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/react-query/src/BestFinalized.tsx b/packages/react-query/src/BestFinalized.tsx index a6679a6baa..161797da5e 100644 --- a/packages/react-query/src/BestFinalized.tsx +++ b/packages/react-query/src/BestFinalized.tsx @@ -5,7 +5,6 @@ import type { BlockNumber } from '@polkadot/types/interfaces'; import React from 'react'; -import { Digits } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { formatNumber } from '@polkadot/util'; @@ -22,7 +21,7 @@ function BestFinalized ({ children, className = '', label }: Props): React.React return (
{label || ''}{ - + {formatNumber(bestNumberFinalized || 1234)} }{children}
); diff --git a/packages/react-query/src/BestNumber.tsx b/packages/react-query/src/BestNumber.tsx index 0dab40b966..8f8a0fa283 100644 --- a/packages/react-query/src/BestNumber.tsx +++ b/packages/react-query/src/BestNumber.tsx @@ -5,7 +5,6 @@ import type { BlockNumber } from '@polkadot/types/interfaces'; import React from 'react'; -import { Digits } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { formatNumber } from '@polkadot/util'; @@ -24,7 +23,7 @@ function BestNumber ({ children, className = '', isFinalized, label, withPound } return (
{label || ''}{withPound && '#'}{ - + {formatNumber(bestNumber || 1234)} }{children}
); diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx index 834fe5ea5e..198ca232df 100644 --- a/packages/react-query/src/BlockToTime.tsx +++ b/packages/react-query/src/BlockToTime.tsx @@ -47,7 +47,6 @@ export default React.memo(styled(BlockToTime)` } span.timeUnits { - // this is not var(--font-size-small) since we want em - font-size: 0.875em; + font-size: var(--font-percent-tiny); } `); diff --git a/packages/react-query/src/Elapsed.tsx b/packages/react-query/src/Elapsed.tsx index 5b610115d0..90be8b5817 100644 --- a/packages/react-query/src/Elapsed.tsx +++ b/packages/react-query/src/Elapsed.tsx @@ -34,16 +34,10 @@ function tick (): void { function formatValue (value: number, type = 's', withDecimal = false): React.ReactNode { const [pre, post] = value.toFixed(1).split('.'); - const before = pre.split('').map((d, index) => ( -
{d}
- )); return withDecimal - ? <>{before}.
{post}
{type} - : <>{before} {type}; + ? <>{pre}.{post} {type} + : <>{pre} {type}; } function getDisplayValue (now = 0, value: BN | Date | number = 0): React.ReactNode { @@ -82,15 +76,16 @@ function Elapsed ({ children, className = '', value }: Props): React.ReactElemen }, []); return ( -
+
{getDisplayValue(now, value)}{children}
); } export default React.memo(styled(Elapsed)` - .digit { - display: inline-block; - width: 1ch; + white-space: nowrap; + + .timeUnit { + font-size: var(--font-percent-tiny); } `); diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx index f0a0b63602..365098b264 100644 --- a/packages/react-query/src/FormatBalance.tsx +++ b/packages/react-query/src/FormatBalance.tsx @@ -88,7 +88,7 @@ function FormatBalance ({ children, className = '', format, formatIndex, isShort
{label ? <>{label}  : ''} { valueFormatted @@ -122,7 +122,7 @@ export default React.memo(styled(FormatBalance)` } .ui--FormatBalance-unit { - font-size: 0.825em; + font-size: var(--font-percent-tiny); text-transform: uppercase; } @@ -130,8 +130,7 @@ export default React.memo(styled(FormatBalance)` text-align: right; > .ui--FormatBalance-postfix { - font-weight: var(--font-weight-light); - opacity: 0.75; + font-weight: lighter; vertical-align: baseline; } }