From ff328328ac89ec411e48365ecdfa64f3f57feabb Mon Sep 17 00:00:00 2001 From: Jaco Date: Thu, 12 Jan 2023 09:36:21 +0200 Subject: [PATCH] Small update to menu sizing (#8769) * Small update to menu sizing * Additional * Align all short address displays * shor hashes, short addresses * isLoading to inputs * Adjust --tmp for Labelled * jiggle endpoint display * button sizes * label sizing * final label sizing * column headers * label padding * parachain hashes --- packages/apps/public/index.html | 24 ++++++++++++++--- packages/apps/src/Apps.tsx | 16 ----------- packages/apps/src/Endpoints/Network.tsx | 7 ++++- packages/apps/src/Menu/Grouping.tsx | 1 - packages/apps/src/Menu/Item.tsx | 2 -- packages/apps/src/Menu/NodeInfo.tsx | 4 --- .../page-accounts/src/Sidebar/Sidebar.tsx | 2 -- .../page-accounts/src/modals/Transfer.tsx | 5 ---- .../src/Overview/ProposalCell.tsx | 6 ++--- .../src/Overview/Parachain.tsx | 4 ++- .../src/Overview/useParaInfo.ts | 4 +-- .../src/Parathreads/Parathread.tsx | 4 ++- .../src/Parathreads/useThreadInfo.ts | 6 ++--- packages/page-parachains/src/Teleport.tsx | 27 +++++-------------- .../page-preimages/src/Preimages/Hash.tsx | 15 +++-------- .../src/Referenda/RefOngoing.tsx | 6 ++--- .../src/Referenda/Referendum.tsx | 7 ++++- .../react-components/src/AccountIndex.tsx | 7 +---- packages/react-components/src/AccountName.tsx | 4 ++- packages/react-components/src/AddressMini.tsx | 9 +++++-- packages/react-components/src/AddressRow.tsx | 4 +-- .../react-components/src/AddressSmall.tsx | 8 ++++-- packages/react-components/src/Input.tsx | 8 ++++-- .../src/InputAddress/KeyPair.tsx | 14 ++++------ .../react-components/src/InputBalance.tsx | 4 ++- packages/react-components/src/InputNumber.tsx | 4 ++- packages/react-components/src/Labelled.tsx | 5 ++++ packages/react-components/src/Row.tsx | 15 ++++++++--- packages/react-components/src/Table/Head.tsx | 8 +++--- packages/react-components/src/Table/Table.tsx | 11 +++++++- packages/react-components/src/Tabs/Tab.tsx | 1 - .../react-components/src/styles/components.ts | 1 - packages/react-components/src/styles/index.ts | 2 ++ .../src/util/getAddressName.ts | 4 +-- .../src/util/toShortAddress.ts | 4 +-- packages/react-params/src/Holder.tsx | 1 - 36 files changed, 130 insertions(+), 124 deletions(-) diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html index 3ae1c8155e..2f11df3c33 100644 --- a/packages/apps/public/index.html +++ b/packages/apps/public/index.html @@ -30,15 +30,17 @@ --font-size-small: 0.889rem; --font-size-tiny: 0.79rem; --font-weight-bold: 700; - --font-weight-header: 300; + --font-weight-header: 400; --font-weight-light: 200; --font-weight-normal: 400; - --font-size-label: 0.79rem; - --font-weight-label: 400; + --font-size-label: 0.889rem; + --font-weight-label: 700; --text-transform-label: lowercase; --opacity-light: 0.6; --width-full: 1750px; --width-half: 875px; + --width-shortaddr: 6.5em; + --width-shorthash: 9em; --bg-menu-hover: rgba(255, 255, 255, 0.2); } @@ -89,6 +91,22 @@ /* --color-table-head: rgba(78, 78, 78, 0.8); */ --color-text: rgba(78, 78, 78, 0.8); /* 1 */ } + + .--digits { + font-variant-numeric: tabular-nums; + text-align: right; + white-space: nowrap; + } + + .--hidden { + display: none; + } + + .--tmp { + background: grey; + filter: blur(2px); + opacity: 0.15; + } diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index 8caefe12fb..fd2e4423bf 100644 --- a/packages/apps/src/Apps.tsx +++ b/packages/apps/src/Apps.tsx @@ -54,20 +54,4 @@ export default React.memo(styled(Apps)` display: flex; flex-direction: column; min-height: 100vh; - - .--digits { - font-variant-numeric: tabular-nums; - text-align: right; - white-space: nowrap; - } - - .--hidden { - display: none; - } - - .--tmp { - background: grey; - filter: blur(2px); - opacity: 0.2; - } `); diff --git a/packages/apps/src/Endpoints/Network.tsx b/packages/apps/src/Endpoints/Network.tsx index 9994fe7683..16c545e1fc 100644 --- a/packages/apps/src/Endpoints/Network.tsx +++ b/packages/apps/src/Endpoints/Network.tsx @@ -104,6 +104,10 @@ export default React.memo(styled(NetworkDisplay)` justify-content: flex-start; position: relative; + &+.ui--Toggle { + margin-top: 1rem; + } + &.isChild .endpointIcon { margin-left: 1.25rem; } @@ -115,7 +119,7 @@ export default React.memo(styled(NetworkDisplay)` .endpointValue { .endpointExtra { font-size: var(--font-size-small); - opacity: 0.8; + opacity: var(--opacity-light); } } } @@ -123,6 +127,7 @@ export default React.memo(styled(NetworkDisplay)` // we jiggle our labels somewhat... label { font-size: var(--font-size-small); + font-weight: var(--font-weight-normal); text-transform: none; } `); diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx index d4a4770312..f6f2923b0d 100644 --- a/packages/apps/src/Menu/Grouping.tsx +++ b/packages/apps/src/Menu/Grouping.tsx @@ -59,7 +59,6 @@ export default React.memo(styled(Grouping)` .groupHdr { border-radius: 0.25rem; padding: 0.857rem 1.375rem; - font-size: var(--font-size-small); font-weight: var(--font-weight-normal); line-height: 1.214rem; diff --git a/packages/apps/src/Menu/Item.tsx b/packages/apps/src/Menu/Item.tsx index 3475384b90..3c8b253ddf 100644 --- a/packages/apps/src/Menu/Item.tsx +++ b/packages/apps/src/Menu/Item.tsx @@ -100,8 +100,6 @@ export default React.memo(styled(Item)` display: block; padding: 0.5rem 1.15rem 0.57rem; text-decoration: none; - 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 9d365cc3cb..0753a7db79 100644 --- a/packages/apps/src/Menu/NodeInfo.tsx +++ b/packages/apps/src/Menu/NodeInfo.tsx @@ -38,10 +38,6 @@ export default React.memo(styled(NodeInfo)` 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/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx index e51a63cc27..6c2e23c38f 100644 --- a/packages/page-accounts/src/Sidebar/Sidebar.tsx +++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx @@ -122,7 +122,6 @@ export default React.memo(styled(FullSidebar)` .ui--AddressMenu-addr, .ui--AddressMenu-index { - font: var(--font-mono); text-align: left; font-size: var(--font-size-small); } @@ -136,7 +135,6 @@ export default React.memo(styled(FullSidebar)` .ui--AddressMenu-copyaddr, .ui--AddressMenu-index { - font: var(--font-mono); text-align: left; font-size: var(--font-size-small); } diff --git a/packages/page-accounts/src/modals/Transfer.tsx b/packages/page-accounts/src/modals/Transfer.tsx index cfc6e187a0..aaf7628994 100644 --- a/packages/page-accounts/src/modals/Transfer.tsx +++ b/packages/page-accounts/src/modals/Transfer.tsx @@ -105,7 +105,6 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send ('The transferred balance will be subtracted (along with fees) from the sender account.')}> ('The account you will send funds from.')} isDisabled={!!propSenderId} label={t('send from account')} labelExtra={ @@ -121,7 +120,6 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send ('The beneficiary will have access to the transferred fees when the transaction is included in a block.')}> ('Select a contact or paste the address you want to send funds to.')} isDisabled={!!propRecipientId} label={t('send to address')} labelExtra={ @@ -143,7 +141,6 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send ('The full account balance to be transferred, minus the transaction fees')} isDisabled key={maxTransfer?.toString()} label={t('transferrable minus fees')} @@ -153,7 +150,6 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send <> ('Type the amount you want to transfer. Note that you can select the unit on the right e.g sending 1 milli is equivalent to sending 0.001.')} isError={!hasAvailable} isZeroable label={t('amount')} @@ -162,7 +158,6 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send /> ('The minimum amount that an account should have to be deemed active')} isDisabled label={t('existential deposit')} /> diff --git a/packages/page-democracy/src/Overview/ProposalCell.tsx b/packages/page-democracy/src/Overview/ProposalCell.tsx index b1dffeedc3..60d93ca1d4 100644 --- a/packages/page-democracy/src/Overview/ProposalCell.tsx +++ b/packages/page-democracy/src/Overview/ProposalCell.tsx @@ -38,8 +38,8 @@ function ProposalCell ({ className = '', imageHash, proposal }: Props): React.Re const textHash = imageHash.toString(); return ( - -
{textHash.slice(0, 8)}…{textHash.slice(-8)}
+ +
{textHash}
); } @@ -68,8 +68,6 @@ function ProposalCell ({ className = '', imageHash, proposal }: Props): React.Re export default React.memo(styled(ProposalCell)` .shortHash { - font: var(--font-mono); - + div { margin-left: 0.5rem; } diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx index 37962caddb..8de15c6aaf 100644 --- a/packages/page-parachains/src/Overview/Parachain.tsx +++ b/packages/page-parachains/src/Overview/Parachain.tsx @@ -119,7 +119,9 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion, summary={t('Non-voters ({{count}})', { replace: { count: formatNumber(nonBacked.length) } })} /> - {paraInfo.headHex} + +
{paraInfo.headHex}
+ {paraInfo.updateAt && bestNumber && paraInfo.lifecycle?.isParachain ? ( diff --git a/packages/page-parachains/src/Overview/useParaInfo.ts b/packages/page-parachains/src/Overview/useParaInfo.ts index 74f862d666..350cbdf26c 100644 --- a/packages/page-parachains/src/Overview/useParaInfo.ts +++ b/packages/page-parachains/src/Overview/useParaInfo.ts @@ -8,8 +8,6 @@ import type { Codec, ITuple } from '@polkadot/types/types'; import { createNamedHook, useApi, useCallMulti } from '@polkadot/react-hooks'; -import { sliceHex } from '../util'; - type QueryResult = [Option, Option, Option, Vec, Vec, Vec, Vec, Option, Option, Option, Option>[]]; interface Result { @@ -42,7 +40,7 @@ const MULTI_OPTS = { }, transform: ([headData, optUp, optLifecycle, dmp, ump, hrmpE, hrmpI, optWm, optPending, optInfo, leases]: QueryResult): Result => ({ headHex: headData.isSome - ? sliceHex(headData.unwrap()) + ? headData.unwrap().toHex() : null, leases: leases .map((opt, index) => opt.isSome ? index : -1) diff --git a/packages/page-parachains/src/Parathreads/Parathread.tsx b/packages/page-parachains/src/Parathreads/Parathread.tsx index 8abebc67d8..3209c462bf 100644 --- a/packages/page-parachains/src/Parathreads/Parathread.tsx +++ b/packages/page-parachains/src/Parathreads/Parathread.tsx @@ -41,7 +41,9 @@ function Parathread ({ id, leasePeriod, leases, nextAction }: Props): React.Reac {manager && } - {headHex} + +
{headHex}
+ , Option, Option, Option]): Result => ({ headHex: optHead.isSome - ? sliceHex(optHead.unwrap()) + ? optHead.unwrap().toHex() : optGenesis.isSome - ? sliceHex(optGenesis.unwrap().genesisHead) + ? optGenesis.unwrap().genesisHead.toHex() : null, lifecycle: optLifecycle.unwrapOr(null), manager: optInfo.isSome diff --git a/packages/page-parachains/src/Teleport.tsx b/packages/page-parachains/src/Teleport.tsx index 4fd3e9b741..70293683bb 100644 --- a/packages/page-parachains/src/Teleport.tsx +++ b/packages/page-parachains/src/Teleport.tsx @@ -8,7 +8,7 @@ import type { BN } from '@polkadot/util'; import React, { useMemo, useState } from 'react'; -import { ChainImg, Dropdown, InputAddress, InputBalance, MarkWarning, Modal, Spinner, TxButton } from '@polkadot/react-components'; +import { ChainImg, Dropdown, InputAddress, InputBalance, MarkWarning, Modal, TxButton } from '@polkadot/react-components'; import { useApi, useApiUrl, useTeleport } from '@polkadot/react-hooks'; import { Available } from '@polkadot/react-query'; import { BN_ZERO, isFunction } from '@polkadot/util'; @@ -182,25 +182,12 @@ function Teleport ({ onClose }: Props): React.ReactElement | null { label={t('amount')} onChange={setAmount} /> - {destApi - ? destApi.consts.balances - ? ( - <> - ('destination existential deposit')} - /> - - ) - : null - : ( - ('Retrieving destination chain fees')} - variant='appPadded' - /> - ) - } + ('destination existential deposit')} + /> diff --git a/packages/page-preimages/src/Preimages/Hash.tsx b/packages/page-preimages/src/Preimages/Hash.tsx index a7af1f0ca5..2553d45913 100644 --- a/packages/page-preimages/src/Preimages/Hash.tsx +++ b/packages/page-preimages/src/Preimages/Hash.tsx @@ -3,7 +3,7 @@ import type { HexString } from '@polkadot/util/types'; -import React, { useMemo } from 'react'; +import React from 'react'; import styled from 'styled-components'; import { CopyButton } from '@polkadot/react-components'; @@ -13,15 +13,10 @@ interface Props { value: HexString; } -function Hash ({ className, value }: Props): React.ReactElement { - const shortHash = useMemo( - () => `${value.slice(0, 10)}…${value.slice(-8)}`, - [value] - ); - +function Hash ({ className = '', value }: Props): React.ReactElement { return ( - -
{shortHash}
+ +
{value}
); @@ -36,8 +31,6 @@ export default React.memo(styled(Hash)` } .shortHash { - font: var(--font-mono); - + div { margin-left: 0.5rem; } diff --git a/packages/page-referenda/src/Referenda/RefOngoing.tsx b/packages/page-referenda/src/Referenda/RefOngoing.tsx index 137f09ae30..bfc1ea231a 100644 --- a/packages/page-referenda/src/Referenda/RefOngoing.tsx +++ b/packages/page-referenda/src/Referenda/RefOngoing.tsx @@ -28,7 +28,6 @@ interface Expanded { confirmEnd: BN | null; }; proposalHash: HexString; - shortHash: string; submissionDeposit: PalletReferendaDeposit | null; tally: PalletConvictionVotingTally | PalletRankedCollectiveTally; tallyTotal: BN; @@ -69,7 +68,6 @@ function expandOngoing (info: Referendum['info'], track?: PalletReferendaTrackIn prepareEnd }, proposalHash, - shortHash: `${proposalHash.slice(0, 10)}…${proposalHash.slice(-8)}`, submissionDeposit: unwrapDeposit(ongoing.submissionDeposit), tally: ongoing.tally, tallyTotal: ongoing.tally.ayes.add(ongoing.tally.nays) @@ -79,7 +77,7 @@ function expandOngoing (info: Referendum['info'], track?: PalletReferendaTrackIn function Ongoing ({ isMember, members, palletReferenda, palletVote, ranks, trackInfo, value: { id, info, isConvictionVote, track } }: Props): React.ReactElement { const { t } = useTranslation(); - const { decisionDeposit, periods: { confirmEnd, decideEnd, periodEnd }, proposalHash, shortHash, submissionDeposit, tally, tallyTotal } = useMemo( + const { decisionDeposit, periods: { confirmEnd, decideEnd, periodEnd }, proposalHash, submissionDeposit, tally, tallyTotal } = useMemo( () => expandOngoing(info, track), [info, track] ); @@ -97,7 +95,7 @@ function Ongoing ({ isMember, members, palletReferenda, palletVote, ranks, track withHash /> ) - :
{shortHash}
+ :
{proposalHash}
} ) - : toShortAddress(value) + : {value} } )} @@ -132,6 +131,12 @@ export default React.memo(styled(AddressMini)` > div { overflow: hidden; text-overflow: ellipsis; + + &.shortAddress { + min-width: var(--width-shortaddr); + max-width: var(--width-shortaddr); + opacity: var(--opacity-light); + } } } diff --git a/packages/react-components/src/AddressRow.tsx b/packages/react-components/src/AddressRow.tsx index b2e6e9fee3..416e26d409 100644 --- a/packages/react-components/src/AddressRow.tsx +++ b/packages/react-components/src/AddressRow.tsx @@ -11,7 +11,6 @@ import BaseIdentityIcon from '@polkadot/react-identicon'; import IdentityIcon from './IdentityIcon'; import Row, { RowProps } from './Row'; -import { toShortAddress } from './util'; export interface Props extends RowProps { isContract?: boolean; @@ -37,7 +36,7 @@ function AddressRow ({ buttons, children, className, defaultName, fullLength = f return ( - {toShortAddress(value)} + {value} )} @@ -93,8 +92,13 @@ export default React.memo(styled(AddressSmall)` .shortAddress { bottom: -0.95rem; color: #8B8B8B; + display: inline-block; left: 0; + min-width: var(--width-shortaddr); + max-width: var(--width-shortaddr); + overflow: hidden; position: absolute; + text-overflow: ellipsis; } } diff --git a/packages/react-components/src/Input.tsx b/packages/react-components/src/Input.tsx index 3089af627d..ad47812304 100644 --- a/packages/react-components/src/Input.tsx +++ b/packages/react-components/src/Input.tsx @@ -24,6 +24,7 @@ interface Props { isEditable?: boolean; isError?: boolean; isFull?: boolean; + isLoading?: boolean; isHidden?: boolean; isInPlaceEditor?: boolean; isReadOnly?: boolean; @@ -92,7 +93,7 @@ const isSelectAll = (key: string, isPreKeyDown: boolean): boolean => let counter = 0; -function Input ({ autoFocus = false, children, className, defaultValue, help, icon, inputClassName, isAction = false, isDisabled = false, isDisabledError = false, isEditable = false, isError = false, isFull = false, isHidden = false, isInPlaceEditor = false, isReadOnly = false, isWarning = false, label, labelExtra, max, maxLength, min, name, onBlur, onChange, onEnter, onEscape, onKeyDown, onKeyUp, onPaste, placeholder, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement { +function Input ({ autoFocus = false, children, className, defaultValue, help, icon, inputClassName, isAction = false, isDisabled = false, isDisabledError = false, isEditable = false, isError = false, isFull = false, isHidden = false, isInPlaceEditor = false, isLoading = false, isReadOnly = false, isWarning = false, label, labelExtra, max, maxLength, min, name, onBlur, onChange, onEnter, onEscape, onKeyDown, onKeyUp, onPaste, placeholder, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement { const [stateName] = useState(() => `in_${counter++}_at_${Date.now()}`); const [initialValue] = useState(() => defaultValue); @@ -162,6 +163,9 @@ function Input ({ autoFocus = false, children, className, defaultValue, help, ic isInPlaceEditor ? 'inPlaceEditor' : '', + isLoading + ? '--tmp' + : '', inputClassName || '', isWarning && !isError ? 'isWarning' @@ -172,7 +176,7 @@ function Input ({ autoFocus = false, children, className, defaultValue, help, ic ? (defaultValue || '') : undefined } - disabled={isDisabled} + disabled={isDisabled || isLoading} error={(!isDisabled && isError) || isDisabledError} hidden={isHidden} iconPosition={ diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx index 97c64d967e..91dcb6097a 100644 --- a/packages/react-components/src/InputAddress/KeyPair.tsx +++ b/packages/react-components/src/InputAddress/KeyPair.tsx @@ -1,12 +1,11 @@ // Copyright 2017-2023 @polkadot/react-components authors & contributors // SPDX-License-Identifier: Apache-2.0 -import React, { useMemo } from 'react'; +import React from 'react'; import styled from 'styled-components'; import AccountName from '../AccountName'; import IdentityIcon from '../IdentityIcon'; -import { toShortAddress } from '../util/toShortAddress'; interface Props { address: string; @@ -17,11 +16,6 @@ interface Props { } function KeyPair ({ address, className = '' }: Props): React.ReactElement { - const shortAddr = useMemo( - () => toShortAddress(address), - [address] - ); - return (
- {shortAddr} + {address}
); @@ -48,12 +42,14 @@ export default React.memo(styled(KeyPair)` > .address { display: inline-block; flex: 1; - font: var(--font-mono); font-size: var(--font-size-small); margin-left: 1rem; + max-width: var(--width-shortaddr); + min-width: var(--width-shortaddr); opacity: var(--opacity-light); 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 53c7c0435b..68b57084a6 100644 --- a/packages/react-components/src/InputBalance.tsx +++ b/packages/react-components/src/InputBalance.tsx @@ -19,6 +19,7 @@ interface Props { isDisabled?: boolean; isError?: boolean; isFull?: boolean; + isLoading?: boolean; isWarning?: boolean; isZeroable?: boolean; label?: React.ReactNode; @@ -64,7 +65,7 @@ function reformat (value?: string | BN, isDisabled?: boolean, siDecimals?: numbe }; } -function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, help, isDisabled, isError, isFull, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement { +function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, help, isDisabled, isError, isFull, isLoading, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement { const { defaultValue, siDefault } = useMemo( () => reformat(inDefault, isDisabled, siDecimals), [inDefault, isDisabled, siDecimals] @@ -80,6 +81,7 @@ function InputBalance ({ autoFocus, children, className = '', defaultValue: inDe isDisabled={isDisabled} isError={isError} isFull={isFull} + isLoading={isLoading} isSi isWarning={isWarning} isZeroable={isZeroable} diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx index 4701e17737..6e204c8da7 100644 --- a/packages/react-components/src/InputNumber.tsx +++ b/packages/react-components/src/InputNumber.tsx @@ -25,6 +25,7 @@ interface Props { isDisabled?: boolean; isError?: boolean; isFull?: boolean; + isLoading?: boolean; isSi?: boolean; isDecimal?: boolean; isWarning?: boolean; @@ -171,7 +172,7 @@ function getValues (api: ApiPromise, value: BN | string = BN_ZERO, si: SiDef | n : getValuesFromString(api, value, si, bitLength, isSigned, isZeroable, maxValue, decimals); } -function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, className = '', defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isWarning, isSigned = false, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siDefault, siSymbol, value: propsValue }: Props): React.ReactElement { +function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, className = '', defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isLoading, isWarning, isSigned = false, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siDefault, siSymbol, value: propsValue }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); const [si, setSi] = useState(() => @@ -273,6 +274,7 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas isDisabled={isDisabled} isError={!isValid || isError} isFull={isFull} + isLoading={isLoading} isWarning={isWarning} label={label} labelExtra={labelExtra} diff --git a/packages/react-components/src/Labelled.tsx b/packages/react-components/src/Labelled.tsx index dd241f81ca..9e5418cb81 100644 --- a/packages/react-components/src/Labelled.tsx +++ b/packages/react-components/src/Labelled.tsx @@ -121,6 +121,11 @@ export default React.memo(styled(Labelled)` flex: 1 1; min-width: 0; + > .--tmp { + // existing is a bit too much + opacity: 0.15; + } + .ui.selection.dropdown { &:not(.floating) { padding-left: 1.45rem; diff --git a/packages/react-components/src/Row.tsx b/packages/react-components/src/Row.tsx index b8d58e7fcf..685ef23931 100644 --- a/packages/react-components/src/Row.tsx +++ b/packages/react-components/src/Row.tsx @@ -79,10 +79,16 @@ export const styles = ` .ui--Row-address, .ui--Row-accountIndex { - font-family: monospace; - font-size: 1.25em; padding: 0; margin-bottom: 0.25rem; + + &.shortAddr { + min-width: var(--width-shortaddr); + max-width: var(--width-shortaddr); + opacity: var(--opacity-light); + overflow: hidden; + text-overflow: ellipsis; + } } .ui--Row-name { @@ -159,6 +165,7 @@ export interface RowProps { isInline?: boolean; isEditableName?: boolean; isEditableTags?: boolean; + isShortAddr?: boolean; name?: string; onChangeName?: (_: string) => void; onChangeTags?: (_: string[]) => void; @@ -167,7 +174,7 @@ export interface RowProps { tags?: string[]; } -function Row ({ address, buttons, children, className = '', defaultName, details, icon, iconInfo, isDisabled, isEditableName, isEditableTags, isInline, name, onChangeName, onChangeTags, onSaveName, onSaveTags, tags }: RowProps): React.ReactElement { +function Row ({ address, buttons, children, className = '', defaultName, details, icon, iconInfo, isDisabled, isEditableName, isEditableTags, isInline, isShortAddr = true, name, onChangeName, onChangeTags, onSaveName, onSaveTags, tags }: RowProps): React.ReactElement { const [isEditingName, toggleIsEditingName] = useToggle(); const [isEditingTags, toggleIsEditingTags] = useToggle(); @@ -220,7 +227,7 @@ function Row ({ address, buttons, children, className = '', defaultName, details ) )} {address && ( -
+
{address}
)} diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx index e95dac2291..ac0e653227 100644 --- a/packages/react-components/src/Table/Head.tsx +++ b/packages/react-components/src/Table/Head.tsx @@ -36,9 +36,7 @@ function Head ({ children, className = '', filter, header, isEmpty }: Props): Re > {index === 0 ?

{label}

- : isEmpty - ? '' - : label + : !isEmpty && label && } )} @@ -75,6 +73,10 @@ export default React.memo(styled(Head)` } } + > label { + margin: 0 !important; + } + &.address { padding-left: 3rem; text-align: left; diff --git a/packages/react-components/src/Table/Table.tsx b/packages/react-components/src/Table/Table.tsx index f7d89a2560..6dcb7c055b 100644 --- a/packages/react-components/src/Table/Table.tsx +++ b/packages/react-components/src/Table/Table.tsx @@ -284,10 +284,19 @@ export default React.memo(styled(Table)` } &.hash { - font: var(--font-mono); // we actually want to use 10ch here, however in the // block expand page gives different sizes to the hashes min-width: 7.5rem; + white-space: nowrap; + + > .shortHash { + max-width: var(--width-shorthash); + min-width: 3em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: var(--width-shorthash); + } } &.links { diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx index 94dd09b57e..4c35f9cf4c 100644 --- a/packages/react-components/src/Tabs/Tab.tsx +++ b/packages/react-components/src/Tabs/Tab.tsx @@ -51,7 +51,6 @@ export default React.memo(styled(Tab)` align-items: center; display: flex; color: #8B8B8B; - font-size: var(--font-size-small); height: 100%; padding: 0 1.5rem; position: relative; diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts index a251887e80..cf930e6bc0 100644 --- a/packages/react-components/src/styles/components.ts +++ b/packages/react-components/src/styles/components.ts @@ -46,7 +46,6 @@ export default (_theme: ThemeDef): string => ` button.ui--Button { font: var(--font-sans); - 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 f09e279e55..a6e1721f06 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -538,11 +538,13 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr font-style: normal; font-weight: var(--font-weight-label); line-height: 1rem; + margin-bottom: 0.25rem !important; text-transform: var(--text-transform-label); vertical-align: middle; } button { + font-size: var(--font-size-small); font-weight: var(--font-weight-normal); } diff --git a/packages/react-components/src/util/getAddressName.ts b/packages/react-components/src/util/getAddressName.ts index e9eac49078..e6de864ac2 100644 --- a/packages/react-components/src/util/getAddressName.ts +++ b/packages/react-components/src/util/getAddressName.ts @@ -4,7 +4,7 @@ import type { KeyringItemType } from '@polkadot/ui-keyring/types'; import { getAddressMeta } from './getAddressMeta'; -import { toShortAddress } from './toShortAddress'; +// import { toShortAddress } from './toShortAddress'; // isName, isDefault, name export function getAddressName (address: string, type: KeyringItemType | null = null, defaultName?: string): [boolean, boolean, string] { @@ -14,5 +14,5 @@ export function getAddressName (address: string, type: KeyringItemType | null = ? [false, false, meta.name.toUpperCase()] : defaultName ? [false, true, defaultName.toUpperCase()] - : [true, false, toShortAddress(address)]; + : [true, false, address]; // toShortAddress(address)]; } diff --git a/packages/react-components/src/util/toShortAddress.ts b/packages/react-components/src/util/toShortAddress.ts index c6b41f526c..a3089f5a7e 100644 --- a/packages/react-components/src/util/toShortAddress.ts +++ b/packages/react-components/src/util/toShortAddress.ts @@ -6,7 +6,7 @@ import type { AccountId, AccountIndex, Address } from '@polkadot/types/interface export function toShortAddress (_address?: AccountId | AccountIndex | Address | string | null | Uint8Array): string { const address = (_address || '').toString(); - return (address.length > 13) - ? `${address.slice(0, 6)}…${address.slice(-6)}` + return (address.length > 11) + ? `${address.slice(0, 5)}…${address.slice(-5)}` : address; } diff --git a/packages/react-params/src/Holder.tsx b/packages/react-params/src/Holder.tsx index e63cffb2b0..4ddb54a212 100644 --- a/packages/react-params/src/Holder.tsx +++ b/packages/react-params/src/Holder.tsx @@ -53,7 +53,6 @@ export default React.memo(styled(Holder)` } .ui--Param-Address { - font: var(--font-mono); } .ui--Params-Content {