From f88ff8588449ee0b0d7989a76a50cee8cf282704 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 13 Jan 2021 11:46:06 +0100
Subject: [PATCH] Media queries on proposals (#4386)

---
 .../page-parachains/src/Overview/Proposal.tsx | 21 ++++++++++++++-----
 .../src/Overview/Proposals.tsx                |  8 +++----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/page-parachains/src/Overview/Proposal.tsx b/packages/page-parachains/src/Overview/Proposal.tsx
index 1ceec953cf..700dcf748c 100644
--- a/packages/page-parachains/src/Overview/Proposal.tsx
+++ b/packages/page-parachains/src/Overview/Proposal.tsx
@@ -65,15 +65,26 @@ function Proposal ({ approvedIds, id, scheduled }: Props): React.ReactElement<Pr
         )}
       </td>
       {isQueried && !proposal.proposal
-        ? <td colSpan={6}><Spinner variant='mini' /></td>
+        ? (
+          <>
+            <td colSpan={2}><Spinner variant='mini' /></td>
+            <td className='media--1000' />
+            <td
+              className='media--1600'
+              colSpan={2} />
+            <td
+              className='media--1300'
+              colSpan={1} />
+          </>
+        )
         : (
           <>
             <td className='start together'>{proposal.proposal?.name.toUtf8()}</td>
             <td className='address'>{proposal.proposal && <AddressSmall value={proposal.proposal.proposer} />}</td>
-            <td className='balance'>{proposal.proposal && <FormatBalance value={proposal.proposal.balance} />}</td>
-            <td className='start hash together'>{initialHex}</td>
-            <td className='start hash together'>{validationHex}</td>
-            <td className='address all'>{proposal.proposal?.validators.map((validatorId) => (
+            <td className='balance media--1000'>{proposal.proposal && <FormatBalance value={proposal.proposal.balance} />}</td>
+            <td className='start hash together media--1600'>{initialHex}</td>
+            <td className='start hash together media--1600'>{validationHex}</td>
+            <td className='address all media--1300'>{proposal.proposal?.validators.map((validatorId) => (
               <AddressMini
                 key={validatorId.toString()}
                 value={validatorId}
diff --git a/packages/page-parachains/src/Overview/Proposals.tsx b/packages/page-parachains/src/Overview/Proposals.tsx
index cda8eb7e55..1cf46192bf 100644
--- a/packages/page-parachains/src/Overview/Proposals.tsx
+++ b/packages/page-parachains/src/Overview/Proposals.tsx
@@ -21,10 +21,10 @@ function Proposals ({ proposals }: Props): React.ReactElement<Props> {
     [t('proposals'), 'start', 2],
     [],
     [t('proposer'), 'address'],
-    [t('balance')],
-    [t('initial state'), 'start'],
-    [t('validation'), 'start'],
-    [t('validators'), 'address'],
+    [t('balance'), 'media--1000'],
+    [t('initial state'), 'start media--1600'],
+    [t('validation'), 'start media--1600'],
+    [t('validators'), 'address media--1300'],
     []
   ]);