Media & highlight name adjustments (#3482)

* Media & highlight name adjustments * 2000 sizing * Restore progress inner
2020-08-23 12:11:12 +02:00 · 2020-08-23 12:11:12 +02:00 · 7247cec8e5
commit 7247cec8e5
parent 2d5b2de3ac
43 changed files with 110 additions and 201 deletions
--- a/packages/apps/src/Endpoints/Network.tsx
+++ b/packages/apps/src/Endpoints/Network.tsx
@ -29,7 +29,7 @@ function NetworkDisplay ({ apiUrl, className = '', setApiUrl, value: { icon, isC
  );

  return (
-    <div className={`${className}${isSelected ? ' isSelected ui--highlight--border' : ''}`}>
+    <div className={`${className}${isSelected ? ' isSelected highlight--border' : ''}`}>
      <div
        className={`endpointSection${isChild ? ' isChild' : ''}`}
        onClick={_selectFirst}
--- a/packages/apps/src/Menu/ChainInfo.tsx
+++ b/packages/apps/src/Menu/ChainInfo.tsx
@ -28,11 +28,11 @@ function ChainInfo ({ className }: Props): React.ReactElement<Props> {
  return (
    <div className={className}>
      <div
-        className={`apps--SideBar-logo-inner${canToggle ? ' isClickable  ui--highlight--hover-color' : ''}`}
+        className={`apps--SideBar-logo-inner${canToggle ? ' isClickable  highlight--hover-color' : ''}`}
        onClick={toggleEndpoints}
      >
        <ChainImg />
-        <div className='info ui--media-1000'>
+        <div className='info media--1000'>
          <Chain className='chain' />
          {runtimeVersion && (
            <div className='runtimeVersion'>{t<string>('version {{version}}', { replace: { version: runtimeVersion.specVersion.toNumber() } })}</div>
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/packages/apps/src/Menu/Grouping.tsx
@ -33,7 +33,7 @@ function Grouping ({ className = '', name, routes }: Props): React.ReactElement<
        <span>{name}</span>
        <Icon icon='caret-down' />
      </div>
-      <ul className='groupMenu ui--highlight--bg-light ui--highlight--before'>
+      <ul className='groupMenu highlight--bg-light highlight--before'>
        {routes.map((route): React.ReactNode => (
          <Item
            key={route.name}
--- a/packages/apps/src/Menu/Item.tsx
+++ b/packages/apps/src/Menu/Item.tsx
@ -21,7 +21,7 @@ function Item ({ className = '', route: { Modal, href, icon, name, text, useCoun
  const count = useCounter();

  return (
-    <li className={`${className}${count ? ' withCounter' : ''} ui--highlight--hover-color`}>
+    <li className={`${className}${count ? ' withCounter' : ''} highlight--hover-color`}>
      <a
        href={Modal ? undefined : (href || `#/${name}`)}
        onClick={Modal ? toggleModal : undefined}
--- a/packages/apps/src/Menu/NodeInfo.tsx
+++ b/packages/apps/src/Menu/NodeInfo.tsx
@ -18,7 +18,7 @@ function NodeInfo ({ className = '' }: Props): React.ReactElement<Props> {
  const { api, isApiReady } = useApi();

  return (
-    <div className={`${className} ui--media-1400`}>
+    <div className={`${className} media--1400`}>
      {isApiReady && (
        <div>
          <NodeName />&nbsp;
--- a/packages/apps/src/Menu/index.tsx
+++ b/packages/apps/src/Menu/index.tsx
@ -124,7 +124,7 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
  const isLoading = !apiProps.isApiReady || !apiProps.isApiConnected;

  return (
-    <div className={`${className}${isLoading ? ' isLoading' : ''} ui--highlight--bg-light ui--highlight--border`}>
+    <div className={`${className}${isLoading ? ' isLoading' : ''} highlight--bg-light highlight--border`}>
      <div className='menuSection'>
        <ChainInfo />
        {activeRoute && (
@ -143,7 +143,7 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
          ))}
        </ul>
      </div>
-      <div className='menuSection ui--media-1200'>
+      <div className='menuSection media--1200'>
        <ul className='menuItems'>
          {externalRef.current.map((route): React.ReactNode => (
            <Item
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@ -383,7 +383,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
          />
        )}
      </td>
-      <td className='address ui--media-1400'>
+      <td className='address media--1400'>
        {meta.parentAddress && (
          <AddressMini value={meta.parentAddress} />
        )}
@ -396,7 +396,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
          <Tags value={tags} />
        </div>
      </td>
-      <td className='number ui--media-1500'>
+      <td className='number media--1500'>
        {balancesAll?.accountNonce.gt(BN_ZERO) && formatNumber(balancesAll.accountNonce)}
      </td>
      <td className='number'>
@ -576,7 +576,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
          </Menu>
        </Popup>
      </td>
-      <td className='mini ui--media-1400'>
+      <td className='mini media--1400'>
        <LinkExternal
          className='ui--AddressCard-exporer-link'
          data={address}
--- a/packages/page-accounts/src/Accounts/index.tsx
+++ b/packages/page-accounts/src/Accounts/index.tsx
@ -86,13 +86,13 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen

  const headerRef = useRef([
    [t('accounts'), 'start', 3],
-    [t('parent'), 'address ui--media-1400'],
+    [t('parent'), 'address media--1400'],
    [t('type')],
    [t('tags'), 'start'],
-    [t('transactions'), 'ui--media-1500'],
+    [t('transactions'), 'media--1500'],
    [t('balances')],
    [],
-    [undefined, 'mini ui--media-1400']
+    [undefined, 'mini media--1400']
  ]);

  useEffect((): void => {
@ -145,14 +145,14 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
  const footer = useMemo(() => (
    <tr>
      <td colSpan={3} />
-      <td className='ui--media-1400' />
+      <td className='media--1400' />
      <td colSpan={2} />
-      <td className='ui--media-1500' />
+      <td className='media--1500' />
      <td className='number'>
        {balanceTotal && <FormatBalance value={balanceTotal} />}
      </td>
      <td />
-      <td className='ui--media-1400' />
+      <td className='media--1400' />
    </tr>
  ), [balanceTotal]);

--- a/packages/page-accounts/src/Contacts/Address.tsx
+++ b/packages/page-accounts/src/Contacts/Address.tsx
@ -183,7 +183,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
          <Tags value={tags} />
        </div>
      </td>
-      <td className='number ui--media-1500'>
+      <td className='number media--1500'>
        {balancesAll?.accountNonce.gt(BN_ZERO) && formatNumber(balancesAll.accountNonce)}
      </td>
      <td className='number'>
@ -233,7 +233,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
          </Menu>
        </Popup>
      </td>
-      <td className='mini ui--media-1400'>
+      <td className='mini media--1400'>
        <LinkExternal
          className='ui--AddressCard-exporer-link'
          data={address}
--- a/packages/page-accounts/src/Contacts/index.tsx
+++ b/packages/page-accounts/src/Contacts/index.tsx
@ -29,10 +29,10 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
  const headerRef = useRef([
    [t('contacts'), 'start', 2],
    [t('tags'), 'start'],
-    [t('transactions'), 'ui--media-1500'],
+    [t('transactions'), 'media--1500'],
    [t('balances')],
    [],
-    [undefined, 'mini ui--media-1400']
+    [undefined, 'mini media--1400']
  ]);

  useEffect((): void => {
--- a/packages/page-democracy/src/Overview/DispatchEntry.tsx
+++ b/packages/page-democracy/src/Overview/DispatchEntry.tsx
@ -45,7 +45,7 @@ function DispatchEntry ({ value: { at, image, imageHash, index } }: Props): Reac
          />
        )}
      </td>
-      <td className='mini ui--media-1000'>
+      <td className='mini media--1000'>
        <LinkExternal
          data={index}
          type='referendum'
--- a/packages/page-democracy/src/Overview/DispatchQueue.tsx
+++ b/packages/page-democracy/src/Overview/DispatchQueue.tsx
@ -24,7 +24,7 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
    [t('dispatch queue'), 'start', 2],
    [t('enact')],
    [],
-    [undefined, 'mini ui--media-1000']
+    [undefined, 'mini media--1000']
  ]);

  return (
--- a/packages/page-democracy/src/Overview/Proposal.tsx
+++ b/packages/page-democracy/src/Overview/Proposal.tsx
@ -34,7 +34,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
      <td className='address'>
        <AddressMini value={proposer} />
      </td>
-      <td className='number together ui--media-1200'>
+      <td className='number together media--1200'>
        <FormatBalance value={balance} />
      </td>
      <td>
@ -64,7 +64,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
          )}
        </Button.Group>
      </td>
-      <td className='mini ui--media-1000'>
+      <td className='mini media--1000'>
        <LinkExternal
          data={index}
          type='proposal'
--- a/packages/page-democracy/src/Overview/Proposals.tsx
+++ b/packages/page-democracy/src/Overview/Proposals.tsx
@ -23,9 +23,9 @@ function Proposals ({ className }: Props): React.ReactElement<Props> {
  const headerRef = useRef([
    [t('proposals'), 'start', 2],
    [t('proposer'), 'address'],
-    [t('locked'), 'ui--media-1200'],
+    [t('locked'), 'media--1200'],
    [undefined, undefined, 2],
-    [undefined, 'mini ui--media-1000']
+    [undefined, 'mini media--1000']
  ]);

  return (
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@ -84,15 +84,15 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
        imageHash={imageHash}
        proposal={image?.proposal}
      />
-      <td className='number together ui--media-1200'>
+      <td className='number together media--1200'>
        <BlockToTime blocks={remainBlock} />
        {t<string>('{{blocks}} blocks', { replace: { blocks: formatNumber(remainBlock) } })}
      </td>
-      <td className='number together ui--media-1400'>
+      <td className='number together media--1400'>
        <BlockToTime blocks={enactBlock.sub(bestNumber)} />
        #{formatNumber(enactBlock)}
      </td>
-      <td className='number together ui--media-1400'>
+      <td className='number together media--1400'>
        {percentages && (
          <>
            <div>{percentages.turnout}</div>
@ -148,7 +148,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
          icon='asterisk'
        />
      </td>
-      <td className='mini ui--media-1000'>
+      <td className='mini media--1000'>
        <LinkExternal
          data={index}
          type='referendum'
--- a/packages/page-democracy/src/Overview/Referendums.tsx
+++ b/packages/page-democracy/src/Overview/Referendums.tsx
@ -20,14 +20,14 @@ function Referendums ({ className = '', referendums }: Props): React.ReactElemen

  const headerRef = useRef([
    [t('referenda'), 'start', 2],
-    [t('remaining'), 'ui--media-1200'],
-    [t('activate'), 'ui--media-1400'],
-    [t('turnout'), 'ui--media-1400'],
+    [t('remaining'), 'media--1200'],
+    [t('activate'), 'media--1400'],
+    [t('turnout'), 'media--1400'],
    [t('aye')],
    [t('nay')],
    [undefined, undefined, 2],
    [undefined, 'badge'],
-    [undefined, 'mini ui--media-1000']
+    [undefined, 'mini media--1000']
  ]);

  return (
--- a/packages/page-democracy/src/Overview/Summary.tsx
+++ b/packages/page-democracy/src/Overview/Summary.tsx
@ -41,7 +41,7 @@ function Summary ({ referendumCount }: Props): React.ReactElement<Props> {
        </CardSummary>
      </section>
      {bestNumber && (
-        <section className='ui--media-medium'>
+        <section className='media--1100'>
          <CardSummary
            label={t<string>('launch period')}
            progress={{
--- a/packages/page-explorer/src/NodeInfo/Summary.tsx
+++ b/packages/page-explorer/src/NodeInfo/Summary.tsx
@ -43,13 +43,13 @@ function Summary ({ info: { extrinsics, health, peers } = EMPTY_INFO, nextRefres
        {health && (
          <>
            <CardSummary
-              className='ui--media-small'
+              className='media--800'
              label={t<string>('total peers')}
            >
              {formatNumber(health.peers)}
            </CardSummary>
            <CardSummary
-              className='ui--media-small'
+              className='media--800'
              label={t<string>('syncing')}
            >
              {health.isSyncing.valueOf()
@ -61,7 +61,7 @@ function Summary ({ info: { extrinsics, health, peers } = EMPTY_INFO, nextRefres
        )}
      </section>
      {extrinsics && (extrinsics.length > 0) && (
-        <section className='ui--media-large'>
+        <section className='media--1200'>
          <CardSummary label={t<string>('queued tx')}>
            {extrinsics.length}
          </CardSummary>
--- a/packages/page-explorer/src/Summary.tsx
+++ b/packages/page-explorer/src/Summary.tsx
@ -22,21 +22,21 @@ function Summary (): React.ReactElement {
          <TimeNow />
        </CardSummary>
        <CardSummary
-          className='ui--media-small'
+          className='media--800'
          label={t<string>('target')}
        >
          <BlockToTime blocks={BN_ONE} />
        </CardSummary>
        {api.query.balances && (
          <CardSummary
-            className='ui--media-small'
+            className='media--800'
            label={t<string>('total issuance')}
          >
            <TotalIssuance />
          </CardSummary>
        )}
      </section>
-      <section className='ui--media-large'>
+      <section className='media--1200'>
        <SummarySession withEra={false} />
      </section>
      <section>
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@ -76,10 +76,10 @@ function Parachain ({ className = '', parachain: { didUpdate, id, info, pendingS
        <ParachainInfo info={info} />
      </td>
      <td className='start together headhex'>{headHex}</td>
-      <td className='number pending-swap-id ui--media-small'>
+      <td className='number pending-swap-id media--800'>
        {pendingSwapId?.toString()}
      </td>
-      <td className='number ui--media-small'>
+      <td className='number media--800'>
        {info?.scheduling?.toString() || t<string>('<unknown>')}
      </td>
      <td className='button'>
--- a/packages/page-parachains/src/Overview/Summary.tsx
+++ b/packages/page-parachains/src/Overview/Summary.tsx
@ -48,7 +48,7 @@ function Summary ({ nextFreeId, parachainCount, proposalCount }: Props): React.R
      </section>
      <section>
        <CardSummary
-          className='ui--media-small'
+          className='media--800'
          label={t<string>('best block')}
        >
          <BestNumber />
--- a/packages/page-parachains/src/ParachainInfo.tsx
+++ b/packages/page-parachains/src/ParachainInfo.tsx
@ -28,7 +28,7 @@ function ParachainInfo ({ children, className = '', info, isBig }: Props): React
          ? <img src={info.icon} />
          : (
            <Icon
-              className='ui--highlight--bg'
+              className='highlight--bg'
              icon='link'
            />
          )
--- a/packages/page-society/src/Overview/Summary.tsx
+++ b/packages/page-society/src/Overview/Summary.tsx
@ -32,7 +32,7 @@ function Summary ({ className = '', info }: Props): React.ReactElement<Props> {

  return (
    <SummaryBox className={className}>
-      <section className='ui--media-medium'>
+      <section className='media--1100'>
        {info && members && (
          <CardSummary label={t<string>('members')}>
            {members.length}&nbsp;/&nbsp;{info.maxMembers.toString()}
@ -51,7 +51,7 @@ function Summary ({ className = '', info }: Props): React.ReactElement<Props> {
              }}
            />
          </section>
-          <section className='ui--media-large'>
+          <section className='media--1200'>
            <CardSummary
              label={t<string>('challenge')}
              progress={{
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@ -180,7 +180,7 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
      <td className='address'>
        <AddressMini value={controllerId} />
      </td>
-      <td className='number ui--media-1200'>{destination}</td>
+      <td className='number media--1200'>{destination}</td>
      <td className='number'>
        <StakingBonded stakingInfo={stakingAccount} />
        <StakingUnbonding stakingInfo={stakingAccount} />
--- a/packages/page-staking/src/Actions/index.tsx
+++ b/packages/page-staking/src/Actions/index.tsx
@ -59,7 +59,7 @@ function Actions ({ className = '', isInElection, ownStashes, targets }: Props):
  const headerRef = useRef([
    [t('stashes'), 'start', 2],
    [t('controller'), 'address'],
-    [t('rewards'), 'number ui--media-1200'],
+    [t('rewards'), 'number media--1200'],
    [t('bonded'), 'number'],
    [undefined, undefined, 2]
  ]);
--- a/packages/page-staking/src/Overview/Address/index.tsx
+++ b/packages/page-staking/src/Overview/Address/index.tsx
@ -142,7 +142,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
          />
        )
      }
-      <td className='number ui--media-1100'>
+      <td className='number media--1100'>
        {stakeOwn?.gtn(0) && (
          <FormatBalance value={stakeOwn} />
        )}
@ -168,7 +168,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
          />
        )}
      </td>
-      <td className='mini ui--media-1200'>
+      <td className='mini media--1200'>
        <LinkExternal
          data={address}
          type={isMain ? 'validator' : 'intention'}
--- a/packages/page-staking/src/Overview/CurrentList.tsx
+++ b/packages/page-staking/src/Overview/CurrentList.tsx
@ -124,12 +124,12 @@ function CurrentList ({ favorites, hasQueries, isIntentions, next, stakingOvervi
  const headerActiveRef = useRef([
    [t('validators'), 'start', 2],
    [t('other stake')],
-    [t('own stake'), 'ui--media-1100'],
+    [t('own stake'), 'media--1100'],
    [t('commission')],
    [t('points')],
    [t('last #')],
    [],
-    [undefined, 'ui--media-1200']
+    [undefined, 'media--1200']
  ]);

  const _renderRows = useCallback(
--- a/packages/page-staking/src/Overview/Summary.tsx
+++ b/packages/page-staking/src/Overview/Summary.tsx
@ -34,7 +34,7 @@ function Summary ({ className = '', isVisible, next, nominators, stakingOverview
        )}
        {!!next?.length && (
          <CardSummary
-            className='ui--media-1000'
+            className='media--1000'
            label={t<string>('waiting')}
          >
            {next.length}
@ -42,7 +42,7 @@ function Summary ({ className = '', isVisible, next, nominators, stakingOverview
        )}
        {!!nominators?.length && (
          <CardSummary
-            className='ui--media-1100'
+            className='media--1100'
            label={t<string>('nominators')}
          >
            {nominators.length}
--- a/packages/page-staking/src/Targets/Summary.tsx
+++ b/packages/page-staking/src/Targets/Summary.tsx
@ -50,7 +50,7 @@ function Summary ({ avgStaked, lastReward, lowStaked, numNominators, numValidato

  return (
    <SummaryBox>
-      <section className='ui--media-small'>
+      <section className='media--800'>
        {totalIssuance && (
          <CardSummary
            label={`${totalStaked?.gtn(0) ? `${t<string>('total staked')} / ` : ''}${t<string>('total issuance')}`}
@ -77,7 +77,7 @@ function Summary ({ avgStaked, lastReward, lowStaked, numNominators, numValidato
      </section>
      {avgStaked && lowStaked && (
        <CardSummary
-          className='ui--media-1000'
+          className='media--1000'
          label={`${t<string>('lowest / avg staked')}`}
          progress={progressAvg}
        >
@ -95,7 +95,7 @@ function Summary ({ avgStaked, lastReward, lowStaked, numNominators, numValidato
      )}
      {numValidators && numNominators && (
        <CardSummary
-          className='ui--media-1600'
+          className='media--1600'
          label={`${t<string>('nominators')} / ${t<string>('validators')}`}
        >
          {numNominators}&nbsp;/&nbsp;{numValidators}
--- a/packages/page-staking/src/Targets/Validator.tsx
+++ b/packages/page-staking/src/Targets/Validator.tsx
@ -137,7 +137,7 @@ function Validator ({ allSlashes, canSelect, filterName, info, isNominated, isSe
      <td className='address all'>
        <AddressSmall value={accountId} />
      </td>
-      <td className='number ui--media-1200'>{numNominators || ''}</td>
+      <td className='number media--1200'>{numNominators || ''}</td>
      <td className='number'>
        {
          isCommission
@ -147,7 +147,7 @@ function Validator ({ allSlashes, canSelect, filterName, info, isNominated, isSe
      </td>
      <td className='number together'>{!bondTotal.isZero() && <FormatBalance value={bondTotal} />}</td>
      <td className='number together'>{!bondOwn.isZero() && <FormatBalance value={bondOwn} />}</td>
-      <td className='number together ui--media-1600'>{!bondOther.isZero() && <FormatBalance value={bondOther} />}</td>
+      <td className='number together media--1600'>{!bondOther.isZero() && <FormatBalance value={bondOther} />}</td>
      <td className='number together'>{!rewardPayout.isZero() && <FormatBalance value={rewardPayout} />}</td>
      <td>
        {(canSelect || isSelected) && (
--- a/packages/page-staking/src/Targets/index.tsx
+++ b/packages/page-staking/src/Targets/index.tsx
@ -35,8 +35,8 @@ interface SortState {
 }

 const CLASSES: Record<string, string> = {
-  rankBondOther: 'ui--media-1600',
-  rankNumNominators: 'ui--media-1200'
+  rankBondOther: 'media--1600',
+  rankNumNominators: 'media--1200'
 };

 function sort (sortBy: TargetSortBy, sortFromMax: boolean, validators: ValidatorInfo[]): number[] {
@ -136,7 +136,7 @@ function Targets ({ className = '', isInElection, ownStashes, targets: { avgStak
    [t('validators'), 'start', 3],
    ...['rankNumNominators', 'rankComm', 'rankBondTotal', 'rankBondOwn', 'rankBondOther', 'rankOverall'].map((header) => [
      <>{labels[header]}<Icon icon={sortBy === header ? (sortFromMax ? 'chevron-down' : 'chevron-up') : 'minus'} /></>,
-      `${sorted ? `isClickable ${sortBy === header ? 'ui--highlight--border' : ''} number` : 'number'} ${CLASSES[header] || ''}`,
+      `${sorted ? `isClickable ${sortBy === header ? 'highlight--border' : ''} number` : 'number'} ${CLASSES[header] || ''}`,
      1,
      (): void => _sort(header as 'rankComm')
    ]),
--- a/packages/page-treasury/src/Overview/Tip.tsx
+++ b/packages/page-treasury/src/Overview/Tip.tsx
@ -147,7 +147,7 @@ function Tip ({ bestNumber, className = '', hash, isMember, members, tip }: Prop
          )
        }
      </td>
-      <td className='badge ui--media-1700'>
+      <td className='badge media--1700'>
        {isMember && (
          <Icon
            color={isTipper ? 'green' : 'gray'}
@ -155,7 +155,7 @@ function Tip ({ bestNumber, className = '', hash, isMember, members, tip }: Prop
          />
        )}
      </td>
-      <td className='mini ui--media-1700'>
+      <td className='mini media--1700'>
        <LinkExternal
          data={hash}
          type='tip'
--- a/packages/page-treasury/src/Overview/TipEndorse.tsx
+++ b/packages/page-treasury/src/Overview/TipEndorse.tsx
@ -41,7 +41,7 @@ function TipEndorse ({ hash, isMember, isTipped, median, members }: Props): Reac
      />
      <TxButton
        accountId={defaultId}
-        className='ui--media-1600'
+        className='media--1600'
        icon='fighter-jet'
        isDisabled={!isMember || !isTipped}
        isIcon
--- a/packages/page-treasury/src/Overview/Tips.tsx
+++ b/packages/page-treasury/src/Overview/Tips.tsx
@ -51,8 +51,8 @@ function Tips ({ className = '', hashes, isMember, members }: Props): React.Reac
    [t('reason'), 'start'],
    [],
    [],
-    [undefined, 'badge ui--media-1700'],
-    [undefined, 'mini ui--media-1700']
+    [undefined, 'badge media--1700'],
+    [undefined, 'mini media--1700']
  ]);

  return (
--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@ -34,7 +34,7 @@ function Badge ({ className = '', color = 'normal', hover, icon, info, isSmall,
  return (
    <div
      {...extraProps}
-      className={`ui--Badge${hover ? ' isTooltip' : ''}${isSmall ? ' isSmall' : ''}${onClick ? ' isClickable' : ''}${isHighlight ? ' ui--highlight--bg' : ''} ${color}Color ${className}`}
+      className={`ui--Badge${hover ? ' isTooltip' : ''}${isSmall ? ' isSmall' : ''}${onClick ? ' isClickable' : ''}${isHighlight ? ' highlight--bg' : ''} ${color}Color ${className}`}
      onClick={onClick}
    >
      {info || (icon && <Icon icon={icon} />)}
--- a/packages/react-components/src/ChainImg.tsx
+++ b/packages/react-components/src/ChainImg.tsx
@ -39,7 +39,7 @@ function ChainImg ({ className = '', logo, onClick }: Props): React.ReactElement
  return (
    <img
      alt='chain logo'
-      className={`${className}${isEmpty ? ' ui--highlight--bg' : ''}`}
+      className={`${className}${isEmpty ? ' highlight--bg' : ''}`}
      onClick={onClick}
      src={img}
    />
--- a/packages/react-components/src/PasswordStrength.tsx
+++ b/packages/react-components/src/PasswordStrength.tsx
@ -33,7 +33,7 @@ function PasswordStrength ({ className = '', value }: Props): React.ReactElement
  return (
    <div className={className}>
      <div
-        className='ui--highlight--bg'
+        className='highlight--bg'
        style={style}
      />
    </div>
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@ -25,7 +25,7 @@ function DivClip ({ angle, type }: RotateProps): React.ReactElement<RotateProps>
  return (
    <div className={`clip ${type}`}>
      <div
-        className='ui--highlight--bg'
+        className='highlight--bg'
        style={{ transform: `rotate(${angle}deg)` }}
      />
    </div>
@ -46,7 +46,7 @@ function Progress ({ className = '', isDisabled, size = 'normal', total, value }

  return (
    <div className={`ui--Progress${isDisabled ? ' isDisabled' : ''} ${size}Size ${className}`}>
-      <div className='background ui--highlight--bg' />
+      <div className='background highlight--bg' />
      <Clip
        angle={
          angle <= 180
@ -126,7 +126,7 @@ export default React.memo(styled(Progress)`

  .inner {
    align-items: center;
-    background: rgba(255, 255, 255, 0.91);
+    background: rgba(245, 243, 241, 0.91);
    border-radius: 100%;
    bottom: 0.375rem;
    display: flex;
--- a/packages/react-components/src/Spinner.tsx
+++ b/packages/react-components/src/Spinner.tsx
@ -25,7 +25,7 @@ function Spinner ({ className = '', label, variant = 'app' }: Props): React.Reac
  return (
    <div className={`${className} ui--Spinner${variant === 'cover' ? ' isCover' : ''}`}>
      <img
-        className={variant === 'push' ? '' : 'ui--highlight--bg ui--highlight--border'}
+        className={variant === 'push' ? '' : 'highlight--bg highlight--border'}
        src={spinnerSrc as string}
      />
      {variant === 'app' && <div className='text'>{label || t('Retrieving data')}</div>}
--- a/packages/react-components/src/SummaryBox.tsx
+++ b/packages/react-components/src/SummaryBox.tsx
@ -49,10 +49,6 @@ export default React.memo(styled(SummaryBox)`

  @media(max-width: 767px) {
    padding: 0;
-
-    .ui--media-small {
-      display: none !important;
-    }
  }

  @media(min-width: 768px) {
--- a/packages/react-components/src/Toggle.tsx
+++ b/packages/react-components/src/Toggle.tsx
@ -37,7 +37,7 @@ function Toggle ({ className = '', isDisabled, isOverlay, isRadio, label, onChan
      onClick={_onClick}
    >
      {label && <label>{label}</label>}
-      <div className={`ui--Toggle-Slider${isRadio ? ' ui--highlight--before-border' : ''}`} />
+      <div className={`ui--Toggle-Slider${isRadio ? ' highlight--before-border' : ''}`} />
    </div>
  );
 }
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@ -21,25 +21,25 @@ const getHighlight = (props: Props): string =>
  (props.uiHighlight || defaultHighlight);

 export default createGlobalStyle<Props>`
-  .ui--highlight--all {
+  .highlight--all {
    background: ${getHighlight} !important;
    border-color: ${getHighlight} !important;
    color: ${getHighlight} !important;
  }

-  .ui--highlight--before:before {
+  .highlight--before:before {
    background: ${getHighlight} !important;
  }

-  .ui--highlight--before-border:before {
+  .highlight--before-border:before {
    border-color: ${getHighlight} !important;
  }

-  .ui--highlight--bg {
+  .highlight--bg {
    background: ${getHighlight} !important;
  }

-  .ui--highlight--bg-light {
+  .highlight--bg-light {
    background: white;
    position: relative;

@ -56,37 +56,37 @@ export default createGlobalStyle<Props>`
    }
  }

-  .ui--highlight--border {
+  .highlight--border {
    border-color: ${getHighlight} !important;
  }

-  .ui--highlight--color {
+  .highlight--color {
    color: ${getHighlight} !important;
  }

-  .ui--highlight--fill {
+  .highlight--fill {
    fill: ${getHighlight} !important;
  }

-  .ui--highlight--gradient {
+  .highlight--gradient {
    background: ${(props: Props) => `linear-gradient(90deg, ${props.uiHighlight || defaultHighlight}, transparent)`};
  }

-  .ui--highlight--hover-color:hover {
+  .highlight--hover-color:hover {
    color: ${getHighlight} !important;
  }

-  .ui--highlight--icon {
+  .highlight--icon {
    .ui--Icon {
      color: ${getHighlight} !important;
    }
  }

-  .ui--highlight--shadow {
+  .highlight--shadow {
    box-shadow: 0 0 1px ${getHighlight} !important;
  }

-  .ui--highlight--stroke {
+  .highlight--stroke {
    stroke: ${getHighlight} !important;
  }

--- a/packages/react-components/src/styles/media.ts
+++ b/packages/react-components/src/styles/media.ts
@ -5,192 +5,105 @@
 import { css } from 'styled-components';

 export default css`
-  /* block by default, flex as per media queries below */
-  .ui--flex-large,
-  .ui--flex-medium,
-  .ui--flex-small {
-    display: block;
+  .media--2000 {
+    @media only screen and (max-width: 2000px) {
+      display: none !important;
+    }
  }

-  /* hide all by default, add as per media queries below */
-  .ui--media-large,
-  .ui--media-medium,
-  .ui--media-small {
-    height: 0;
-    visibility: hidden;
-    width: 0;
-  }
-
-  td.ui--media-large,
-  td.ui--media-medium,
-  td.ui--media-small,
-  th.ui--media-large,
-  th.ui--media-medium,
-  th.ui--media-small {
-    display: none;
-  }
-
-  .ui--media-2000 {
+  .media--1900 {
    @media only screen and (max-width: 1900px) {
      display: none !important;
    }
  }

-  .ui--media-1900 {
-    @media only screen and (max-width: 1900px) {
-      display: none !important;
-    }
-  }
-
-  .ui--media-1800 {
+  .media--1800 {
    @media only screen and (max-width: 1800px) {
      display: none !important;
    }
  }

-  .ui--media-1700 {
+  .media--1700 {
    @media only screen and (max-width: 1700px) {
      display: none !important;
    }
  }

-  .ui--media-1600 {
+  .media--1600 {
    @media only screen and (max-width: 1600px) {
      display: none !important;
    }
  }

-  .ui--media-1500 {
+  .media--1500 {
    @media only screen and (max-width: 1500px) {
      display: none !important;
    }
  }

-  .ui--media-1400 {
+  .media--1400 {
    @media only screen and (max-width: 1400px) {
      display: none !important;
    }
  }

-  .ui--media-1300 {
+  .media--1300 {
    @media only screen and (max-width: 1300px) {
      display: none !important;
    }
  }

-  .ui--media-1200 {
+  .media--1200 {
    @media only screen and (max-width: 1200px) {
      display: none !important;
    }
  }

-  .ui--media-1100 {
+  .media--1100 {
    @media only screen and (max-width: 1100px) {
      display: none !important;
    }
  }

-  .ui--media-1000 {
+  .media--1000 {
    @media only screen and (max-width: 1000px) {
      display: none !important;
    }
  }

-  .ui--media-900 {
+  .media--900 {
    @media only screen and (max-width: 900px) {
      display: none !important;
    }
  }

-  .ui--media-800 {
+  .media--800 {
    @media only screen and (max-width: 800px) {
      display: none !important;
    }
  }

-  .ui--media-700 {
+  .media--700 {
    @media only screen and (max-width: 700px) {
      display: none !important;
    }
  }

-  .ui--media-600 {
+  .media--600 {
    @media only screen and (max-width: 600px) {
      display: none !important;
    }
  }

-  .ui--media-500 {
+  .media--500 {
    @media only screen and (max-width: 500px) {
      display: none !important;
    }
  }

-  .ui--media-400 {
+  .media--400 {
    @media only screen and (max-width: 400px) {
      display: none !important;
    }
  }
-
-  @media (min-width: 1281px) {
-    .ui--flex-large {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .ui--media-large {
-      height: auto;
-      visibility: visible;
-      width: auto;
-    }
-
-    td.ui--media-large,
-    th.ui--media-large {
-      display: table-cell;
-    }
-  }
-
-  @media (min-width: 1025px) {
-    .ui--flex-medium {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .ui--media-medium {
-      height: auto;
-      visibility: visible;
-      width: auto;
-    }
-
-    td.ui--media-medium,
-    th.ui--media-medium {
-      display: table-cell;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .ui--flex-small {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .ui--media-small {
-      height: auto;
-      visibility: visible;
-      width: auto;
-
-    }
-
-    td.ui--media-small,
-    th.ui--media-small {
-      display: table-cell;
-    }
-  }
-
-  /* tabs */
-  @media (max-width: 991px) {
-    .ui--Tabs {
-      padding-left: 5.2rem;
-    }
-  }
 `;