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
2023-01-08 12:53:43 +02:00 · 2023-01-08 12:53:43 +02:00 · f889abb7af
commit f889abb7af
parent 3029f6e648
56 changed files with 174 additions and 173 deletions
--- 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);
--- 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,
--- 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;
      }

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

--- a/packages/apps/src/Menu/NodeInfo.tsx
+++ b/packages/apps/src/Menu/NodeInfo.tsx
@ -33,7 +33,7 @@ function NodeInfo ({ className = '' }: Props): React.ReactElement<Props> {

 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;
--- a/packages/apps/src/TopBar.tsx
+++ b/packages/apps/src/TopBar.tsx
@ -29,7 +29,7 @@ function TopBar ({ className }: Props): React.ReactElement<Props> {

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

--- 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;
--- 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;
--- 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;
--- 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);
      }
    }
  }
--- 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);
    }
  }
--- 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
    />
  );
 }
--- 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<Codec>): React.ReactNode {
      isDisabled
      params={params}
      values={values}
+      withExpander
    />
  );
 }
--- 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
--- 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;
+  }
 `);
--- 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<Props> {

 export default React.memo(styled(ParachainInfo)`
  .version {
-    font-size: 0.85rem;
+    font-size: var(--font-size-small);
    white-space: nowrap;

    > div {
--- 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<Props> {
              {submittedIn && (
                <>
                  <h5>{t<string>('Submitted at')}</h5>
-                  <label>#{formatNumber(submittedIn)}</label>
+                  #{formatNumber(submittedIn)}
                </>
              )}
              {nextAlarm && (
                <>
                  <h5>{t<string>('Next alarm')}</h5>
-                  <label>#{formatNumber(nextAlarm)}</label>
+                  #{formatNumber(nextAlarm)}
                </>
              )}
            </Columar.Column>
@ -445,19 +445,19 @@ function Referendum (props: Props): React.ReactElement<Props> {
              {enactAt && (
                <>
                  <h5>{enactAt.at ? t<string>('Enact at') : t<string>('Enact after')}</h5>
-                  <label>{enactAt.at && '#'}{t<string>('{{blocks}} blocks', { replace: { blocks: formatNumber(enactAt.blocks) } })}</label>
+                  {enactAt.at && '#'}{t<string>('{{blocks}} blocks', { replace: { blocks: formatNumber(enactAt.blocks) } })}
                </>
              )}
              {confirmEnd && (
                <>
                  <h5>{t<string>('Confirm end')}</h5>
-                  <label>#{formatNumber(confirmEnd)}</label>
+                  #{formatNumber(confirmEnd)}
                </>
              )}
              {enactAt?.end && (
                <>
                  <h5>{t<string>('Enact end')}</h5>
-                  <label>#{formatNumber(enactAt.end)}</label>
+                  #{formatNumber(enactAt.end)}
                </>
              )}
            </Columar.Column>
--- 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;
    }
  }

--- a/packages/page-settings/src/General.tsx
+++ b/packages/page-settings/src/General.tsx
@ -66,8 +66,8 @@ function General ({ className = '' }: Props): React.ReactElement<Props> {

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

--- 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;
--- 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 {
--- 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;
  }
 `);
--- 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 {
--- 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<Props> {
+function Call ({ callName, children, className = '', labelHash, labelSignature, mortality, onError, tip, value, withBorder, withExpander, withHash, withSignature }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
  const [{ hash, overrides, params, signature, signatureType, values }, setExtracted] = useState<Extracted>({ hash: null, params: [], signature: null, signatureType: null, values: [] });

@ -100,7 +101,7 @@ function Call ({ callName, children, className = '', labelHash, labelSignature,
  }, [callName, value, withHash, withSignature]);

  return (
-    <div className={`ui--Extrinsic ${className}`}>
+    <div className={`ui--Call ${className}`}>
      <Params
        isDisabled
        onError={onError}
@ -109,9 +110,10 @@ function Call ({ callName, children, className = '', labelHash, labelSignature,
        registry={value.registry}
        values={values}
        withBorder={withBorder}
+        withExpander={withExpander}
      >
        {children}
-        <div className='ui--Extrinsic--toplevel'>
+        <div className='ui--Call--toplevel'>
          {hash && (
            <Static
              className='hash'
@ -157,7 +159,7 @@ export default React.memo(styled(Call)`
    white-space: nowrap;
  }

-  .ui--Extrinsic--toplevel {
+  .ui--Call--toplevel {
    margin-top: 0;

    .ui--Labelled {
--- a/packages/react-components/src/CallExpander.tsx
+++ b/packages/react-components/src/CallExpander.tsx
@ -60,6 +60,7 @@ function CallExpander ({ children, className = '', isHeader, labelHash, labelSig
          tip={tip}
          value={value}
          withBorder={withBorder}
+          withExpander
          withHash={withHash}
          withSignature={withSignature}
        />
--- 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);
--- 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;
      }
    }

--- 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<Props> {
+function EventDisplay ({ children, className = '', eventName, value, withExpander }: Props): React.ReactElement<Props> {
  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 && (
          <>
--- 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;
      }
    }
--- 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<Props> {
+  const shortAddr = useMemo(
+    () => toShortAddress(address),
+    [address]
+  );
+
  return (
    <div className={`ui--KeyPair ${className}`}>
      <IdentityIcon
@ -26,7 +32,7 @@ function KeyPair ({ address, className = '' }: Props): React.ReactElement<Props>
        <AccountName value={address} />
      </div>
      <div className='address'>
-        {address}
+        {shortAddr}
      </div>
    </div>
  );
@ -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 {
--- 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%);
--- 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;
--- 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
        <tbody>
          {formatted.map(({ name, value }, i) => (
            <tr key={i}>
-              <td>{name}</td>
+              <td><label>{name}</label></td>
              <td>{value}</td>
            </tr>
          ))}
@ -85,7 +85,7 @@ function DecodedInspect ({ className, hex, inspect, label }: Props): React.React
              className='isLink'
              key='hex'
            >
-              <td>{t<string>('link')}</td>
+              <td><label>{t<string>('link')}</label></td>
              <td>
                <a
                  href={link}
@ -116,10 +116,13 @@ export default React.memo(styled(DecodedInspect)`
        }

        td:first-child {
-          color: var(--color-label);
-          padding: 0 0.5em 0 1rem;
          text-align: right;
+          vertical-align: middle;
          white-space: nowrap;
+
+          label {
+            padding: 0 0.5rem 0 1.25rem;
+          }
        }

        &:not(.isLink) td:last-child {
--- a/packages/react-components/src/Labelled.tsx
+++ b/packages/react-components/src/Labelled.tsx
@ -84,7 +84,7 @@ export default React.memo(styled(Labelled)`
        .labelExtra {
          position: absolute;
          text-align: left;
-          top: 0.5rem;
+          top: 0.75rem;
          z-index: 1;
        }

@ -108,10 +108,12 @@ export default React.memo(styled(Labelled)`
      }

      .labelExtra {
-        color: rgba(78, 78, 78, .85);
+        color: var(--color-label);
+        font-size: var(--font-size-label);
        font-weight: var(--font-weight-normal);
        right: 1.75rem;
        text-align: right;
+        text-transform: var(--text-transform-label);
      }

      > .ui--Labelled-content {
--- 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;
  }
--- 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);
 `);
--- 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;
--- 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;
      }
    }
  }
--- 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;
    }
  }

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

--- 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
-              ? (
-                <h1>
-                  <Icon
-                    className='highlight--color'
-                    icon='dot-circle'
-                  />
-                  {label}
-                </h1>
-              )
+              ? <h1>{label}</h1>
              : 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;
      }
    }

--- 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;
--- 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;
--- 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 {
--- 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 {
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@ -387,6 +387,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ 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<Props & ThemeProps>(({ 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<Props & ThemeProps>(({ 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 {
--- 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;
+          }
        }
      }
    }
--- 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<Props> {
+function Holder ({ children, className = '', withBorder, withExpander, withPadding }: Props): React.ReactElement<Props> {
  return (
-    <div className={`ui--Params ${className}${withBorder ? ' withBorder' : ''}${withPadding ? ' withPadding' : ''}`}>
+    <div className={`ui--Params ${className}${withBorder ? ' withBorder' : ''}${withPadding ? ' withPadding' : ''}${withExpander ? ' withExpander' : ''}`}>
      {children}
    </div>
  );
@ -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;
    }
  }

--- 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<Props, State> {
  }

  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<Props, State> {
      <Holder
        className={className}
        withBorder={withBorder}
+        withExpander={withExpander}
      >
        <ErrorBoundary onError={this.onRenderError}>
          <div className='ui--Params-Content'>
--- 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;
  }
 `);
--- 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;
    }
  }