Flatten tabs (#4883)

2021-03-21 09:31:43 +01:00 · 2021-03-21 09:31:43 +01:00 · 2d97581b17
commit 2d97581b17
parent 7bfc42ec5a
24 changed files with 107 additions and 150 deletions
--- 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
--- 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
--- 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>
  );
--- 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}
--- 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>
--- 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>
  );
--- 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
--- 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 />
--- 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>
--- 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>
  );
--- 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'
--- 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 />
--- 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>
--- 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>
--- 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')}
--- 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>
  );
--- 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>
--- 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
--- 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}
--- 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>
--- 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>
--- 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
--- 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
--- 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>
  );
 }