From fc6523d41dc8d8a0a2bcc669ec1353a7648bbbdb Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 24 Mar 2020 18:05:16 +0100
Subject: [PATCH] Use Tag for society head & council prime (#2454)

---
 .../page-council/src/Overview/Candidate.tsx   | 40 +++---------
 .../src/Overview/Referendum.tsx               |  2 +-
 packages/page-society/src/Overview/Member.tsx | 41 +++----------
 .../page-tech-comm/src/Overview/Members.tsx   | 61 ++++++-------------
 4 files changed, 39 insertions(+), 105 deletions(-)

diff --git a/packages/page-council/src/Overview/Candidate.tsx b/packages/page-council/src/Overview/Candidate.tsx
index f1242960d6..82e60af2f5 100644
--- a/packages/page-council/src/Overview/Candidate.tsx
+++ b/packages/page-council/src/Overview/Candidate.tsx
@@ -5,8 +5,7 @@
 import { AccountId, Balance } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import styled from 'styled-components';
-import { AddressSmall, Badge, Icon } from '@polkadot/react-components';
+import { AddressSmall, Tag } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from '../translate';
@@ -24,22 +23,17 @@ function Candidate ({ className, address, balance, isPrime, voters }: Props): Re
   const { t } = useTranslation();
 
   return (
-    <tr className={`${className} ${isPrime ? 'council--isPrime' : ''}`}>
+    <tr className={className}>
       <td className='address'>
         <AddressSmall value={address} />
       </td>
-      <td className='council--prime'>
+      <td className='together top padtop'>
         {isPrime && (
-          <div>
-            <Badge
-              hover={t('Prime member')}
-              info={<Icon name='chess king' />}
-              isInline
-              isTooltip
-              type='green'
-            />
-            <span>&nbsp;{t('prime voter')}</span>
-          </div>
+          <Tag
+            color='green'
+            hover={t('Current prime member, default voting')}
+            label={t('prime voter')}
+          />
         )}
       </td>
       <td className='top together right'>
@@ -56,20 +50,4 @@ function Candidate ({ className, address, balance, isPrime, voters }: Props): Re
   );
 }
 
-export default React.memo(styled(Candidate)`
-  &.council--isPrime {
-    td {
-      background-color: rgba(239, 255, 239, 0.8) !important;
-    }
-  }
-
-  .council--prime > div {
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-
-    > span {
-      color: green;
-    }
-  }
-`);
+export default React.memo(Candidate);
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index ecc2871720..3e79d81501 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -79,7 +79,7 @@ function Referendum ({ className, value }: Props): React.ReactElement<Props> | n
           )}
         </Expander>
       </td>
-      <td className='padtop top'>
+      <td className='together top padtop'>
         {isBoolean(isPassing) && (
           <Tag
             color={isPassing ? 'green' : 'red'}
diff --git a/packages/page-society/src/Overview/Member.tsx b/packages/page-society/src/Overview/Member.tsx
index a3b6b67138..d79a267739 100644
--- a/packages/page-society/src/Overview/Member.tsx
+++ b/packages/page-society/src/Overview/Member.tsx
@@ -5,8 +5,7 @@
 import { DeriveSocietyMember } from '@polkadot/api-derive/types';
 
 import React from 'react';
-import styled from 'styled-components';
-import { AddressSmall, Badge, Icon } from '@polkadot/react-components';
+import { AddressSmall, Tag } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
@@ -20,24 +19,20 @@ function Member ({ className, isHead, value: { accountId, strikes } }: Props): R
   const { t } = useTranslation();
 
   return (
-    <tr className={`${className} ${isHead && 'society--isHead'}`}>
+    <tr className={className}>
       <td className='address'>
         <AddressSmall value={accountId} />
       </td>
-      <td className='society--head'>
+      <td className='together top padtop'>
         {isHead && (
-          <div>
-            <Badge
-              hover={t('Current head')}
-              info={<Icon name='chess king' />}
-              isInline
-              isTooltip
-              type='green'
-            />
-            <span>&nbsp;{t('society head')}</span>
-          </div>
+          <Tag
+            color='green'
+            hover={t('Current society head, exempt')}
+            label={t('society head')}
+          />
         )}
       </td>
+      <td className='all'>&nbsp;</td>
       <td className='number top'>
         <label>{t('strikes')}</label>
         {strikes.toString()}
@@ -46,20 +41,4 @@ function Member ({ className, isHead, value: { accountId, strikes } }: Props): R
   );
 }
 
-export default React.memo(styled(Member)`
-  &.society--isHead {
-    td {
-      background-color: rgba(239, 255, 239, 0.8) !important;
-    }
-  }
-
-  .society--head > div {
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-
-    > span {
-      color: green;
-    }
-  }
-`);
+export default React.memo(Member);
diff --git a/packages/page-tech-comm/src/Overview/Members.tsx b/packages/page-tech-comm/src/Overview/Members.tsx
index ee18bf246c..21502eeeca 100644
--- a/packages/page-tech-comm/src/Overview/Members.tsx
+++ b/packages/page-tech-comm/src/Overview/Members.tsx
@@ -5,8 +5,7 @@
 import { AccountId } from '@polkadot/types/interfaces';
 
 import React from 'react';
-import styled from 'styled-components';
-import { AddressSmall, Badge, Icon, Table } from '@polkadot/react-components';
+import { AddressSmall, Table, Tag } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
@@ -25,32 +24,23 @@ function Members ({ className, members, prime }: Props): React.ReactElement<Prop
         ? (
           <Table>
             <Table.Body>
-              {members.map((accountId): React.ReactNode => {
-                const isPrime = prime?.toString() === accountId.toString();
-
-                return (
-                  <tr
-                    className={isPrime ? 'techcomm--isPrime' : ''}
-                    key={accountId.toString()}
-                  >
-                    <td className='all address'>
-                      <AddressSmall value={accountId} />
-                    </td>
-                    <td className='right techcomm--prime'>
-                      {isPrime && (
-                        <div>
-                          <Badge
-                            info={<Icon name='chess king' />}
-                            isInline
-                            type='green'
-                          />
-                          <span>{' '}{t('prime voter')}</span>
-                        </div>
-                      )}
-                    </td>
-                  </tr>
-                );
-              })}
+              {members.map((accountId): React.ReactNode => (
+                <tr key={accountId.toString()}>
+                  <td className='all address'>
+                    <AddressSmall value={accountId} />
+                  </td>
+                  <td className='together top padtop'>
+                    {prime?.eq(accountId) && (
+                      <Tag
+                        color='green'
+                        hover={t('Committee prime member, default voting')}
+                        label={t('prime member')}
+                      />
+                    )}
+                  </td>
+                  <td className='all'>&nbsp;</td>
+                </tr>
+              ))}
             </Table.Body>
           </Table>
         )
@@ -60,17 +50,4 @@ function Members ({ className, members, prime }: Props): React.ReactElement<Prop
   );
 }
 
-export default React.memo(styled(Members)`
-  .techcomm--isPrime td {
-    background: rgba(239, 255, 239, 0.8);
-  }
-  .techcomm--prime > div {
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-
-    > span {
-      color: green;
-    }
-  }
-`);
+export default React.memo(Members);