Apply split on ranked collective (#8662)

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>
   );

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

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;
+          // }
         }
       }
 

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;
   }

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;