Rework council display

package.json

@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.98.0-beta.1",
-    "@polkadot/api-contract": "^0.98.0-beta.1",
+    "@polkadot/api": "^0.98.0-beta.2",
+    "@polkadot/api-contract": "^0.98.0-beta.2",
     "@polkadot/keyring": "^1.7.1",
-    "@polkadot/types": "^0.98.0-beta.1",
+    "@polkadot/types": "^0.98.0-beta.2",
     "@polkadot/util": "^1.7.1",
     "@polkadot/util-crypto": "^1.7.1",
     "babel-core": "^7.0.0-bridge.0",

packages/app-contracts/package.json

@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.7.4",
-    "@polkadot/api-contract": "^0.98.0-beta.1",
+    "@polkadot/api-contract": "^0.98.0-beta.2",
     "@polkadot/react-components": "^0.38.0-beta.12"
   }
 }

packages/app-council/src/Overview/Candidate.tsx

@@ -3,39 +3,38 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/react-components/types';
-import { AccountId } from '@polkadot/types/interfaces';
+import { AccountId, Balance } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import { AddressCard, Badge, Icon } from '@polkadot/react-components';
+import { AddressSmall } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
 
 import translate from '../translate';
 import Voters from './Voters';
 
 interface Props extends I18nProps {
   address: AccountId;
-  isRunnerUp?: boolean;
+  balance?: Balance;
   voters?: AccountId[];
 }
 
-function Candidate ({ address, isRunnerUp, t, voters }: Props): React.ReactElement<Props> {
+function Candidate ({ address, balance, t, voters }: Props): React.ReactElement<Props> {
   return (
-    <AddressCard
-      defaultName={isRunnerUp ? t('runner up') : t('candidate')}
-      iconInfo={isRunnerUp && (
-        <Badge
-          hover={t('Runner up')}
-          info={<Icon name='chevron down' />}
-          isTooltip
-          type='runnerup'
-        />
-      )}
-      value={address}
-      withIndexOrAddress
-    >
-      {voters && voters.length !== 0 && (
-        <Voters voters={voters} />
-      )}
-    </AddressCard>
+    <tr>
+      <td className='top'>
+        <AddressSmall value={address} />
+      </td>
+      <td className='top together right'>
+        {balance && balance.gtn(0) && (
+          <FormatBalance label={<label>{t('backing')}</label>} value={balance} />
+        )}
+      </td>
+      <td className='all'>
+        {voters && voters.length !== 0 && (
+          <Voters voters={voters} />
+        )}
+      </td>
+    </tr>
   );
 }
 

packages/app-council/src/Overview/Candidates.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/camelcase */
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { AccountId } from '@polkadot/types/interfaces';
+import { I18nProps } from '@polkadot/react-components/types';
+import { ComponentProps } from './types';
+
+import React from 'react';
+import { Table } from '@polkadot/react-components';
+
+import translate from '../translate';
+import Candidate from './Candidate';
+
+interface Props extends I18nProps, ComponentProps {
+  allVotes?: Record<string, AccountId[]>;
+  className?: string;
+}
+
+function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, runnersUp }, t }: Props): React.ReactElement<Props> {
+  return (
+    <div className={className}>
+      <h1>{t('runners up')}</h1>
+      {runnersUp.length
+        ? (
+          <Table>
+            <Table.Body>
+              {runnersUp.map(([accountId, balance]): React.ReactNode => (
+                <Candidate
+                  address={accountId}
+                  balance={balance}
+                  key={accountId.toString()}
+                  voters={allVotes[accountId.toString()]}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        )
+        : t('No runners up found')
+      }
+      <h1>{t('candidates')}</h1>
+      {candidates.length
+        ? (
+          <Table>
+            <Table.Body>
+              {candidates.map((accountId): React.ReactNode => (
+                <Candidate
+                  address={accountId}
+                  key={accountId.toString()}
+                  voters={allVotes[accountId.toString()]}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        )
+        : t('No candidates found')
+      }
+    </div>
+  );
+}
+
+export default translate(Candidates);

packages/app-council/src/Overview/Members.tsx

@@ -8,78 +8,38 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { ComponentProps } from './types';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
-import { Columar, Column } from '@polkadot/react-components';
+import { Table } from '@polkadot/react-components';
 
 import translate from '../translate';
 import Candidate from './Candidate';
-import Member from './Member';
 
 interface Props extends I18nProps, ComponentProps {
   allVotes?: Record<string, AccountId[]>;
+  className?: string;
 }
 
-function Members ({ allVotes = {}, electionsInfo: { candidates, members, runnersUp }, t }: Props): React.ReactElement<Props> {
+function Members ({ allVotes = {}, className, electionsInfo: { members }, t }: Props): React.ReactElement<Props> {
   return (
-    <Columar>
-      <Column
-        emptyText={t('No members found')}
-        headerText={t('members')}
-      >
-        {members.map(([accountId]): React.ReactNode => (
-          <Member
-            address={accountId}
-            key={accountId.toString()}
-            voters={allVotes[accountId.toString()]}
-          />
-        ))}
-      </Column>
-      <Column
-        emptyText={t('No candidates found')}
-        headerText={t('candidates')}
-      >
-        {(!!candidates.length || !!runnersUp.length) && (
-          <>
-            {runnersUp.map(([accountId]): React.ReactNode => (
-              <Candidate
-                address={accountId}
-                isRunnerUp
-                key={accountId.toString()}
-                voters={allVotes[accountId.toString()]}
-              />
-            ))}
-            {candidates.map((accountId): React.ReactNode => (
-              <Candidate
-                address={accountId}
-                key={accountId.toString()}
-                voters={allVotes[accountId.toString()]}
-              />
-            ))}
-          </>
-        )}
-      </Column>
-    </Columar>
+    <div className={className}>
+      {members.length
+        ? (
+          <Table>
+            <Table.Body>
+              {members.map(([accountId, balance]): React.ReactNode => (
+                <Candidate
+                  address={accountId}
+                  balance={balance}
+                  key={accountId.toString()}
+                  voters={allVotes[accountId.toString()]}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        )
+        : t('No members found')
+      }
+    </div>
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    ['query.electionsPhragmen.votesOf', {
-      propName: 'allVotes',
-      transform: ([voters, casted]: [AccountId[], AccountId[][]]): Record<string, AccountId[]> =>
-        voters.reduce((result: Record<string, AccountId[]>, voter, index): Record<string, AccountId[]> => {
-          casted[index].forEach((candidate): void => {
-            const address = candidate.toString();
-
-            if (!result[address]) {
-              result[address] = [];
-            }
-
-            result[address].push(voter);
-          });
-
-          return result;
-        }, {})
-    }]
-  )(Members)
-);
+export default translate(Members);

packages/app-council/src/Overview/Summary.tsx

@@ -17,9 +17,9 @@ interface Props extends I18nProps, ComponentProps {
   bestNumber?: BlockNumber;
 }
 
-function Summary ({ bestNumber, electionsInfo: { members, candidateCount, desiredSeats, runnersUp, termDuration, voteCount }, t }: Props): React.ReactElement<Props> {
+function Summary ({ bestNumber, className, electionsInfo: { members, candidateCount, desiredSeats, runnersUp, termDuration, voteCount }, t }: Props): React.ReactElement<Props> {
   return (
-    <SummaryBox>
+    <SummaryBox className={className}>
       <section>
         <CardSummary label={t('seats')}>
           {formatNumber(members.length)}/{formatNumber(desiredSeats)}

packages/app-council/src/Overview/Vote.tsx

@@ -56,8 +56,7 @@ const Candidates = styled.div`
     border: 1px solid #eee;
     border-radius: 0.25rem;
     margin: 0.25rem;
-    padding-bottom: 0.25rem;
-    padding-right: 0.5rem;
+    padding: 0 0.5rem 0.25rem;
     position: relative;
 
     &::after {