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
2023-01-12 09:36:21 +02:00 · 2023-01-12 09:36:21 +02:00 · ff328328ac
commit ff328328ac
parent b99d329688
36 changed files with 130 additions and 124 deletions
--- 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;
+      }
    </style>
  </head>
  <body>
--- 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;
-  }
 `);
--- 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;
  }
 `);
--- 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;

--- 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;
  }

--- 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;

--- 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);
  }
--- 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
          <Modal.Columns hint={t<string>('The transferred balance will be subtracted (along with fees) from the sender account.')}>
            <InputAddress
              defaultValue={propSenderId}
-              help={t<string>('The account you will send funds from.')}
              isDisabled={!!propSenderId}
              label={t<string>('send from account')}
              labelExtra={
@ -121,7 +120,6 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
          <Modal.Columns hint={t<string>('The beneficiary will have access to the transferred fees when the transaction is included in a block.')}>
            <InputAddress
              defaultValue={propRecipientId}
-              help={t<string>('Select a contact or paste the address you want to send funds to.')}
              isDisabled={!!propRecipientId}
              label={t<string>('send to address')}
              labelExtra={
@ -143,7 +141,6 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
                <InputBalance
                  autoFocus
                  defaultValue={maxTransfer}
-                  help={t<string>('The full account balance to be transferred, minus the transaction fees')}
                  isDisabled
                  key={maxTransfer?.toString()}
                  label={t<string>('transferrable minus fees')}
@ -153,7 +150,6 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
                <>
                  <InputBalance
                    autoFocus
-                    help={t<string>('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<string>('amount')}
@ -162,7 +158,6 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
                  />
                  <InputBalance
                    defaultValue={api.consts.balances?.existentialDeposit}
-                    help={t<string>('The minimum amount that an account should have to be deemed active')}
                    isDisabled
                    label={t<string>('existential deposit')}
                  />
--- 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 (
-      <td className={`${className} all`}>
-        <div className='shortHash'>{textHash.slice(0, 8)}…{textHash.slice(-8)}</div>
+      <td className={`${className} all hash`}>
+        <div className='shortHash'>{textHash}</div>
      </td>
    );
  }
@ -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;
    }
--- 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<string>('Non-voters ({{count}})', { replace: { count: formatNumber(nonBacked.length) } })}
        />
      </td>
-      <td className='start together hash media--1500'>{paraInfo.headHex}</td>
+      <td className='start together hash media--1500'>
+        <div className='shortHash'>{paraInfo.headHex}</div>
+      </td>
      <td className='start'>
        {paraInfo.updateAt && bestNumber && paraInfo.lifecycle?.isParachain
          ? (
--- 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<HeadData>, Option<BlockNumber>, Option<PolkadotRuntimeParachainsParasParaLifecycle>, Vec<Codec>, Vec<Codec>, Vec<Codec>, Vec<Codec>, Option<BlockNumber>, Option<CandidatePendingAvailability>, Option<PolkadotRuntimeCommonParasRegistrarParaInfo>, Option<ITuple<[AccountId, BalanceOf]>>[]];

 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)
--- 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
      <Table.Column.Id value={id} />
      <td className='badge'><ParaLink id={id} /></td>
      <td className='address media--2000'>{manager && <AddressSmall value={manager} />}</td>
-      <td className='start together hash media--1500'>{headHex}</td>
+      <td className='start together hash media--1500'>
+        <div className='shortHash'>{headHex}</div>
+      </td>
      <td className='start'>
        <Lifecycle
          lifecycle={lifecycle}
--- a/packages/page-parachains/src/Parathreads/useThreadInfo.ts
+++ b/packages/page-parachains/src/Parathreads/useThreadInfo.ts
@ -7,8 +7,6 @@ import type { PolkadotRuntimeCommonParasRegistrarParaInfo, PolkadotRuntimeParach

 import { createNamedHook, useApi, useCallMulti } from '@polkadot/react-hooks';

-import { sliceHex } from '../util';
-
 interface Result {
  headHex: string | null;
  lifecycle: PolkadotRuntimeParachainsParasParaLifecycle | null;
@ -23,9 +21,9 @@ const OPT_MULTI = {
  },
  transform: ([optHead, optGenesis, optLifecycle, optInfo]: [Option<HeadData>, Option<PolkadotRuntimeParachainsParasParaGenesisArgs>, Option<PolkadotRuntimeParachainsParasParaLifecycle>, Option<PolkadotRuntimeCommonParasRegistrarParaInfo>]): 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
--- 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<Props> | null {
            label={t<string>('amount')}
            onChange={setAmount}
          />
-          {destApi
-            ? destApi.consts.balances
-              ? (
-                <>
-                  <InputBalance
-                    defaultValue={destApi.consts.balances.existentialDeposit}
-                    isDisabled
-                    label={t<string>('destination existential deposit')}
-                  />
-                </>
-              )
-              : null
-            : (
-              <Spinner
-                label={t<string>('Retrieving destination chain fees')}
-                variant='appPadded'
-              />
-            )
-          }
+          <InputBalance
+            defaultValue={destApi?.consts.balances?.existentialDeposit}
+            isDisabled
+            isLoading={!destApi}
+            label={t<string>('destination existential deposit')}
+          />
        </Modal.Columns>
      </Modal.Content>
      <Modal.Actions>
--- 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<Props> {
-  const shortHash = useMemo(
-    () => `${value.slice(0, 10)}…${value.slice(-8)}`,
-    [value]
-  );
-
+function Hash ({ className = '', value }: Props): React.ReactElement<Props> {
  return (
-    <td className={className}>
-      <div className='shortHash'>{shortHash}</div>
+    <td className={`${className} hash`}>
+      <div className='shortHash'>{value}</div>
      <CopyButton value={value} />
    </td>
  );
@ -36,8 +31,6 @@ export default React.memo(styled(Hash)`
  }

  .shortHash {
-    font: var(--font-mono);
-
    + div {
      margin-left: 0.5rem;
    }
--- 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<Props> {
  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
            />
          )
-          : <div className='shortHash'>{shortHash}</div>
+          : <div className='shortHash'>{proposalHash}</div>
        }
      </td>
      <Deposits
--- a/packages/page-referenda/src/Referenda/Referendum.tsx
+++ b/packages/page-referenda/src/Referenda/Referendum.tsx
@ -491,6 +491,11 @@ export default React.memo(styled(Referendum)`
  }

  .shortHash {
-    font: var(--font-mono);
+    max-width: var(--width-shorthash);
+    min-width: 3em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: var(--width-shorthash);
  }
 `);
--- a/packages/react-components/src/AccountIndex.tsx
+++ b/packages/react-components/src/AccountIndex.tsx
@ -5,7 +5,6 @@ import type { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import type { AccountId, Address } from '@polkadot/types/interfaces';

 import React, { useMemo } from 'react';
-import styled from 'styled-components';

 import { useDeriveAccountInfo, useSystemApi } from '@polkadot/react-hooks';

@ -43,8 +42,4 @@ function AccountIndex ({ children, className = '', defaultValue, label, value }:
  );
 }

-export default React.memo(styled(AccountIndex)`
-  .account-index {
-    font: var(--font-mono);
-  }
-`);
+export default React.memo(AccountIndex);
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@ -249,7 +249,9 @@ export default React.memo(styled(AccountName)`
      }

      &.isAddress {
-        font: var(--font-mono);
+        display: inline-block;
+        min-width: var(--width-shortaddr);
+        max-width: var(--width-shortaddr);
        opacity: var(--opacity-light);
        text-transform: none;
      }
--- a/packages/react-components/src/AddressMini.tsx
+++ b/packages/react-components/src/AddressMini.tsx
@ -13,7 +13,6 @@ import BalanceDisplay from './Balance';
 import BondedDisplay from './Bonded';
 import IdentityIcon from './IdentityIcon';
 import LockedVote from './LockedVote';
-import { toShortAddress } from './util';

 interface Props {
  balance?: BN | BN[];
@ -73,7 +72,7 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH
                  {nameExtra}
                </AccountName>
              )
-              : toShortAddress(value)
+              : <span className='shortAddress'>{value}</span>
            }
          </span>
        )}
@ -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);
+      }
    }
  }

--- 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 (
    <Row
-      address={fullLength ? address : toShortAddress(address)}
+      address={address}
      buttons={buttons}
      className={className}
      defaultName={defaultName}
@ -51,6 +50,7 @@ function AddressRow ({ buttons, children, className, defaultName, fullLength = f
      isEditableName={isEditableName}
      isEditableTags
      isInline={isInline}
+      isShortAddr={!fullLength}
      name={name}
      onChangeName={setName}
      onChangeTags={setTags}
--- a/packages/react-components/src/AddressSmall.tsx
+++ b/packages/react-components/src/AddressSmall.tsx
@ -9,7 +9,6 @@ import styled from 'styled-components';
 import AccountName from './AccountName';
 import IdentityIcon from './IdentityIcon';
 import ParentAccount from './ParentAccount';
-import { toShortAddress } from './util';

 interface Props {
  children?: React.ReactNode;
@ -52,7 +51,7 @@ function AddressSmall ({ children, className = '', defaultName, onClickName, ove
            className='shortAddress'
            data-testid='short-address'
          >
-            {toShortAddress(value)}
+            {value}
          </div>
        )}
      </span>
@ -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;
    }
  }

--- 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<Props> {
+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<Props> {
  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={
--- 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<Props> {
-  const shortAddr = useMemo(
-    () => toShortAddress(address),
-    [address]
-  );
-
  return (
    <div className={`ui--KeyPair ${className}`}>
      <IdentityIcon
@ -32,7 +26,7 @@ function KeyPair ({ address, className = '' }: Props): React.ReactElement<Props>
        <AccountName value={address} />
      </div>
      <div className='address'>
-        {shortAddr}
+        {address}
      </div>
    </div>
  );
@ -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 {
--- 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<Props> {
+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<Props> {
  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}
--- 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<Props> {
+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<Props> {
  const { t } = useTranslation();
  const { api } = useApi();
  const [si, setSi] = useState<SiDef | null>(() =>
@ -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}
--- 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;
--- 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<RowProps> {
+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<RowProps> {
  const [isEditingName, toggleIsEditingName] = useToggle();
  const [isEditingTags, toggleIsEditingTags] = useToggle();

@ -220,7 +227,7 @@ function Row ({ address, buttons, children, className = '', defaultName, details
              )
          )}
          {address && (
-            <div className='ui--Row-address'>
+            <div className={`ui--Row-address ${isShortAddr ? 'shortAddr' : ''}`}>
              {address}
            </div>
          )}
--- 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
              ? <h1>{label}</h1>
-              : isEmpty
-                ? ''
-                : label
+              : !isEmpty && label && <label>{label}</label>
            }
          </th>
        )}
@ -75,6 +73,10 @@ export default React.memo(styled(Head)`
      }
    }

+    > label {
+      margin: 0 !important;
+    }
+
    &.address {
      padding-left: 3rem;
      text-align: left;
--- 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 {
--- 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;
--- 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 {
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@ -538,11 +538,13 @@ export default createGlobalStyle<Props & ThemeProps>(({ 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);
  }

--- 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)];
 }
--- 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;
 }
--- 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 {