Split council num votes (#3270)

* Split council num votes

* Reformat candidates

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

@@ -35,12 +35,10 @@ function Candidate ({ address, balance, className = '', isPrime, voters }: Props
           />
         )}
       </td>
-      <td className='all number'>
-        <Voters
-          balance={balance}
-          voters={voters}
-        />
-      </td>
+      <Voters
+        balance={balance}
+        voters={voters}
+      />
     </tr>
   );
 }

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

@@ -22,12 +22,14 @@ function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElemen
 
   const headerCandidates = useMemo(() => [
     [t('candidates'), 'start', 2],
+    [],
     []
   ], [t]);
 
   const headerRunners = useMemo(() => [
     [t('runners up'), 'start', 2],
-    [t('backing')]
+    [t('backing')],
+    [t('votes')]
   ], [t]);
 
   return (

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

@@ -23,7 +23,8 @@ function Members ({ allVotes = {}, className = '', electionsInfo, prime }: Props
 
   const header = useMemo(() => [
     [t('members'), 'start', 2],
-    [t('backing')]
+    [t('backing')],
+    [t('votes')]
   ], [t]);
 
   return (

packages/page-council/src/Overview/Voters.tsx

@@ -7,34 +7,35 @@ import { AccountId, Balance } from '@polkadot/types/interfaces';
 import React from 'react';
 import { AddressMini, Expander } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
+import { formatNumber } from '@polkadot/util';
 
 interface Props {
   balance?: Balance;
   voters?: AccountId[];
 }
 
-function Voters ({ balance, voters }: Props): React.ReactElement<Props> | null {
+function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
   if (!balance || !voters || !voters.length) {
-    return null;
+    return <><td className='all number' /><td className='number' /></>;
   }
 
   return (
-    <Expander
-      summary={
-        <FormatBalance
-          labelPost={` (${voters.length})`}
-          value={balance}
-        />
-      }
-    >
-      {voters.map((who): React.ReactNode =>
-        <AddressMini
-          key={who.toString()}
-          value={who}
-          withLockedVote
-        />
-      )}
-    </Expander>
+    <>
+      <td className='all number'>
+        <Expander summary={<FormatBalance value={balance} />} >
+          {voters.map((who): React.ReactNode =>
+            <AddressMini
+              key={who.toString()}
+              value={who}
+              withLockedVote
+            />
+          )}
+        </Expander>
+      </td>
+      <td className='number'>
+        {formatNumber(voters.length)}
+      </td>
+    </>
   );
 }