From f889abb7af661dd06cf0489d5005bd0c56d4e818 Mon Sep 17 00:00:00 2001 From: Jaco Date: Sun, 8 Jan 2023 12:53:43 +0200 Subject: [PATCH] Overall adjustment to font styling (#8725) * Overall adjustment to font styling * Additional * AccountName * Table header * One less font override * Remove commented code * Adjust menu sizing * Adjust tab menu * Adjust * Adjust lightGreyColor --- packages/apps/public/index.html | 8 +++- packages/apps/src/Endpoints/Network.tsx | 2 +- packages/apps/src/Menu/ChainInfo.tsx | 2 +- packages/apps/src/Menu/Grouping.tsx | 3 +- packages/apps/src/Menu/Item.tsx | 3 +- packages/apps/src/Menu/NodeInfo.tsx | 2 +- packages/apps/src/TopBar.tsx | 2 +- .../page-accounts/src/Sidebar/Balances.tsx | 2 - .../page-accounts/src/Sidebar/Sidebar.tsx | 15 +------ .../src/BountyInfos/VotingSummary.tsx | 2 +- .../src/BountyNextActionInfo/BountyInfo.tsx | 2 +- packages/page-calendar/src/DayHour.tsx | 4 +- packages/page-calendar/src/DayItem.tsx | 2 +- packages/page-calendar/src/index.tsx | 11 +++-- .../page-contracts/src/shared/Message.tsx | 2 +- .../src/BlockInfo/Justifications.tsx | 1 + packages/page-explorer/src/BlockInfo/Logs.tsx | 4 ++ packages/page-explorer/src/Event.tsx | 1 + packages/page-extrinsics/src/Decoder.tsx | 6 ++- .../src/Overview/ParachainInfo.tsx | 2 +- .../src/Referenda/Referendum.tsx | 10 ++--- .../page-referenda/src/Referenda/Submit.tsx | 6 ++- packages/page-settings/src/General.tsx | 4 +- packages/page-staking/src/Legend.tsx | 2 +- packages/react-components/src/AccountName.tsx | 7 +--- packages/react-components/src/AddressInfo.tsx | 7 ---- packages/react-components/src/AddressRow.tsx | 2 +- .../react-components/src/AddressToggle.tsx | 2 +- packages/react-components/src/Call.tsx | 10 +++-- .../react-components/src/CallExpander.tsx | 1 + packages/react-components/src/CardSummary.tsx | 4 -- packages/react-components/src/Dropdown.tsx | 2 +- packages/react-components/src/Event.tsx | 4 +- packages/react-components/src/Expander.tsx | 10 +---- .../src/InputAddress/KeyPair.tsx | 14 +++++-- .../react-components/src/InputBalance.tsx | 2 +- .../src/InputExtrinsic/LinkedWrapper.tsx | 3 +- packages/react-components/src/Inspect.tsx | 11 +++-- packages/react-components/src/Labelled.tsx | 6 ++- .../react-components/src/LinkExternal.tsx | 2 +- packages/react-components/src/Menu/Header.tsx | 6 +-- packages/react-components/src/Menu/Item.tsx | 9 ++--- .../react-components/src/Modal/Columns.tsx | 6 +-- packages/react-components/src/Progress.tsx | 3 +- packages/react-components/src/Row.tsx | 2 +- packages/react-components/src/Table/Head.tsx | 20 +--------- packages/react-components/src/Tabs/Tab.tsx | 40 +++++++++---------- packages/react-components/src/Tabs/index.tsx | 4 +- packages/react-components/src/Tag.tsx | 7 ++-- .../react-components/src/styles/components.ts | 5 ++- packages/react-components/src/styles/index.ts | 10 +++-- .../react-components/src/styles/semantic.ts | 21 ++++++---- packages/react-params/src/Holder.tsx | 20 ++++++---- packages/react-params/src/index.tsx | 4 +- packages/react-query/src/BlockToTime.tsx | 3 +- packages/react-query/src/FormatBalance.tsx | 2 +- 56 files changed, 174 insertions(+), 173 deletions(-) diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html index 1fa23e89af..5acec239a3 100644 --- a/packages/apps/public/index.html +++ b/packages/apps/public/index.html @@ -11,13 +11,17 @@ :root { --font-mono: 0.9em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace; --font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --font-size-button: 0.925rem; + --font-size-label: 0.75rem; + --font-size-small: 0.875rem; + --font-size-tiny: 0.71428571rem; --font-weight-bold: 700; --font-weight-light: 200; --font-weight-normal: 400; + --text-transform-label: uppercase; --width-full: 1750px; --width-half: 875px; --bg-menu-hover: rgba(255, 255, 255, 0.2); - --border-input: rgba(34, 36, 38, .15); } [data-theme="dark"] { @@ -31,6 +35,7 @@ --bg-toggle: #58595f; --bg-sidebar: #1a1b20; --bg-static-extra: rgba(200, 200, 200, 0.1); + --border-input: rgba(234, 236, 238, .15); --border-table: #26272c; /* #343536; */ --border-tabs: #343536; --color-checkbox: rgba(78, 78, 78, 0.66); @@ -53,6 +58,7 @@ --bg-toggle: #e4e5e6; --bg-sidebar: #fafafa; --bg-static-extra: rgba(200, 200, 200, 0.1); + --border-input: rgba(34, 36, 38, .15); --border-table: #f5f3f1; /* #f1efed; */ --border-tabs: #f1efed; --color-checkbox: rgba(34, 36, 38, 0.15); diff --git a/packages/apps/src/Endpoints/Network.tsx b/packages/apps/src/Endpoints/Network.tsx index 8541d7b1bf..789949496d 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.5; + opacity: 0.6; } &.isSelected, diff --git a/packages/apps/src/Menu/ChainInfo.tsx b/packages/apps/src/Menu/ChainInfo.tsx index 7ab765ec43..cbbcdf31bb 100644 --- a/packages/apps/src/Menu/ChainInfo.tsx +++ b/packages/apps/src/Menu/ChainInfo.tsx @@ -99,7 +99,7 @@ export default React.memo(styled(ChainInfo)` } .chain, .bestNumber { - font-size: 0.9rem; + font-size: var(--font-size-small); line-height: 1.2; } diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx index 41f2cf2bf4..0651bf6233 100644 --- a/packages/apps/src/Menu/Grouping.tsx +++ b/packages/apps/src/Menu/Grouping.tsx @@ -59,7 +59,7 @@ export default React.memo(styled(Grouping)` .groupHdr { border-radius: 0.25rem; padding: 0.857rem 1.375rem; - font-size: 1rem; + font-size: var(--font-size-button); font-weight: 400; line-height: 1.214rem; @@ -70,7 +70,6 @@ export default React.memo(styled(Grouping)` &.isActive .groupHdr { background-color: var(--bg-tabs); - font-size: 1rem; font-weight: 400; margin-bottom: 0; } diff --git a/packages/apps/src/Menu/Item.tsx b/packages/apps/src/Menu/Item.tsx index f993d0a1d6..7a9dbef342 100644 --- a/packages/apps/src/Menu/Item.tsx +++ b/packages/apps/src/Menu/Item.tsx @@ -53,7 +53,6 @@ export default React.memo(styled(Item)` white-space: nowrap; &.topLevel { - font-size: 1rem; font-weight: 400; line-height: 1.214rem; border-radius: 0.15rem; @@ -102,7 +101,7 @@ export default React.memo(styled(Item)` padding: 0.5rem 1.15rem 0.57rem; text-decoration: none; font-weight: 400; - font-size: 1rem; + font-size: var(--font-size-button); line-height: 1.5rem; } diff --git a/packages/apps/src/Menu/NodeInfo.tsx b/packages/apps/src/Menu/NodeInfo.tsx index 7522b4dfee..5bb14f27b9 100644 --- a/packages/apps/src/Menu/NodeInfo.tsx +++ b/packages/apps/src/Menu/NodeInfo.tsx @@ -33,7 +33,7 @@ function NodeInfo ({ className = '' }: Props): React.ReactElement { export default React.memo(styled(NodeInfo)` background: transparent; - font-size: 0.9rem; + font-size: var(--font-size-small); line-height: 1.2; padding: 0 0 0 1rem; text-align: right; diff --git a/packages/apps/src/TopBar.tsx b/packages/apps/src/TopBar.tsx index 48855fd7d3..2c5d09a2ee 100644 --- a/packages/apps/src/TopBar.tsx +++ b/packages/apps/src/TopBar.tsx @@ -29,7 +29,7 @@ function TopBar ({ className }: Props): React.ReactElement { export default React.memo(styled(TopBar)` background: #f2f2f2; - font-size: 0.85rem; + font-size: var(--font-size-small); line-height: 1rem; overflow: hidden; padding: 0.5rem 1rem; diff --git a/packages/page-accounts/src/Sidebar/Balances.tsx b/packages/page-accounts/src/Sidebar/Balances.tsx index 7ff3c9a03c..ca3a42642e 100644 --- a/packages/page-accounts/src/Sidebar/Balances.tsx +++ b/packages/page-accounts/src/Sidebar/Balances.tsx @@ -45,8 +45,6 @@ export default React.memo(styled(Balances)` label { text-align: left; color: inherit; - font-size: 0.93rem; - font-weight: var(--font-weight-normal); } .ui--Expander-content .ui--FormatBalance-value { diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx index 0972c6c160..a7999f8155 100644 --- a/packages/page-accounts/src/Sidebar/Sidebar.tsx +++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx @@ -215,7 +215,7 @@ export default React.memo(styled(FullSidebar)` font-weight: var(--font-weight-normal); text-align: left; flex-basis: 25%; - font-size: 0.714rem; + font-size: var(--font-size-label); &.top { align-self: flex-start; @@ -253,18 +253,7 @@ export default React.memo(styled(FullSidebar)` margin-bottom: 0.4rem; } - label:first-of-type { - margin-bottom: 0.4rem; - color: var(--color-text); - } - - label { - color: var(--color-label); - text-transform: uppercase; - font-size: 0.714rem; - } - - .ui--FormatBalance, label { + .ui--FormatBalance { line-height: 1rem; } } diff --git a/packages/page-bounties/src/BountyInfos/VotingSummary.tsx b/packages/page-bounties/src/BountyInfos/VotingSummary.tsx index 654e1e53a5..ae2e5a5d21 100644 --- a/packages/page-bounties/src/BountyInfos/VotingSummary.tsx +++ b/packages/page-bounties/src/BountyInfos/VotingSummary.tsx @@ -51,7 +51,7 @@ function VotingSummary ({ className, proposal, status }: Props): JSX.Element { export default React.memo(styled(VotingSummary)` .voting-summary-text { - font-size: 0.85rem; + font-size: var(--font-size-small); line-height: 1.5rem; color: var(--color-label); diff --git a/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx b/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx index 60241d488e..bb37ae3bfb 100644 --- a/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx +++ b/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx @@ -47,7 +47,7 @@ export default React.memo(styled(BountyInfo)(({ theme }: ThemeProps) => ` .description { font-weight: 400; - font-size: 0.714rem; + var(--font-size-label) line-height: 0.864rem; color: var(--color-label); word-wrap: break-word; diff --git a/packages/page-calendar/src/DayHour.tsx b/packages/page-calendar/src/DayHour.tsx index 994fffed83..2d919acb62 100644 --- a/packages/page-calendar/src/DayHour.tsx +++ b/packages/page-calendar/src/DayHour.tsx @@ -74,11 +74,11 @@ export default React.memo(styled(DayHour)` .hourLabel { flex: 0; - font-size: 0.85rem; + font-size: var(--font-size-small); font-weight: var(--font-weight-normal); line-height: 1; min-width: 5.5rem; - opacity: 0.5; + opacity: 0.6; padding: 0.5rem 1rem; text-align: right; text-transform: uppercase; diff --git a/packages/page-calendar/src/DayItem.tsx b/packages/page-calendar/src/DayItem.tsx index 3bc5fe3bc6..a271053629 100644 --- a/packages/page-calendar/src/DayItem.tsx +++ b/packages/page-calendar/src/DayItem.tsx @@ -228,7 +228,7 @@ export default React.memo(styled(DayItem)` .itemBlock { background: #aaa; color: #eee; - font-size: 0.85rem; + font-size: var(--font-size-small); align-self: center; padding: 0.075rem 0.375rem; border-radius: 0.25rem; diff --git a/packages/page-calendar/src/index.tsx b/packages/page-calendar/src/index.tsx index ca48053907..82f009ca4a 100644 --- a/packages/page-calendar/src/index.tsx +++ b/packages/page-calendar/src/index.tsx @@ -183,7 +183,7 @@ export default React.memo(styled(CalendarApp)` } .ui--Button-Group { - margin-top: 0; + margin: 0; } } @@ -192,14 +192,19 @@ export default React.memo(styled(CalendarApp)` border-bottom: 0.25rem solid var(--bg-page); display: flex; justify-content: space-between; - padding: 0.5rem 0.5rem 0 1rem; + padding: 0.5rem 0.5rem 0.5rem 1rem; + + > div:first-child { + align-items: center; + display: inline-flex; + } .all-events-button { margin-right: 1rem; } .ui--Button { - font-size: 1rem; + font-size: var(--font-size-small); } } } diff --git a/packages/page-contracts/src/shared/Message.tsx b/packages/page-contracts/src/shared/Message.tsx index 7b48b002eb..fecb176ee8 100644 --- a/packages/page-contracts/src/shared/Message.tsx +++ b/packages/page-contracts/src/shared/Message.tsx @@ -117,7 +117,7 @@ export default React.memo(styled(Message)` margin-left: 1.5rem; .docs { - font-size: 0.9rem; + font-size: var(--font-size-small); font-weight: var(--font-weight-normal); } } diff --git a/packages/page-explorer/src/BlockInfo/Justifications.tsx b/packages/page-explorer/src/BlockInfo/Justifications.tsx index 996a4d0da7..6c15d983af 100644 --- a/packages/page-explorer/src/BlockInfo/Justifications.tsx +++ b/packages/page-explorer/src/BlockInfo/Justifications.tsx @@ -31,6 +31,7 @@ function formatTuple (tuple: Tuple): React.ReactNode { isDisabled params={params} values={values} + withExpander /> ); } diff --git a/packages/page-explorer/src/BlockInfo/Logs.tsx b/packages/page-explorer/src/BlockInfo/Logs.tsx index 357d3cc9c2..cd4b5afb2a 100644 --- a/packages/page-explorer/src/BlockInfo/Logs.tsx +++ b/packages/page-explorer/src/BlockInfo/Logs.tsx @@ -23,6 +23,7 @@ function formatU8a (value: Raw): React.ReactNode { isDisabled params={[{ type: getTypeDef('Bytes') }]} values={[{ isValid: true, value }]} + withExpander /> ); } @@ -42,6 +43,7 @@ function formatStruct (struct: Struct): React.ReactNode { isDisabled params={params} values={values} + withExpander /> ); } @@ -60,6 +62,7 @@ function formatTuple (tuple: Tuple): React.ReactNode { isDisabled params={params} values={values} + withExpander /> ); } @@ -80,6 +83,7 @@ function formatVector (vector: Vec): React.ReactNode { isDisabled params={params} values={values} + withExpander /> ); } diff --git a/packages/page-explorer/src/Event.tsx b/packages/page-explorer/src/Event.tsx index f00128e116..b6f80e5f07 100644 --- a/packages/page-explorer/src/Event.tsx +++ b/packages/page-explorer/src/Event.tsx @@ -28,6 +28,7 @@ function Event ({ className = '', value: { event } }: Props): React.ReactElement className='details' eventName={eventName} value={event} + withExpander /> ) : null diff --git a/packages/page-extrinsics/src/Decoder.tsx b/packages/page-extrinsics/src/Decoder.tsx index bf9aaf3442..ff67652535 100644 --- a/packages/page-extrinsics/src/Decoder.tsx +++ b/packages/page-extrinsics/src/Decoder.tsx @@ -131,7 +131,11 @@ function Decoder ({ className, defaultValue, setLast }: Props): React.ReactEleme } export default React.memo(styled(Decoder)` - .ui--Extrinsic--toplevel { + .ui--Call--toplevel { margin-top: 0; } + + .ui--Call > .ui--Params.withBorder { + padding-left: 2rem; + } `); diff --git a/packages/page-parachains/src/Overview/ParachainInfo.tsx b/packages/page-parachains/src/Overview/ParachainInfo.tsx index eb083667ef..03528dda8f 100644 --- a/packages/page-parachains/src/Overview/ParachainInfo.tsx +++ b/packages/page-parachains/src/Overview/ParachainInfo.tsx @@ -28,7 +28,7 @@ function ParachainInfo ({ className, id }: Props): React.ReactElement { export default React.memo(styled(ParachainInfo)` .version { - font-size: 0.85rem; + font-size: var(--font-size-small); white-space: nowrap; > div { diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx index ff492fd778..e0010bced1 100644 --- a/packages/page-referenda/src/Referenda/Referendum.tsx +++ b/packages/page-referenda/src/Referenda/Referendum.tsx @@ -431,13 +431,13 @@ function Referendum (props: Props): React.ReactElement { {submittedIn && ( <>
{t('Submitted at')}
- + #{formatNumber(submittedIn)} )} {nextAlarm && ( <>
{t('Next alarm')}
- + #{formatNumber(nextAlarm)} )} @@ -445,19 +445,19 @@ function Referendum (props: Props): React.ReactElement { {enactAt && ( <>
{enactAt.at ? t('Enact at') : t('Enact after')}
- + {enactAt.at && '#'}{t('{{blocks}} blocks', { replace: { blocks: formatNumber(enactAt.blocks) } })} )} {confirmEnd && ( <>
{t('Confirm end')}
- + #{formatNumber(confirmEnd)} )} {enactAt?.end && ( <>
{t('Enact end')}
- + #{formatNumber(enactAt.end)} )} diff --git a/packages/page-referenda/src/Referenda/Submit.tsx b/packages/page-referenda/src/Referenda/Submit.tsx index 10ed351bfa..551a8edfa7 100644 --- a/packages/page-referenda/src/Referenda/Submit.tsx +++ b/packages/page-referenda/src/Referenda/Submit.tsx @@ -347,8 +347,10 @@ export default React.memo(styled(Submit)` .trackOption { .faded { - margin-top: 0.25rem; - opacity: 0.5; + font-size: var(--font-size-small); + font-weight: var(--font-weight-normal); + margin-top: 0.125rem; + opacity: 0.6; } } diff --git a/packages/page-settings/src/General.tsx b/packages/page-settings/src/General.tsx index f3724c9ccd..e89a18ee17 100644 --- a/packages/page-settings/src/General.tsx +++ b/packages/page-settings/src/General.tsx @@ -66,8 +66,8 @@ function General ({ className = '' }: Props): React.ReactElement { const themeOptions = useMemo( () => [ - { text: t('Light theme (default)'), value: 'light' }, - { text: t('Dark theme (experimental, work-in-progress)'), value: 'dark' } + { text: t('Light theme'), value: 'light' }, + { text: t('Dark theme'), value: 'dark' } ], [t] ); diff --git a/packages/page-staking/src/Legend.tsx b/packages/page-staking/src/Legend.tsx index 51bb4db85d..ee6c12c846 100644 --- a/packages/page-staking/src/Legend.tsx +++ b/packages/page-staking/src/Legend.tsx @@ -100,7 +100,7 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme } export default React.memo(styled(Legend)` - font-size: 0.85rem; + font-size: var(--font-size-small); padding: 1rem 0.5rem; text-align: center; diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx index fd73c8f699..74a139aa12 100644 --- a/packages/react-components/src/AccountName.tsx +++ b/packages/react-components/src/AccountName.tsx @@ -246,7 +246,6 @@ export default React.memo(styled(AccountName)` font-weight: var(--font-weight-normal) !important; filter: grayscale(100%); line-height: 1; - opacity: 0.6; overflow: hidden; text-overflow: ellipsis; @@ -256,14 +255,10 @@ export default React.memo(styled(AccountName)` &.isAddress { font: var(--font-mono); + opacity: 0.6; text-transform: none; } - &.isGood, - &.isLocal { - opacity: 1; - } - .sub, .top { vertical-align: middle; diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx index 02b98cfead..b680f4cc64 100644 --- a/packages/react-components/src/AddressInfo.tsx +++ b/packages/react-components/src/AddressInfo.tsx @@ -659,13 +659,6 @@ export default withMulti( padding-right: 0.5rem; text-align: right; vertical-align: middle; - - // from h5 - font-style: normal; - font-weight: var(--font-weight-normal); - font-size: 0.714rem; - line-height: 1rem; - text-transform: uppercase; margin-bottom: 0.25rem; .help.circle.icon { diff --git a/packages/react-components/src/AddressRow.tsx b/packages/react-components/src/AddressRow.tsx index a2ca4080a9..f99b3d1a70 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.5; + opacity: 0.6; } `); diff --git a/packages/react-components/src/AddressToggle.tsx b/packages/react-components/src/AddressToggle.tsx index b5e690d138..252d2c2a32 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.5; + opacity: 0.6; } &:hover { diff --git a/packages/react-components/src/Call.tsx b/packages/react-components/src/Call.tsx index 7821e7bce1..f21951825b 100644 --- a/packages/react-components/src/Call.tsx +++ b/packages/react-components/src/Call.tsx @@ -27,6 +27,7 @@ export interface Props { onError?: () => void; value: IExtrinsic | IMethod; withBorder?: boolean; + withExpander?: boolean; withHash?: boolean; withSignature?: boolean; tip?: BN; @@ -91,7 +92,7 @@ function extractState (value: IExtrinsic | IMethod, withHash?: boolean, withSign return { hash, overrides, params, signature, signatureType, values }; } -function Call ({ callName, children, className = '', labelHash, labelSignature, mortality, onError, tip, value, withBorder, withHash, withSignature }: Props): React.ReactElement { +function Call ({ callName, children, className = '', labelHash, labelSignature, mortality, onError, tip, value, withBorder, withExpander, withHash, withSignature }: Props): React.ReactElement { const { t } = useTranslation(); const [{ hash, overrides, params, signature, signatureType, values }, setExtracted] = useState({ hash: null, params: [], signature: null, signatureType: null, values: [] }); @@ -100,7 +101,7 @@ function Call ({ callName, children, className = '', labelHash, labelSignature, }, [callName, value, withHash, withSignature]); return ( -
+
{children} -
+
{hash && ( diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx index 397660f3ab..b0bf15b60b 100644 --- a/packages/react-components/src/CardSummary.tsx +++ b/packages/react-components/src/CardSummary.tsx @@ -137,10 +137,6 @@ export default React.memo(styled(CardSummary)` } } - > label { - font-size: 0.95rem; - } - .isSecondary { font-size: 1rem; font-weight: var(--font-weight-normal); diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx index 0dbde17274..20e869b9d2 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.5; + opacity: 0.6; } } diff --git a/packages/react-components/src/Event.tsx b/packages/react-components/src/Event.tsx index 6e1e5ec802..382ced2da6 100644 --- a/packages/react-components/src/Event.tsx +++ b/packages/react-components/src/Event.tsx @@ -20,6 +20,7 @@ export interface Props { className?: string; eventName?: string; value: Event; + withExpander?: boolean; } interface Value { @@ -31,7 +32,7 @@ interface AbiEvent extends DecodedEvent { values: Value[]; } -function EventDisplay ({ children, className = '', eventName, value }: Props): React.ReactElement { +function EventDisplay ({ children, className = '', eventName, value, withExpander }: Props): React.ReactElement { const { t } = useTranslation(); const names = value.data.names; const params = value.typeDef.map((type, i) => ({ @@ -84,6 +85,7 @@ function EventDisplay ({ children, className = '', eventName, value }: Props): R overrides={overrides} params={params} values={values} + withExpander={withExpander} > {abiEvent && ( <> diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx index 39b7c353cc..aa053ae2bf 100644 --- a/packages/react-components/src/Expander.tsx +++ b/packages/react-components/src/Expander.tsx @@ -151,18 +151,10 @@ export default React.memo(styled(Expander)` justify-content: end; } } - - .ui--Params.withBorder { - padding-left: 0.25rem; - } } &.isHeader { margin-left: 2rem; - - .ui--Expander-summary-title { - font-size: 1.1rem; - } } &.withBreaks .ui--Expander-content { @@ -199,7 +191,7 @@ export default React.memo(styled(Expander)` } .ui--Expander-summary-header-sub { - font-size: 1rem; + font-size: var(--font-size-small); opacity: 0.6; } } diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx index 90c24887d9..cfa87b492f 100644 --- a/packages/react-components/src/InputAddress/KeyPair.tsx +++ b/packages/react-components/src/InputAddress/KeyPair.tsx @@ -1,11 +1,12 @@ // Copyright 2017-2023 @polkadot/react-components authors & contributors // SPDX-License-Identifier: Apache-2.0 -import React from 'react'; +import React, { useMemo } from 'react'; import styled from 'styled-components'; import AccountName from '../AccountName'; import IdentityIcon from '../IdentityIcon'; +import { toShortAddress } from '../util/toShortAddress'; interface Props { address: string; @@ -16,6 +17,11 @@ interface Props { } function KeyPair ({ address, className = '' }: Props): React.ReactElement { + const shortAddr = useMemo( + () => toShortAddress(address), + [address] + ); + return (
- {address} + {shortAddr}
); @@ -43,11 +49,11 @@ export default React.memo(styled(KeyPair)` display: inline-block; flex: 1; font: var(--font-mono); + font-size: var(--font-size-small); margin-left: 1rem; - opacity: 0.5; + opacity: 0.6; overflow: hidden; text-align: right; - text-overflow: ellipsis; } > .icon { diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx index 1e2351a443..4c0f4a3ef1 100644 --- a/packages/react-components/src/InputBalance.tsx +++ b/packages/react-components/src/InputBalance.tsx @@ -118,7 +118,7 @@ export default React.memo(styled(InputBalance)` } > div.text:first-child { - font-size: 0.9em; + font-size: var(--font-size-small); position: absolute; top: 50%; transform: translateY(-50%); diff --git a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx index 1c02dd883a..ea7ea143cc 100644 --- a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx +++ b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx @@ -62,7 +62,8 @@ export default React.memo(styled(LinkedWrapper)` .ui--DropdownLinked-Item-text { flex: 1; - opacity: 0.5; + font-size: var(--font-size-small); + opacity: 0.6; overflow: hidden; text-align: right; text-overflow: ellipsis; diff --git a/packages/react-components/src/Inspect.tsx b/packages/react-components/src/Inspect.tsx index bad5a9227d..311a7eeaf4 100644 --- a/packages/react-components/src/Inspect.tsx +++ b/packages/react-components/src/Inspect.tsx @@ -76,7 +76,7 @@ function DecodedInspect ({ className, hex, inspect, label }: Props): React.React {formatted.map(({ name, value }, i) => ( - {name} + {value} ))} @@ -85,7 +85,7 @@ function DecodedInspect ({ className, hex, inspect, label }: Props): React.React className='isLink' key='hex' > - {t('link')} + .ui--Labelled-content { diff --git a/packages/react-components/src/LinkExternal.tsx b/packages/react-components/src/LinkExternal.tsx index 9bc11d8305..aa06e44b14 100644 --- a/packages/react-components/src/LinkExternal.tsx +++ b/packages/react-components/src/LinkExternal.tsx @@ -88,7 +88,7 @@ export default React.memo(styled(LinkExternal)` } &.isSmall { - font-size: 0.85rem; + font-size: var(--font-size-small); line-height: 1.35; text-align: center; } diff --git a/packages/react-components/src/Menu/Header.tsx b/packages/react-components/src/Menu/Header.tsx index 7228425132..ed07f2074e 100644 --- a/packages/react-components/src/Menu/Header.tsx +++ b/packages/react-components/src/Menu/Header.tsx @@ -15,9 +15,9 @@ function Header ({ children, className }: HeaderProps): React.ReactElement { } export default React.memo(styled(Header)` - text-transform: uppercase; - font-size: 0.714rem; + color: var(--color-label); + font-size: var(--font-size-label); line-height: 0.857rem; - margin-bottom: 0.3rem; + text-transform: var(--text-transform-label); `); diff --git a/packages/react-components/src/Menu/Item.tsx b/packages/react-components/src/Menu/Item.tsx index bee6e094c7..50470c57fb 100644 --- a/packages/react-components/src/Menu/Item.tsx +++ b/packages/react-components/src/Menu/Item.tsx @@ -33,17 +33,14 @@ function Item ({ children, className = '', icon, isDisabled, label, onClick }: I } export default React.memo(styled(Item)` + align-items: center; cursor: pointer; display: flex; flex-direction: row; - align-items: center; - - position: relative; - - font-size: 0.93rem; + font-size: var(--font-size-small); line-height: 0.93rem; - padding: 0.5rem 1rem; + position: relative; &:last-child { margin-bottom: 0; diff --git a/packages/react-components/src/Modal/Columns.tsx b/packages/react-components/src/Modal/Columns.tsx index debdf86d9a..3894a518d7 100644 --- a/packages/react-components/src/Modal/Columns.tsx +++ b/packages/react-components/src/Modal/Columns.tsx @@ -18,7 +18,7 @@ function Columns ({ children, className = '', hint }: ColumnsProps): React.React } export default React.memo(styled(Columns)` - align-items: flex-start; + align-items: center; display: flex; justify-content: space-between; @@ -50,9 +50,9 @@ export default React.memo(styled(Columns)` box-sizing: border-box; display: block; flex: 0 34%; - font-size: 0.95rem; + font-size: var(--font-size-small); opacity: 0.75; - padding: 0.75rem 0 0.25rem 0.5rem; + padding: 0.25rem 0 0.25rem 0.5rem; } } } diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx index d2be8305bc..6a55472f1d 100644 --- a/packages/react-components/src/Progress.tsx +++ b/packages/react-components/src/Progress.tsx @@ -111,9 +111,8 @@ export default React.memo(styled(Progress)` top: 0.375rem; div { + font-size: var(--font-size-small); line-height: 1; - font-size: 1.1rem; - text-shadow: 0 0 2px #f5f3f1; } } diff --git a/packages/react-components/src/Row.tsx b/packages/react-components/src/Row.tsx index 9c978ba791..765159d08f 100644 --- a/packages/react-components/src/Row.tsx +++ b/packages/react-components/src/Row.tsx @@ -33,7 +33,7 @@ export const styles = ` .ui--Row-accountId, .ui--Row-icon { filter: grayscale(100); - opacity: 0.5; + opacity: 0.6; } } diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx index f3f7a78504..419fa1a077 100644 --- a/packages/react-components/src/Table/Head.tsx +++ b/packages/react-components/src/Table/Head.tsx @@ -4,8 +4,6 @@ import React from 'react'; import styled from 'styled-components'; -import Icon from '../Icon'; - type HeaderDef = [React.ReactNode?, string?, number?, (() => void)?]; interface Props { @@ -37,15 +35,7 @@ function Head ({ children, className = '', filter, header, isEmpty }: Props): Re onClick={onClick} > {index === 0 - ? ( -

- - {label} -

- ) + ?

{label}

: isEmpty ? '' : label @@ -59,7 +49,6 @@ function Head ({ children, className = '', filter, header, isEmpty }: Props): Re } export default React.memo(styled(Head)` - opacity: 0.85; z-index: 1; th { @@ -78,17 +67,12 @@ export default React.memo(styled(Head)` display: table-cell; vertical-align: middle; - .ui--Icon { - font-size: 1rem; - margin-right: 0.5rem; - vertical-align: middle; - } - .sub { display: inline-block; font-size: 1rem; padding-left: 1.5rem; text-overflow: ellipsis; + vertical-align: middle; } } diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx index 6d6255479f..610bfbf68e 100644 --- a/packages/react-components/src/Tabs/Tab.tsx +++ b/packages/react-components/src/Tabs/Tab.tsx @@ -48,34 +48,32 @@ function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRo } export default React.memo(styled(Tab)` - position: relative; - display: flex; align-items: center; + display: flex; color: #8B8B8B; - padding: 0 1.5rem; + font-size: var(--font-size-button); height: 100%; - font-size: 1rem; - font-weight: 400; + padding: 0 1.5rem; + position: relative; + &:hover { + color: #8B8B8B; - &:hover { - color: #8B8B8B; - - .tabLinkText::after{ - background-color: #8B8B8B; - } + .tabLinkText::after { + background-color: #8B8B8B; } + } - &:hover .tabLinkText::after, - &.tabLinkActive .tabLinkText::after { - content: ''; - position: absolute; - width: 3.14rem; - height: 2px; - bottom: -2px; - left: 50%; - transform: translateX(-50%); - } + &:hover .tabLinkText::after, + &.tabLinkActive .tabLinkText::after { + content: ''; + position: absolute; + width: 3.14rem; + height: 2px; + bottom: -2px; + left: 50%; + transform: translateX(-50%); + } &.tabLinkActive { color: var(--color-text) !important; diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx index f1466c3398..9477c0bca7 100644 --- a/packages/react-components/src/Tabs/index.tsx +++ b/packages/react-components/src/Tabs/index.tsx @@ -104,11 +104,11 @@ export default React.memo(styled(Tabs)` .ui--TabsList { display: flex; - list-style: none; height: 100%; + list-style: none; margin: 0 1.4rem; - white-space: nowrap; padding: 0; + white-space: nowrap; @media only screen and (max-width: 900px) { margin: 0 2.72rem 0 2.35rem; diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx index bcb28cf243..e8a18b58aa 100644 --- a/packages/react-components/src/Tag.tsx +++ b/packages/react-components/src/Tag.tsx @@ -44,7 +44,7 @@ export default React.memo(styled(Tag)` border-radius: 0.25rem; color: #fff; display: inline-block; - font-size: 0.857rem; + font-size: var(--font-size-small); font-weight: var(--font-weight-normal); line-height: 1rem; margin: 0 0.125rem; @@ -55,7 +55,7 @@ export default React.memo(styled(Tag)` z-index: 1; &.tinySize { - font-size: .71428571rem; + font-size: var(--font-size-tiny); } &.blackColor { @@ -75,7 +75,8 @@ export default React.memo(styled(Tag)` } &.lightgreyColor { - background: #a6a6a6; + background: #b6b6b6; + opacity: 0.7; } &.orangeColor { diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts index cec201d21e..d69b529270 100644 --- a/packages/react-components/src/styles/components.ts +++ b/packages/react-components/src/styles/components.ts @@ -40,12 +40,13 @@ export default (_theme: ThemeDef): string => ` padding-right: 0; padding-bottom: 0.3em; padding-left: 0.3em; - color: #2e86ab !important; - background: none !important; + color: #2e86ab !important; + background: none !important; } button.ui--Button { font: var(--font-sans); + font-size: var(--font-size-button); } .editable { diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts index 5b28988c48..20b7b05908 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -387,6 +387,7 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr &.error, &.warning { border-left-width: 0.25rem; + font-size: var(--font-size-small); line-height: 1.5; margin-left: 2.25rem; padding: 0.75rem 1rem; @@ -496,9 +497,9 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr color: var(--color-label); font-style: normal; font-weight: var(--font-weight-normal); - font-size: 0.714rem; + font-size: var(--font-size-label); line-height: 1rem; - text-transform: uppercase; + text-transform: var(--text-transform-label); margin-bottom: 0.25rem; } @@ -534,8 +535,11 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr color: var(--color-label); display: block; font: var(--font-sans); - font-size: 1rem; + font-size: var(--font-size-label); font-weight: var(--font-weight-normal); + line-height: 1rem; + text-transform: var(--text-transform-label); + vertical-align: middle; } main { diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts index 90a62fca66..ba5a04d0c7 100644 --- a/packages/react-components/src/styles/semantic.ts +++ b/packages/react-components/src/styles/semantic.ts @@ -24,6 +24,7 @@ export default (_theme: ThemeDef): string => ` .ui.input > input, .ui.selection.dropdown > input { background: var(--bg-input); + border-color: var(--border-input); color: var(--color-text); font: var(--font-sans); font-size: 1rem; @@ -94,14 +95,20 @@ export default (_theme: ThemeDef): string => ` border-style: dashed; } - .ui.primary.buttons .ui.button { - background-color: #666; - border-color: transparent; - color: #f9f8f7; - opacity: 0.5; + .ui.buttons { + .ui.button { + background: transparent; + } - .dropdown.icon { - opacity: 0; + &.primary .ui.button { + background-color: #666; + border-color: transparent; + color: #f9f8f7; + opacity: 0.5; + + .dropdown.icon { + opacity: 0; + } } } } diff --git a/packages/react-params/src/Holder.tsx b/packages/react-params/src/Holder.tsx index cc04ed577d..15fa7c264f 100644 --- a/packages/react-params/src/Holder.tsx +++ b/packages/react-params/src/Holder.tsx @@ -8,12 +8,13 @@ interface Props { children?: React.ReactNode; className?: string; withBorder?: boolean; + withExpander?: boolean; withPadding?: boolean; } -function Holder ({ children, className = '', withBorder, withPadding }: Props): React.ReactElement { +function Holder ({ children, className = '', withBorder, withExpander, withPadding }: Props): React.ReactElement { return ( -
+
{children}
); @@ -21,24 +22,29 @@ function Holder ({ children, className = '', withBorder, withPadding }: Props): export default React.memo(styled(Holder)` &.withBorder { - padding-left: 1.5rem; + padding-left: 2rem; .ui--Params-Content { - border-left: 0.25rem solid #f2f2f2; + border-left: 1px dashed var(--border-input); .ui--Params.withBorder { - padding-left: 0.25rem; + padding-left: 0; } } } + &.withExpander { + padding-left: 0.25rem; + } + &.withPadding { padding-left: 4rem; } - .ui--Param .ui--Labelled label { + .ui--Param-composite .ui--row > .ui--Labelled > label { text-transform: none !important; font: var(--font-mono); + font-size: var(--font-size-label); } .ui--row { @@ -54,7 +60,7 @@ export default React.memo(styled(Holder)` padding: 0; .ui--Params-Content { - margin-left: 1.75rem; + margin-left: 2rem; } } diff --git a/packages/react-params/src/index.tsx b/packages/react-params/src/index.tsx index d0e1b1cfea..80859daf55 100644 --- a/packages/react-params/src/index.tsx +++ b/packages/react-params/src/index.tsx @@ -29,6 +29,7 @@ interface Props extends I18nProps { registry?: Registry; values?: RawParams | null; withBorder?: boolean; + withExpander?: boolean; } interface State { @@ -81,7 +82,7 @@ class Params extends React.PureComponent { } public override render (): React.ReactNode { - const { children, className = '', isDisabled, isError, onEnter, onEscape, overrides, params, registry = api.registry, withBorder = true } = this.props; + const { children, className = '', isDisabled, isError, onEnter, onEscape, overrides, params, registry = api.registry, withExpander, withBorder = true } = this.props; const { values = this.props.values } = this.state; if (!values || !values.length) { @@ -92,6 +93,7 @@ class Params extends React.PureComponent {
diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx index eff67e1855..834fe5ea5e 100644 --- a/packages/react-query/src/BlockToTime.tsx +++ b/packages/react-query/src/BlockToTime.tsx @@ -47,6 +47,7 @@ export default React.memo(styled(BlockToTime)` } span.timeUnits { - font-size: 0.825em; + // this is not var(--font-size-small) since we want em + font-size: 0.875em; } `); diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx index eb2cae5c3e..f0a0b63602 100644 --- a/packages/react-query/src/FormatBalance.tsx +++ b/packages/react-query/src/FormatBalance.tsx @@ -131,7 +131,7 @@ export default React.memo(styled(FormatBalance)` > .ui--FormatBalance-postfix { font-weight: var(--font-weight-light); - opacity: 0.7; + opacity: 0.75; vertical-align: baseline; } }