Show voting columns (#4884)

packages/page-society/src/Overview/Member.tsx

@@ -120,6 +120,8 @@ function Member ({ bestNumber, className = '', value: { isCandidateVoter, isFoun
           />
         )}
       </td>
+      <td>{isDefenderVoter && t<string>('defender')}</td>
+      <td>{isCandidateVoter && t<string>('candidate')}</td>
       <td className='number'>{formatNumber(strikes)}</td>
       <td>
         {canInk && (

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

@@ -22,6 +22,7 @@ function Members ({ className = '', mapMembers }: Props): React.ReactElement<Pro
 
   const headerRef = useRef([
     [t('members'), 'start', 3],
+    [t('round voting'), 'start', 2],
     [t('strikes')],
     []
   ]);

packages/page-society/src/index.tsx

@@ -50,6 +50,16 @@ function voterSort (a: MapMember, b: MapMember): number {
         : strikeSort(a, b);
 }
 
+function skepticSort (a: MapMember, b: MapMember): number {
+  return a.isSkeptic && b.isSkeptic
+    ? voterSort(a, b)
+    : a.isSkeptic
+      ? -1
+      : b.isSkeptic
+        ? 1
+        : 0;
+}
+
 function finalSort (a: MapMember, b: MapMember): number {
   return a.isHead
     ? -1
@@ -59,13 +69,7 @@ function finalSort (a: MapMember, b: MapMember): number {
         ? -1
         : b.isFounder
           ? 1
-          : a.isSkeptic && b.isSkeptic
-            ? voterSort(a, b)
-            : a.isSkeptic
-              ? -1
-              : b.isSkeptic
-                ? 1
-                : 0;
+          : skepticSort(a, b);
 }
 
 function getMapMembers (members: DeriveSocietyMember[], skeptics: string[], voters: string[], info: DeriveSociety, warnStrikes: BN): MapMember[] {
@@ -95,8 +99,9 @@ function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props>
   const { candidates, skeptics, voters } = useVoters();
 
   const mapMembers = useMemo(
-    () => members && info && skeptics && voters &&
-      getMapMembers(members, skeptics, voters, info, api.consts.society.maxStrikes.mul(BN_TWO).div(BN_THREE)),
+    () => members && info && skeptics && voters
+      ? getMapMembers(members, skeptics, voters, info, api.consts.society.maxStrikes.mul(BN_TWO).div(BN_THREE))
+      : undefined,
     [api, info, members, skeptics, voters]
   );
 
@@ -119,10 +124,12 @@ function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props>
 
   return (
     <main className={className}>
-      <Tabs
-        basePath={basePath}
-        items={items}
-      />
+      <header>
+        <Tabs
+          basePath={basePath}
+          items={items}
+        />
+      </header>
       <Switch>
         <Route path={`${basePath}/candidates`}>
           <Candidates

packages/react-components/src/Tag.tsx

@@ -47,7 +47,7 @@ export default React.memo(styled(Tag)`
   font-size: 0.78571429rem;
   font-weight: var(--font-weight-normal);
   line-height: 1;
-  margin: 0.125rem;
+  margin: 0 0.125rem;
   padding: 0.5833em 0.833em;
   position: relative;
   white-space: nowrap;