Layout changes for motions (#1983)

packages/app-council/src/Motions/Motion.tsx

@@ -9,8 +9,10 @@ import BN from 'bn.js';
 import React from 'react';
 import { Option } from '@polkadot/types';
 
-import { ActionItem, InputAddress, Labelled, Voting } from '@polkadot/react-components';
+import { AddressMini, Voting } from '@polkadot/react-components';
 import { withCalls, withMulti } from '@polkadot/react-api';
+import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
+import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
@@ -29,58 +31,42 @@ function Motion ({ className, hash, proposal, t, votes }: Props): React.ReactEle
   const { ayes, index, nays, threshold } = votes;
 
   return (
-    <ActionItem
-      className={className}
-      accessory={
+    <tr className={className}>
+      <td className='number top'><h1>{formatNumber(index)}</h1></td>
+      <ProposalCell proposal={proposal} />
+      <td className='number top'>
+        <label>{t('threshold')}</label>
+        {formatNumber(ayes.length)}/{formatNumber(threshold)}
+      </td>
+      <td className='top'>
+        {ayes.map((address, index): React.ReactNode => (
+          <AddressMini
+            key={`${index}:${address}`}
+            label={index === 0 ? t('Aye') : undefined}
+            value={address}
+            withBalance={false}
+          />
+        ))}
+      </td>
+      <td className='top'>
+        {nays.map((address, index): React.ReactNode => (
+          <AddressMini
+            key={`${index}:${address}`}
+            label={t('Nay')}
+            value={address}
+            withBalance={false}
+          />
+        ))}
+      </td>
+      <td className='number top together'>
         <Voting
           hash={hash}
           isCouncil
           idNumber={index}
           proposal={proposal}
         />
-      }
-      expandNested
-      idNumber={index}
-      proposal={proposal}
-    >
-      <div>
-        <h4>{t('ayes ({{ayes}}/{{threshold}} to approve)', {
-          replace: {
-            ayes: ayes.length,
-            threshold: threshold.toString()
-          }
-        })}</h4>
-        {ayes.map((address, index): React.ReactNode => (
-          <Labelled
-            key={`${index}:${address}`}
-            label={t('Aye')}
-          >
-            <InputAddress
-              isDisabled
-              defaultValue={address}
-              withLabel={false}
-            />
-          </Labelled>
-        ))}
-        <h4>{t('nays ({{nays}})', {
-          replace: {
-            nays: nays.length
-          }
-        })}</h4>
-        {nays.map((address, index): React.ReactNode => (
-          <Labelled
-            key={`${index}:${address}`}
-            label={t('Nay')}
-          >
-            <InputAddress
-              isDisabled
-              defaultValue={address}
-              withLabel={false}
-            />
-          </Labelled>
-        ))}
-      </div>
-    </ActionItem>
+      </td>
+    </tr>
   );
 }
 

packages/app-council/src/Motions/index.tsx

@@ -6,7 +6,7 @@ import { Hash } from '@polkadot/types/interfaces';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { CardGrid } from '@polkadot/react-components';
+import { Table } from '@polkadot/react-components';
 
 import Motion from './Motion';
 import Propose from './Propose';
@@ -16,22 +16,26 @@ interface Props extends I18nProps {
   motions?: Hash[];
 }
 
-function Proposals ({ motions, t }: Props): React.ReactElement<Props> {
+function Proposals ({ className, motions, t }: Props): React.ReactElement<Props> {
   return (
-    <CardGrid
-      emptyText={t('No council motions')}
-      headerText={t('Motions')}
-      buttons={
-        <Propose />
+    <div className={className}>
+      <Propose />
+      {motions?.length
+        ? (
+          <Table>
+            <Table.Body>
+              {motions?.map((hash: Hash): React.ReactNode => (
+                <Motion
+                  hash={hash.toHex()}
+                  key={hash.toHex()}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        )
+        : t('No council motions')
       }
-    >
-      {motions?.map((hash: Hash): React.ReactNode => (
-        <Motion
-          hash={hash.toHex()}
-          key={hash.toHex()}
-        />
-      ))}
-    </CardGrid>
+    </div>
   );
 }
 

packages/app-democracy/src/Overview/Proposal.tsx

@@ -22,7 +22,7 @@ interface Props extends I18nProps {
 function Proposal ({ className, t, value: { balance, index, proposal, proposer, seconds } }: Props): React.ReactElement<Props> {
   return (
     <tr className={className}>
-      <td className='number toppad'>{formatNumber(index)}</td>
+      <td className='number top'><h1>{formatNumber(index)}</h1></td>
       <td className='top'>
         <AddressSmall value={proposer} />
       </td>

packages/app-democracy/src/Overview/ProposalCell.tsx

@@ -28,6 +28,7 @@ function ProposalCell ({ className, proposal, t }: Props): React.ReactElement<Pr
             : t('Details')
         }</summary>
         <Call
+          labelHash={t('proposal hash')}
           value={proposal}
           withHash
         />

packages/app-democracy/src/Overview/Referendum.tsx

@@ -84,7 +84,7 @@ function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, d
 
   return (
     <tr className={className}>
-      <td className='number toppad'>{formatNumber(value.index)}</td>
+      <td className='number top'><h1>{formatNumber(value.index)}</h1></td>
       <ProposalCell className='top' proposal={value.proposal} />
       <td className='number together top'>
         <label>{t('remaining')}</label>

packages/app-tech-comm/src/Proposals/Proposal.tsx

@@ -8,10 +8,12 @@ import { I18nProps } from '@polkadot/react-components/types';
 import React from 'react';
 import { useApi, trackStream } from '@polkadot/react-hooks';
 import { Option } from '@polkadot/types';
-
-import { ActionItem, InputAddress, Labelled, Voting } from '@polkadot/react-components';
+import { AddressMini } from '@polkadot/react-components';
+import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
+import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
+import Voting from './Voting';
 
 interface Props extends I18nProps {
   hash: string;
@@ -29,57 +31,40 @@ function Proposal ({ className, hash, t }: Props): React.ReactElement<Props> | n
   const { ayes, index, nays, threshold } = votes.unwrap();
 
   return (
-    <ActionItem
-      className={className}
-      accessory={
+    <tr className={className}>
+      <td className='number top'><h1>{formatNumber(index)}</h1></td>
+      <ProposalCell proposal={proposal} />
+      <td className='number top'>
+        <label>{t('threshold')}</label>
+        {formatNumber(ayes.length)}/{formatNumber(threshold)}
+      </td>
+      <td className='top'>
+        {ayes.map((address, index): React.ReactNode => (
+          <AddressMini
+            key={`${index}:${address}`}
+            label={index === 0 ? t('Aye') : undefined}
+            value={address}
+            withBalance={false}
+          />
+        ))}
+      </td>
+      <td className='top'>
+        {nays.map((address, index): React.ReactNode => (
+          <AddressMini
+            key={`${index}:${address}`}
+            label={t('Nay')}
+            value={address}
+            withBalance={false}
+          />
+        ))}
+      </td>
+      <td className='number top together'>
         <Voting
           hash={hash}
           proposalId={index}
-          proposal={proposal}
         />
-      }
-      expandNested
-      idNumber={index}
-      proposal={proposal}
-    >
-      <div>
-        <h4>{t('ayes ({{ayes}}/{{threshold}} to approve)', {
-          replace: {
-            ayes: ayes.length,
-            threshold: threshold.toString()
-          }
-        })}</h4>
-        {ayes.map((address, index): React.ReactNode => (
-          <Labelled
-            key={`${index}:${address}`}
-            label={t('Aye')}
-          >
-            <InputAddress
-              isDisabled
-              defaultValue={address}
-              withLabel={false}
-            />
-          </Labelled>
-        ))}
-        <h4>{t('nays ({{nays}})', {
-          replace: {
-            nays: nays.length
-          }
-        })}</h4>
-        {nays.map((address, index): React.ReactNode => (
-          <Labelled
-            key={`${index}:${address}`}
-            label={t('Nay')}
-          >
-            <InputAddress
-              isDisabled
-              defaultValue={address}
-              withLabel={false}
-            />
-          </Labelled>
-        ))}
-      </div>
-    </ActionItem>
+      </td>
+    </tr>
   );
 }
 

packages/app-tech-comm/src/Proposals/index.tsx

@@ -6,7 +6,7 @@ import { Hash } from '@polkadot/types/interfaces';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { CardGrid } from '@polkadot/react-components';
+import { Table } from '@polkadot/react-components';
 
 import Proposal from './Proposal';
 import translate from '../translate';
@@ -15,20 +15,26 @@ interface Props extends I18nProps {
   proposals?: Hash[];
 }
 
-function Proposals ({ proposals, t }: Props): React.ReactElement<Props> {
+function Proposals ({ className, proposals, t }: Props): React.ReactElement<Props> {
   return (
-    <CardGrid
-      emptyText={t('No committee proposals')}
-      headerText={t('Proposals')}
-      // buttons={<Propose />}
-    >
-      {proposals?.map((hash: Hash): React.ReactNode => (
-        <Proposal
-          hash={hash.toHex()}
-          key={hash.toHex()}
-        />
-      ))}
-    </CardGrid>
+    <div className={className}>
+      {/* <Propose /> */}
+      {proposals?.length
+        ? (
+          <Table>
+            <Table.Body>
+              {proposals?.map((hash: Hash): React.ReactNode => (
+                <Proposal
+                  hash={hash.toHex()}
+                  key={hash.toHex()}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        )
+        : t('No committee proposals')
+      }
+    </div>
   );
 }
 

packages/react-components/src/Call.tsx

@@ -18,13 +18,14 @@ import translate from './translate';
 
 export interface Props extends I18nProps, BareProps {
   children?: React.ReactNode;
+  labelHash?: React.ReactNode;
   value: IExtrinsic | IMethod;
   withHash?: boolean;
   mortality?: string;
   tip?: BN;
 }
 
-function Call ({ children, className, style, mortality, tip, value, withHash, t }: Props): React.ReactElement<Props> {
+function Call ({ children, className, labelHash, style, mortality, tip, value, withHash, t }: Props): React.ReactElement<Props> {
   const params = GenericCall.filterOrigin(value.meta).map(({ name, type }): { name: string; type: TypeDef } => ({
     name: name.toString(),
     type: getTypeDef(type.toString())
@@ -46,7 +47,7 @@ function Call ({ children, className, style, mortality, tip, value, withHash, t
       {hash && (
         <Static
           className='hash'
-          label={t('extrinsic hash')}
+          label={labelHash || t('extrinsic hash')}
         >
           {hash.toHex()}
         </Static>