From 7247cec8e51f36bdc69d2590cf7b0f2bf85496ec Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 23 Aug 2020 12:11:12 +0200
Subject: [PATCH] Media & highlight name adjustments (#3482)

* Media & highlight name adjustments

* 2000 sizing

* Restore progress inner
---
 packages/apps/src/Endpoints/Network.tsx       |   2 +-
 packages/apps/src/Menu/ChainInfo.tsx          |   4 +-
 packages/apps/src/Menu/Grouping.tsx           |   2 +-
 packages/apps/src/Menu/Item.tsx               |   2 +-
 packages/apps/src/Menu/NodeInfo.tsx           |   2 +-
 packages/apps/src/Menu/index.tsx              |   4 +-
 .../page-accounts/src/Accounts/Account.tsx    |   6 +-
 packages/page-accounts/src/Accounts/index.tsx |  12 +-
 .../page-accounts/src/Contacts/Address.tsx    |   4 +-
 packages/page-accounts/src/Contacts/index.tsx |   4 +-
 .../src/Overview/DispatchEntry.tsx            |   2 +-
 .../src/Overview/DispatchQueue.tsx            |   2 +-
 .../page-democracy/src/Overview/Proposal.tsx  |   4 +-
 .../page-democracy/src/Overview/Proposals.tsx |   4 +-
 .../src/Overview/Referendum.tsx               |   8 +-
 .../src/Overview/Referendums.tsx              |   8 +-
 .../page-democracy/src/Overview/Summary.tsx   |   2 +-
 .../page-explorer/src/NodeInfo/Summary.tsx    |   6 +-
 packages/page-explorer/src/Summary.tsx        |   6 +-
 .../src/Overview/Parachain.tsx                |   4 +-
 .../page-parachains/src/Overview/Summary.tsx  |   2 +-
 .../page-parachains/src/ParachainInfo.tsx     |   2 +-
 .../page-society/src/Overview/Summary.tsx     |   4 +-
 .../src/Actions/Account/index.tsx             |   2 +-
 packages/page-staking/src/Actions/index.tsx   |   2 +-
 .../src/Overview/Address/index.tsx            |   4 +-
 .../page-staking/src/Overview/CurrentList.tsx |   4 +-
 .../page-staking/src/Overview/Summary.tsx     |   4 +-
 packages/page-staking/src/Targets/Summary.tsx |   6 +-
 .../page-staking/src/Targets/Validator.tsx    |   4 +-
 packages/page-staking/src/Targets/index.tsx   |   6 +-
 packages/page-treasury/src/Overview/Tip.tsx   |   4 +-
 .../page-treasury/src/Overview/TipEndorse.tsx |   2 +-
 packages/page-treasury/src/Overview/Tips.tsx  |   4 +-
 packages/react-components/src/Badge.tsx       |   2 +-
 packages/react-components/src/ChainImg.tsx    |   2 +-
 .../react-components/src/PasswordStrength.tsx |   2 +-
 packages/react-components/src/Progress.tsx    |   6 +-
 packages/react-components/src/Spinner.tsx     |   2 +-
 packages/react-components/src/SummaryBox.tsx  |   4 -
 packages/react-components/src/Toggle.tsx      |   2 +-
 packages/react-components/src/styles/index.ts |  26 ++--
 packages/react-components/src/styles/media.ts | 127 +++---------------
 43 files changed, 110 insertions(+), 201 deletions(-)

diff --git a/packages/apps/src/Endpoints/Network.tsx b/packages/apps/src/Endpoints/Network.tsx
index fc156a32e9..e80b5a5711 100644
--- 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}
diff --git a/packages/apps/src/Menu/ChainInfo.tsx b/packages/apps/src/Menu/ChainInfo.tsx
index 387c6c99da..2e2764ce97 100644
--- 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>
diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx
index edc98670d1..10048d34c9 100644
--- 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}
diff --git a/packages/apps/src/Menu/Item.tsx b/packages/apps/src/Menu/Item.tsx
index 366fea9105..d538f5670e 100644
--- 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}
diff --git a/packages/apps/src/Menu/NodeInfo.tsx b/packages/apps/src/Menu/NodeInfo.tsx
index 6c686732d2..05d0697f22 100644
--- 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;
diff --git a/packages/apps/src/Menu/index.tsx b/packages/apps/src/Menu/index.tsx
index 5e1d58ec29..d62f46e505 100644
--- 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
diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index a242352b8d..874631b1a4 100644
--- 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}
diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx
index 927330668b..e17ac3bc1d 100644
--- 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]);
 
diff --git a/packages/page-accounts/src/Contacts/Address.tsx b/packages/page-accounts/src/Contacts/Address.tsx
index a7e8defa5a..53784ff15a 100644
--- 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}
diff --git a/packages/page-accounts/src/Contacts/index.tsx b/packages/page-accounts/src/Contacts/index.tsx
index 969de25c48..c07e778fc2 100644
--- 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 => {
diff --git a/packages/page-democracy/src/Overview/DispatchEntry.tsx b/packages/page-democracy/src/Overview/DispatchEntry.tsx
index b756277a20..309d3a321a 100644
--- 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'
diff --git a/packages/page-democracy/src/Overview/DispatchQueue.tsx b/packages/page-democracy/src/Overview/DispatchQueue.tsx
index 13d00e47ea..2cb301b8a5 100644
--- 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 (
diff --git a/packages/page-democracy/src/Overview/Proposal.tsx b/packages/page-democracy/src/Overview/Proposal.tsx
index eefc0f9608..cc2119b6ef 100644
--- 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'
diff --git a/packages/page-democracy/src/Overview/Proposals.tsx b/packages/page-democracy/src/Overview/Proposals.tsx
index 7555e62efa..dc87a009eb 100644
--- 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 (
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index 11e73e32a8..48dca4d67a 100644
--- 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'
diff --git a/packages/page-democracy/src/Overview/Referendums.tsx b/packages/page-democracy/src/Overview/Referendums.tsx
index 5340dea073..fdcba283a4 100644
--- 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 (
diff --git a/packages/page-democracy/src/Overview/Summary.tsx b/packages/page-democracy/src/Overview/Summary.tsx
index 9fc17e7376..ca150762c9 100644
--- 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={{
diff --git a/packages/page-explorer/src/NodeInfo/Summary.tsx b/packages/page-explorer/src/NodeInfo/Summary.tsx
index ba43782788..b09bb241d3 100644
--- 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>
diff --git a/packages/page-explorer/src/Summary.tsx b/packages/page-explorer/src/Summary.tsx
index 54bbc76aef..4bf8fbab14 100644
--- 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>
diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index ca86edcdf1..dc6fffa029 100644
--- 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'>
diff --git a/packages/page-parachains/src/Overview/Summary.tsx b/packages/page-parachains/src/Overview/Summary.tsx
index ec1599b837..da15dc12e2 100644
--- 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 />
diff --git a/packages/page-parachains/src/ParachainInfo.tsx b/packages/page-parachains/src/ParachainInfo.tsx
index 9888a7de30..caa66eb472 100644
--- 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'
             />
           )
diff --git a/packages/page-society/src/Overview/Summary.tsx b/packages/page-society/src/Overview/Summary.tsx
index f3cfa20299..0c789b080d 100644
--- 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={{
diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index 544c9aecb5..15cdfa6fc4 100644
--- 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} />
diff --git a/packages/page-staking/src/Actions/index.tsx b/packages/page-staking/src/Actions/index.tsx
index 7cf398602b..84f18d59ea 100644
--- 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]
   ]);
diff --git a/packages/page-staking/src/Overview/Address/index.tsx b/packages/page-staking/src/Overview/Address/index.tsx
index acc9896e09..a39179e13f 100644
--- 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'}
diff --git a/packages/page-staking/src/Overview/CurrentList.tsx b/packages/page-staking/src/Overview/CurrentList.tsx
index ea693df735..f7620af607 100644
--- 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(
diff --git a/packages/page-staking/src/Overview/Summary.tsx b/packages/page-staking/src/Overview/Summary.tsx
index 146cd13f77..92136fc9ff 100644
--- 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}
diff --git a/packages/page-staking/src/Targets/Summary.tsx b/packages/page-staking/src/Targets/Summary.tsx
index 14f10c17bc..a2beb504bc 100644
--- 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}
diff --git a/packages/page-staking/src/Targets/Validator.tsx b/packages/page-staking/src/Targets/Validator.tsx
index 00bc99f659..21fccb3d2c 100644
--- 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) && (
diff --git a/packages/page-staking/src/Targets/index.tsx b/packages/page-staking/src/Targets/index.tsx
index a8d3f19b4e..41713e9377 100644
--- 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')
     ]),
diff --git a/packages/page-treasury/src/Overview/Tip.tsx b/packages/page-treasury/src/Overview/Tip.tsx
index 74ebddd0fc..c9e1d79f90 100644
--- 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'
diff --git a/packages/page-treasury/src/Overview/TipEndorse.tsx b/packages/page-treasury/src/Overview/TipEndorse.tsx
index 67b583ce7a..e08882fd8d 100644
--- 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
diff --git a/packages/page-treasury/src/Overview/Tips.tsx b/packages/page-treasury/src/Overview/Tips.tsx
index 4914b7d019..5246558879 100644
--- 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 (
diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx
index baf1cec732..b1fbcf9051 100644
--- 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} />)}
diff --git a/packages/react-components/src/ChainImg.tsx b/packages/react-components/src/ChainImg.tsx
index d466208ab0..ee48eaf2d2 100644
--- 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}
     />
diff --git a/packages/react-components/src/PasswordStrength.tsx b/packages/react-components/src/PasswordStrength.tsx
index 9ecbe5f5d7..efcad466eb 100644
--- 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>
diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx
index 18628626ca..797173570c 100644
--- 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;
diff --git a/packages/react-components/src/Spinner.tsx b/packages/react-components/src/Spinner.tsx
index 6713554521..c32550d2a3 100644
--- 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>}
diff --git a/packages/react-components/src/SummaryBox.tsx b/packages/react-components/src/SummaryBox.tsx
index 57063a209b..4fe3e5a455 100644
--- 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) {
diff --git a/packages/react-components/src/Toggle.tsx b/packages/react-components/src/Toggle.tsx
index 1be79553f2..111110c561 100644
--- 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>
   );
 }
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 87d872756c..3e3e52bf3b 100644
--- 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;
   }
 
diff --git a/packages/react-components/src/styles/media.ts b/packages/react-components/src/styles/media.ts
index 186fe11449..d4bc05c60c 100644
--- 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;
-    }
-  }
 `;