Align council/tech-comm layouts (#8832)

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

@@ -6,6 +6,7 @@ import type { AccountId, Balance } from '@polkadot/types/interfaces';
 import React from 'react';
 
 import { AddressSmall, Tag } from '@polkadot/react-components';
+import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import Voters from './Voters';
@@ -14,31 +15,38 @@ interface Props {
   className?: string;
   address: AccountId;
   balance?: Balance;
+  hasElections: boolean;
   isPrime?: boolean;
   voters?: AccountId[];
 }
 
-function Candidate ({ address, balance, className = '', isPrime, voters }: Props): React.ReactElement<Props> {
+function Candidate ({ address, balance, className = '', hasElections, isPrime, voters }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
-    <tr className={className}>
-      <td className='address all relative'>
-        <AddressSmall value={address} />
-        {isPrime && (
-          <Tag
-            className='absolute'
-            color='green'
-            hover={t<string>('Current prime member, default voting')}
-            label={t<string>('prime voter')}
-          />
-        )}
-      </td>
-      <Voters
-        balance={balance}
-        voters={voters}
-      />
-    </tr>
+    <>
+      <tr className={`${className} isExpanded isFirst ${hasElections ? '' : 'isLast'}`}>
+        <td className='address all relative'>
+          <AddressSmall value={address} />
+          {isPrime && (
+            <Tag
+              className='absolute'
+              color='green'
+              label={t<string>('prime')}
+            />
+          )}
+        </td>
+        <td className='number'>
+          {voters && formatNumber(voters.length)}
+        </td>
+      </tr>
+      {hasElections && (
+        <Voters
+          balance={balance}
+          voters={voters}
+        />
+      )}
+    </>
   );
 }
 

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

@@ -15,21 +15,18 @@ interface Props {
   allVotes?: Record<string, AccountId[]>;
   className?: string;
   electionsInfo?: DeriveElectionsInfo;
+  hasElections: boolean;
 }
 
-function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElement<Props> {
+function Candidates ({ allVotes = {}, electionsInfo, hasElections }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const headerCandidatesRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
-    [t('candidates'), 'start'],
-    [],
-    []
+    [t('candidates'), 'start', 2]
   ]);
 
   const headerRunnersRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
-    [t('runners up'), 'start'],
-    [t('backing'), 'expand'],
-    [t('votes')]
+    [t('runners up'), 'start', 2]
   ]);
 
   return (
@@ -37,11 +34,13 @@ function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElemen
       <Table
         empty={electionsInfo && t<string>('No runners up found')}
         header={headerRunnersRef.current}
+        isSplit
       >
         {electionsInfo?.runnersUp.map(([accountId, balance]): React.ReactNode => (
           <Candidate
             address={accountId}
             balance={balance}
+            hasElections={hasElections}
             key={accountId.toString()}
             voters={allVotes[accountId.toString()]}
           />
@@ -50,10 +49,12 @@ function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElemen
       <Table
         empty={electionsInfo && t<string>('No candidates found')}
         header={headerCandidatesRef.current}
+        isSplit
       >
         {electionsInfo?.candidates.map((accountId): React.ReactNode => (
           <Candidate
             address={accountId}
+            hasElections={false}
             key={accountId.toString()}
             voters={allVotes[accountId.toString()]}
           />

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

@@ -23,9 +23,7 @@ function Members ({ allVotes = {}, className = '', electionsInfo, hasElections,
   const { t } = useTranslation();
 
   const headerRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
-    [t('members'), 'start'],
-    [hasElections ? t('backing') : undefined, 'expand'],
-    [hasElections ? t('votes') : undefined]
+    [t('members'), 'start', 2]
   ]);
 
   return (
@@ -33,11 +31,13 @@ function Members ({ allVotes = {}, className = '', electionsInfo, hasElections,
       className={className}
       empty={electionsInfo && t<string>('No members found')}
       header={headerRef.current}
+      isSplit
     >
       {electionsInfo?.members.map(([accountId, balance]): React.ReactNode => (
         <Candidate
           address={accountId}
           balance={balance}
+          hasElections={hasElections}
           isPrime={prime?.eq(accountId)}
           key={accountId.toString()}
           voters={allVotes[accountId.toString()]}

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

@@ -7,7 +7,6 @@ import React, { useCallback } from 'react';
 
 import { AddressMini, ExpanderScroll } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
-import { formatNumber } from '@polkadot/util';
 
 interface Props {
   balance?: Balance;
@@ -27,28 +26,22 @@ function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
   );
 
   return (
-    <>
-      {voters
-        ? (
-          <>
-            <td className='expand'>
-              <ExpanderScroll
-                className={balance ? '' : '--tmp'}
-                renderChildren={renderVoters}
-                summary={<FormatBalance value={balance} />}
-              />
-            </td>
-            <td className='number'>
-              {voters
-                ? formatNumber(voters.length)
-                : <span className='--tmp'>123</span>
-              }
-            </td>
-          </>
-        )
-        : <td colSpan={2} />
-      }
-    </>
+    <tr className='isExpanded isLast packedTop'>
+      <td
+        className='expand all'
+        colSpan={2}
+      >
+        <ExpanderScroll
+          renderChildren={renderVoters}
+          summary={
+            <FormatBalance
+              className={balance && voters ? '' : '--tmp'}
+              value={balance}
+            />
+          }
+        />
+      </td>
+    </tr>
   );
 }
 

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

@@ -69,6 +69,7 @@ function Overview ({ className = '', prime }: Props): React.ReactElement<Props>
         <Candidates
           allVotes={allVotes}
           electionsInfo={electionsInfo}
+          hasElections={hasElections}
         />
       )}
     </div>

packages/page-referenda/src/Referenda/RefKilled.tsx

@@ -17,16 +17,14 @@ function RefOther ({ value: { info } }: Props): React.ReactElement<Props> {
 
   return (
     <>
-      <td className='all' />
-      <td className='address' />
+      <td
+        className='all no-pad'
+        colSpan={5}
+      />
       <RefEnd
         label={info.type}
         when={when}
       />
-      <td
-        className='number'
-        colSpan={4}
-      />
     </>
   );
 }

packages/page-referenda/src/Referenda/RefTuple.tsx

@@ -50,11 +50,12 @@ function Tuple ({ palletReferenda, value: { id, info, track } }: Props): React.R
   return (
     <>
       <td
-        className='all'
+        className='no-pad'
         colSpan={4}
       />
       <Deposits
         canRefund
+        className='all'
         decision={decision}
         id={id}
         noMedia

packages/page-tech-comm/src/Overview/Members.tsx

@@ -25,6 +25,7 @@ function Members ({ className = '', members, prime }: Props): React.ReactElement
       className={className}
       empty={members && t<string>('No members found')}
       header={headerRef.current}
+      isSplit
     >
       {members?.map((accountId): React.ReactNode => (
         <tr key={accountId}>

packages/react-components/src/Table/index.tsx

@@ -367,6 +367,10 @@ const StyledDiv = styled.div`
         padding-top: 0.125rem;
       }
 
+      &.no-pad {
+        padding: 0;
+      }
+
       &.number {
         font-variant-numeric: tabular-nums;
         text-align: right;