From 2d97581b173231db9b3f8dce08a5ac64b18316fa Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 21 Mar 2021 09:31:43 +0100
Subject: [PATCH] Flatten tabs (#4883)

---
 packages/page-accounts/src/index.tsx          | 12 +++++------
 packages/page-addresses/src/index.tsx         | 10 ++++-----
 packages/page-bounties/src/index.tsx          | 10 ++++-----
 packages/page-calendar/src/index.tsx          | 10 ++++-----
 packages/page-claims/src/index.tsx            | 10 ++++-----
 packages/page-contracts/src/index.tsx         | 10 ++++-----
 packages/page-council/src/index.tsx           | 10 ++++-----
 packages/page-democracy/src/index.tsx         | 10 ++++-----
 packages/page-explorer/src/index.tsx          | 12 +++++------
 packages/page-extrinsics/src/index.tsx        | 10 ++++-----
 packages/page-js/src/Playground.tsx           | 10 ++++-----
 packages/page-parachains/src/index.tsx        | 10 ++++-----
 packages/page-poll/src/index.tsx              | 10 ++++-----
 packages/page-rpc/src/index.tsx               | 10 ++++-----
 .../page-settings/src/Metadata/Extensions.tsx |  2 +-
 packages/page-settings/src/index.tsx          | 16 +++++++-------
 packages/page-signing/src/index.tsx           | 10 ++++-----
 packages/page-society/src/index.tsx           | 21 ++++++++-----------
 packages/page-staking/src/index.tsx           | 20 ++++++++----------
 packages/page-storage/src/Selection/index.tsx | 10 ++++-----
 packages/page-sudo/src/index.tsx              | 10 ++++-----
 packages/page-tech-comm/src/index.tsx         | 10 ++++-----
 packages/page-treasury/src/index.tsx          | 10 ++++-----
 packages/react-components/src/Tabs/index.tsx  |  4 ++--
 24 files changed, 107 insertions(+), 150 deletions(-)

diff --git a/packages/page-accounts/src/index.tsx b/packages/page-accounts/src/index.tsx
index 322952109b..a26be813bc 100644
--- a/packages/page-accounts/src/index.tsx
+++ b/packages/page-accounts/src/index.tsx
@@ -39,13 +39,11 @@ function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
   return (
     <main className='accounts--App'>
       <HelpOverlay md={basicMd as string} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          hidden={(hasAccounts && !isIpfs) ? undefined : HIDDEN_ACC}
-          items={tabsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        hidden={(hasAccounts && !isIpfs) ? undefined : HIDDEN_ACC}
+        items={tabsRef.current}
+      />
       <Switch>
         <Route path={`${basePath}/vanity`}>
           <Vanity
diff --git a/packages/page-addresses/src/index.tsx b/packages/page-addresses/src/index.tsx
index 4d373a046c..0de6883115 100644
--- a/packages/page-addresses/src/index.tsx
+++ b/packages/page-addresses/src/index.tsx
@@ -24,12 +24,10 @@ function AddressesApp ({ basePath, onStatusChange }: Props): React.ReactElement<
 
   return (
     <main>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       <Switch>
         <Route>
           <Contacts
diff --git a/packages/page-bounties/src/index.tsx b/packages/page-bounties/src/index.tsx
index 13e9df780f..a39e513724 100644
--- a/packages/page-bounties/src/index.tsx
+++ b/packages/page-bounties/src/index.tsx
@@ -28,12 +28,10 @@ function BountiesApp ({ basePath, className = '' }: Props): React.ReactElement<P
 
   return (
     <main className={`bounties--App ${className}`}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       <Bounties/>
     </main>
   );
diff --git a/packages/page-calendar/src/index.tsx b/packages/page-calendar/src/index.tsx
index 46439e5b0c..3ac79aa3d8 100644
--- a/packages/page-calendar/src/index.tsx
+++ b/packages/page-calendar/src/index.tsx
@@ -116,12 +116,10 @@ function CalendarApp ({ basePath, className }: Props): React.ReactElement<Props>
 
   return (
     <main className={className}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       <div className='calendarFlex'>
         <Month
           hasNextMonth={hasNextMonth}
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index c15ef454f7..bf8b5abcf1 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -187,12 +187,10 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
 
   return (
     <main>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       {!isOldClaimProcess && <Warning />}
       <h1>
         <Trans>Claim your <em>{TokenUnit.abbr}</em> tokens</Trans>
diff --git a/packages/page-contracts/src/index.tsx b/packages/page-contracts/src/index.tsx
index f54f543d9b..c66b87815e 100644
--- a/packages/page-contracts/src/index.tsx
+++ b/packages/page-contracts/src/index.tsx
@@ -25,12 +25,10 @@ function ContractsApp ({ basePath, className = '' }: Props): React.ReactElement<
   return (
     <main className={`contracts--App ${className}`}>
       <HelpOverlay md={introMd as string} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       <Contracts />
     </main>
   );
diff --git a/packages/page-council/src/index.tsx b/packages/page-council/src/index.tsx
index 226dbe9b01..b16d9887d7 100644
--- a/packages/page-council/src/index.tsx
+++ b/packages/page-council/src/index.tsx
@@ -52,12 +52,10 @@ function CouncilApp ({ basePath, className }: Props): React.ReactElement<Props>
 
   return (
     <main className={className}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={items}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={items}
+      />
       <Switch>
         <Route path={`${basePath}/motions`}>
           <Motions
diff --git a/packages/page-democracy/src/index.tsx b/packages/page-democracy/src/index.tsx
index c1bc0e6937..70fa7a5211 100644
--- a/packages/page-democracy/src/index.tsx
+++ b/packages/page-democracy/src/index.tsx
@@ -38,12 +38,10 @@ function DemocracyApp ({ basePath }: Props): React.ReactElement<Props> {
   return (
     <main className='democracy--App'>
       <HelpOverlay md={basicMd as string} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={items}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={items}
+      />
       <Switch>
         <Route path={`${basePath}/dispatch`}>
           <Execute />
diff --git a/packages/page-explorer/src/index.tsx b/packages/page-explorer/src/index.tsx
index 33d40074d0..283ad205f1 100644
--- a/packages/page-explorer/src/index.tsx
+++ b/packages/page-explorer/src/index.tsx
@@ -53,13 +53,11 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props>
 
   return (
     <main className={className}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          hidden={api.query.babe ? undefined : HIDDESN_NOBABE}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        hidden={api.query.babe ? undefined : HIDDESN_NOBABE}
+        items={itemsRef.current}
+      />
       <Switch>
         <Route path={`${basePath}/forks`}><Forks /></Route>
         <Route path={`${basePath}/query/:value`}><BlockInfo /></Route>
diff --git a/packages/page-extrinsics/src/index.tsx b/packages/page-extrinsics/src/index.tsx
index 6687b25095..85267d4a1d 100644
--- a/packages/page-extrinsics/src/index.tsx
+++ b/packages/page-extrinsics/src/index.tsx
@@ -21,12 +21,10 @@ function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
 
   return (
     <main className='extrinsics--App'>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       <Selection />
     </main>
   );
diff --git a/packages/page-js/src/Playground.tsx b/packages/page-js/src/Playground.tsx
index 334623c123..5bf804c747 100644
--- a/packages/page-js/src/Playground.tsx
+++ b/packages/page-js/src/Playground.tsx
@@ -234,12 +234,10 @@ function Playground ({ basePath, className = '' }: Props): React.ReactElement<Pr
 
   return (
     <main className={`js--App ${className}`}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={tabsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={tabsRef.current}
+      />
       <section className='js--Selection'>
         <Dropdown
           className='js--Dropdown'
diff --git a/packages/page-parachains/src/index.tsx b/packages/page-parachains/src/index.tsx
index 0490dbb94a..713cd923d5 100644
--- a/packages/page-parachains/src/index.tsx
+++ b/packages/page-parachains/src/index.tsx
@@ -49,12 +49,10 @@ function ParachainsApp ({ basePath, className }: Props): React.ReactElement<Prop
 
   return (
     <main className={className}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={items}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={items}
+      />
       <Switch>
         <Route path={`${basePath}/auctions`}>
           <Auctions />
diff --git a/packages/page-poll/src/index.tsx b/packages/page-poll/src/index.tsx
index d73ee02102..cc31abb433 100644
--- a/packages/page-poll/src/index.tsx
+++ b/packages/page-poll/src/index.tsx
@@ -96,12 +96,10 @@ function PollApp ({ basePath, className }: Props): React.ReactElement<Props> {
 
   return (
     <main className={className}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       <div className='pollContainer'>
         <div className='pollHeader'>
           <h1>{t('denomination vote')}</h1>
diff --git a/packages/page-rpc/src/index.tsx b/packages/page-rpc/src/index.tsx
index 2753ce0497..57bb9476d6 100644
--- a/packages/page-rpc/src/index.tsx
+++ b/packages/page-rpc/src/index.tsx
@@ -24,12 +24,10 @@ function RpcApp ({ basePath }: Props): React.ReactElement<Props> {
 
   return (
     <main className='toolbox--App'>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       <Switch>
         <Route><Rpc /></Route>
       </Switch>
diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
index 19131948e7..3efd4485c9 100644
--- a/packages/page-settings/src/Metadata/Extensions.tsx
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -57,7 +57,7 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
       {extensions
         ? options.length !== 0 && (
           <>
-            <tr>
+            <tr className='noBorder'>
               <td>
                 <Dropdown
                   label={t<string>('upgradable extensions')}
diff --git a/packages/page-settings/src/index.tsx b/packages/page-settings/src/index.tsx
index 375b243c1e..77a043200e 100644
--- a/packages/page-settings/src/index.tsx
+++ b/packages/page-settings/src/index.tsx
@@ -55,13 +55,11 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
   return (
     <main className='settings--App'>
       <HelpOverlay md={md as string} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          hidden={hidden}
-          items={items}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        hidden={hidden}
+        items={items}
+      />
       <Switch>
         <Route path={`${basePath}/developer`}>
           <Developer
@@ -75,7 +73,9 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
         <Route path={`${basePath}/metadata`}>
           <Metadata />
         </Route>
-        <Route component={General} />
+        <Route>
+          <General />
+        </Route>
       </Switch>
     </main>
   );
diff --git a/packages/page-signing/src/index.tsx b/packages/page-signing/src/index.tsx
index bc93afad61..8336c10318 100644
--- a/packages/page-signing/src/index.tsx
+++ b/packages/page-signing/src/index.tsx
@@ -34,12 +34,10 @@ function SigningApp ({ basePath }: Props): React.ReactElement<Props> {
 
   return (
     <main className='toolbox--App'>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       <Switch>
         <Route path={`${basePath}/hash`}><Hash /></Route>
         <Route path={`${basePath}/verify`}><Verify /></Route>
diff --git a/packages/page-society/src/index.tsx b/packages/page-society/src/index.tsx
index 6d25e59b0e..80dfaba67d 100644
--- a/packages/page-society/src/index.tsx
+++ b/packages/page-society/src/index.tsx
@@ -37,7 +37,7 @@ function strikeSort (a: MapMember, b: MapMember): number {
         : 0;
 }
 
-function secondarySort (a: MapMember, b: MapMember): number {
+function voterSort (a: MapMember, b: MapMember): number {
   const isVoterA = a.isCandidateVoter || a.member.isDefenderVoter;
   const isVoterB = b.isCandidateVoter || b.member.isDefenderVoter;
 
@@ -60,7 +60,7 @@ function finalSort (a: MapMember, b: MapMember): number {
         : b.isFounder
           ? 1
           : a.isSkeptic && b.isSkeptic
-            ? secondarySort(a, b)
+            ? voterSort(a, b)
             : a.isSkeptic
               ? -1
               : b.isSkeptic
@@ -81,7 +81,7 @@ function getMapMembers (members: DeriveSocietyMember[], skeptics: string[], vote
       member
     }))
     .sort(({ member: a }, { member: b }) => (b.payouts.length - a.payouts.length) || b.strikes.cmp(a.strikes))
-    .sort(secondarySort)
+    .sort(voterSort)
     .sort(finalSort);
 }
 
@@ -95,9 +95,8 @@ 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))
-      : undefined,
+    () => members && info && skeptics && voters &&
+      getMapMembers(members, skeptics, voters, info, api.consts.society.maxStrikes.mul(BN_TWO).div(BN_THREE)),
     [api, info, members, skeptics, voters]
   );
 
@@ -120,12 +119,10 @@ function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props>
 
   return (
     <main className={className}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={items}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={items}
+      />
       <Switch>
         <Route path={`${basePath}/candidates`}>
           <Candidates
diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx
index 9f47122ddd..b76b055eac 100644
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@@ -100,17 +100,15 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
   return (
     <main className={`staking--App ${className}`}>
       <HelpOverlay md={basicMd as string} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          hidden={
-            hasAccounts
-              ? undefined
-              : HIDDEN_ACC
-          }
-          items={items}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        hidden={
+          hasAccounts
+            ? undefined
+            : HIDDEN_ACC
+        }
+        items={items}
+      />
       <Summary
         isVisible={pathname === basePath}
         stakingOverview={stakingOverview}
diff --git a/packages/page-storage/src/Selection/index.tsx b/packages/page-storage/src/Selection/index.tsx
index c12e111f59..15aa50e1f1 100644
--- a/packages/page-storage/src/Selection/index.tsx
+++ b/packages/page-storage/src/Selection/index.tsx
@@ -46,12 +46,10 @@ function Selection ({ basePath, onAdd }: Props): React.ReactElement<Props> {
 
   return (
     <>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       <Switch>
         <Route path={`${basePath}/constants`}><Consts onAdd={_onAdd} /></Route>
         <Route path={`${basePath}/raw`}><Raw onAdd={_onAdd} /></Route>
diff --git a/packages/page-sudo/src/index.tsx b/packages/page-sudo/src/index.tsx
index 747b3ad7b7..866cd4e2e7 100644
--- a/packages/page-sudo/src/index.tsx
+++ b/packages/page-sudo/src/index.tsx
@@ -31,12 +31,10 @@ function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
 
   return (
     <main>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={itemsRef.current}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={itemsRef.current}
+      />
       {hasSudoKey
         ? (
           <Switch>
diff --git a/packages/page-tech-comm/src/index.tsx b/packages/page-tech-comm/src/index.tsx
index 7489eac8cf..d89bcda20e 100644
--- a/packages/page-tech-comm/src/index.tsx
+++ b/packages/page-tech-comm/src/index.tsx
@@ -46,12 +46,10 @@ function TechCommApp ({ basePath, className }: Props): React.ReactElement<Props>
 
   return (
     <main className={className}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={items}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={items}
+      />
       <Switch>
         <Route path={`${basePath}/proposals`}>
           <Proposals
diff --git a/packages/page-treasury/src/index.tsx b/packages/page-treasury/src/index.tsx
index 04e152161d..b2b0a2a79e 100644
--- a/packages/page-treasury/src/index.tsx
+++ b/packages/page-treasury/src/index.tsx
@@ -52,12 +52,10 @@ function TreasuryApp ({ basePath }: Props): React.ReactElement<Props> {
   return (
     <main className='treasury--App'>
       <HelpOverlay md={basicMd as string} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={items}
-        />
-      </header>
+      <Tabs
+        basePath={basePath}
+        items={items}
+      />
       <Switch>
         <Route path={`${basePath}/tips`}>
           <Tips
diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx
index d5cc400cde..df7aea57be 100644
--- a/packages/react-components/src/Tabs/index.tsx
+++ b/packages/react-components/src/Tabs/index.tsx
@@ -41,7 +41,7 @@ function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactE
     : items;
 
   return (
-    <div className={`ui--Tabs ${className}`}>
+    <header className={`ui--Tabs ${className}`}>
       <div className='tabs-container'>
         {filtered.map((tab, index) => (
           <Tab
@@ -52,7 +52,7 @@ function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactE
           />
         ))}
       </div>
-    </div>
+    </header>
   );
 }