From 02bfe4e127f73961b3660acaa3521d4f3e96cc7e Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Sat, 31 Dec 2022 13:01:32 +0200
Subject: [PATCH] Apply split on ranked collective (#8662)

---
 packages/page-ranked/src/Members/Member.tsx   | 23 +++++++++++-----
 packages/page-ranked/src/Members/index.tsx    |  4 +--
 packages/react-components/src/Table/index.tsx | 26 +++++++++----------
 packages/react-components/src/Tag.tsx         | 14 +++++++---
 packages/react-components/src/types.ts        |  2 +-
 5 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/packages/page-ranked/src/Members/Member.tsx b/packages/page-ranked/src/Members/Member.tsx
index 3f47b84f77..c66fba72e6 100644
--- a/packages/page-ranked/src/Members/Member.tsx
+++ b/packages/page-ranked/src/Members/Member.tsx
@@ -5,22 +5,31 @@ import type { Member as MemberType } from '../types';
 
 import React from 'react';
 
-import { AddressSmall } from '@polkadot/react-components';
-import { formatNumber } from '@polkadot/util';
+import { AddressSmall, Tag } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
   value: MemberType;
 }
 
-function Member ({ className, value: { accountId, info } }: Props): React.ReactElement<Props> {
+const COLOR_LST = ['grey', 'grey', 'yellow', 'orange', 'purple', 'blue', 'green', 'black'];
+const COLOR_DEF = COLOR_LST[COLOR_LST.length - 1];
+
+function Member ({ className, value: { accountId, info: { rank } } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <tr className={className}>
-      <td className='address all'>
+      <td className='address all relative'>
         <AddressSmall value={accountId} />
-      </td>
-      <td className='number'>
-        {formatNumber(info.rank)}
+        <Tag
+          className='absolute'
+          color={COLOR_LST[rank.toNumber()] || COLOR_DEF}
+          hover={t<string>('Membership rank')}
+          label={rank.toString()}
+        />
       </td>
     </tr>
   );
diff --git a/packages/page-ranked/src/Members/index.tsx b/packages/page-ranked/src/Members/index.tsx
index 597b02f895..2b510b1b75 100644
--- a/packages/page-ranked/src/Members/index.tsx
+++ b/packages/page-ranked/src/Members/index.tsx
@@ -19,8 +19,7 @@ interface Props {
 function Members ({ className, members }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const headerRef = useRef([
-    [t('members'), 'start'],
-    [t('rank'), 'number']
+    [t('members'), 'start']
   ]);
 
   return (
@@ -30,6 +29,7 @@ function Members ({ className, members }: Props): React.ReactElement<Props> {
         className={className}
         empty={members && t<string>('No members found')}
         header={headerRef.current}
+        isSplit
       >
         {members && members.map((a): React.ReactNode => (
           <Member
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index c0d71d55a0..067eab098c 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@@ -326,7 +326,7 @@ export default React.memo(styled(Table)`
 
         .absolute {
           position: absolute;
-          right: 0;
+          right: 0.5rem;
           top: 0.75rem;
           white-space: nowrap;
         }
@@ -397,26 +397,26 @@ export default React.memo(styled(Table)`
           border-top: 0.125rem solid var(--bg-page);
         }
 
-        td:first-child {
-          border-top-left-radius: 0.25rem;
-        }
+        // td:first-child {
+        //   border-top-left-radius: 0.25rem;
+        // }
 
-        td:last-child {
-          border-top-right-radius: 0.25rem;
-        }
+        // td:last-child {
+        //   border-top-right-radius: 0.25rem;
+        // }
       }
 
       &:last-child {
         td {
           border-bottom: 0.125rem solid var(--border-table);
 
-          &:first-child {
-            border-bottom-left-radius: 0.25rem;
-          }
+          // &:first-child {
+          //   border-bottom-left-radius: 0.25rem;
+          // }
 
-          :last-child {
-            border-bottom-right-radius: 0.25rem;
-          }
+          // &:last-child {
+          //   border-bottom-right-radius: 0.25rem;
+          // }
         }
       }
 
diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx
index 3e5572f2e9..0db5ca9da8 100644
--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@@ -21,15 +21,13 @@ let tagId = 0;
 function Tag ({ className = '', color = 'theme', hover, label, size = 'small' }: Props): React.ReactElement<Props> {
   const { theme } = useContext(ThemeContext as React.Context<ThemeDef>);
   const [trigger] = useState(() => `tag-hover-${Date.now()}-${tagId++}`);
-  const tooltipProps = hover
-    ? { 'data-for': trigger, 'data-tip': true }
-    : {};
 
   return (
     <div
       className={`ui--Tag ${color}Color ${size}Size ${theme}Theme ${className}`}
       color={color || 'grey'}
-      {...tooltipProps}
+      data-for={hover && trigger}
+      data-tip={!!hover}
     >
       {label}
       {hover && (
@@ -59,6 +57,10 @@ export default React.memo(styled(Tag)`
     font-size: .71428571rem;
   }
 
+  &.blackColor {
+    background: #000;
+  }
+
   &.blueColor {
     background: #2185d0;
   }
@@ -79,6 +81,10 @@ export default React.memo(styled(Tag)`
     background: #e03997;
   }
 
+  &.purpleColor {
+    background: #a45ee5;
+  }
+
   &.redColor {
     background: #db2828;
   }
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 6a6e4482b2..6290c52984 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -80,7 +80,7 @@ export interface ThemeProps {
   theme: ThemeDef;
 }
 
-export type FlagColor = 'blue' | 'green' | 'grey' | 'orange' | 'pink' | 'red' | 'yellow' | 'theme';
+export type FlagColor = 'blue' | 'black' | 'green' | 'grey' | 'orange' | 'pink' | 'purple' | 'red' | 'yellow' | 'theme';
 
 export type AccountIdIsh = AccountId | AccountIndex | Address | string | Uint8Array | null;