From 5f7662a60c3e1b591fa2545691d02cfc2ca51dd4 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Tue, 12 Apr 2022 08:48:06 +0200
Subject: [PATCH] Consolidate *--hidden classes (#7359)

* Consolidate *--hidden classes

* Additional
---
 packages/apps/src/Apps.tsx                          |  4 ++++
 packages/page-council/src/index.tsx                 |  9 ++-------
 packages/page-parachains/src/index.tsx              | 11 +++--------
 packages/page-staking/src/Actions/Account/index.tsx |  6 +-----
 packages/page-staking/src/Overview/Summary.tsx      |  2 +-
 packages/page-staking/src/Overview/index.tsx        |  4 ++--
 packages/page-staking/src/index.tsx                 |  8 ++------
 7 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 3a977fa1a7..033d5168fc 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -54,4 +54,8 @@ export default React.memo(styled(Apps)`
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+
+  .--hidden {
+    display: none;
+  }
 `);
diff --git a/packages/page-council/src/index.tsx b/packages/page-council/src/index.tsx
index d110aa6237..88874119a8 100644
--- a/packages/page-council/src/index.tsx
+++ b/packages/page-council/src/index.tsx
@@ -7,7 +7,6 @@ import type { AccountId } from '@polkadot/types/interfaces';
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 import { useLocation } from 'react-router-dom';
-import styled from 'styled-components';
 
 import { Tabs } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
@@ -60,15 +59,11 @@ function CouncilApp ({ basePath, className }: Props): React.ReactElement<Props>
         </Route>
       </Switch>
       <Overview
-        className={[basePath, `${basePath}/candidates`].includes(pathname) ? '' : 'council--hidden'}
+        className={[basePath, `${basePath}/candidates`].includes(pathname) ? '' : '--hidden'}
         prime={prime}
       />
     </main>
   );
 }
 
-export default React.memo(styled(CouncilApp)`
-  .council--hidden {
-    display: none;
-  }
-`);
+export default React.memo(CouncilApp);
diff --git a/packages/page-parachains/src/index.tsx b/packages/page-parachains/src/index.tsx
index 2481dc28c2..c3041e221c 100644
--- a/packages/page-parachains/src/index.tsx
+++ b/packages/page-parachains/src/index.tsx
@@ -8,7 +8,6 @@ import type { ParaId } from '@polkadot/types/interfaces';
 import React, { useRef } from 'react';
 import { Route, Switch } from 'react-router';
 import { useLocation } from 'react-router-dom';
-import styled from 'styled-components';
 
 import { Tabs } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
@@ -100,7 +99,7 @@ function ParachainsApp ({ basePath, className }: Props): React.ReactElement<Prop
       </Switch>
       <Overview
         actionsQueue={actionsQueue}
-        className={pathname === basePath ? '' : 'parachains--hidden'}
+        className={pathname === basePath ? '' : '--hidden'}
         leasePeriod={leasePeriod}
         paraIds={paraIds}
         proposals={proposals}
@@ -108,7 +107,7 @@ function ParachainsApp ({ basePath, className }: Props): React.ReactElement<Prop
       />
       <Parathreads
         actionsQueue={actionsQueue}
-        className={pathname === `${basePath}/parathreads` ? '' : 'parachains--hidden'}
+        className={pathname === `${basePath}/parathreads` ? '' : '--hidden'}
         ids={upcomingIds}
         leasePeriod={leasePeriod}
         ownedIds={ownedIds}
@@ -117,8 +116,4 @@ function ParachainsApp ({ basePath, className }: Props): React.ReactElement<Prop
   );
 }
 
-export default React.memo(styled(ParachainsApp)`
-  .parachains--hidden {
-    display: none;
-  }
-`);
+export default React.memo(ParachainsApp);
diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index c8caa93650..ca7ca8edea 100644
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@@ -386,7 +386,7 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
           </>
         )}
       </td>
-      <td className='hidden'>
+      <td className='--hidden'>
         {isSelectable && controllerId && (
           <Checkbox
             onChange={setSelected}
@@ -404,8 +404,4 @@ export default React.memo(styled(Account)`
     margin-right: 0.25rem;
     vertical-align: inherit;
   }
-
-  .hidden {
-    display: none;
-  }
 `);
diff --git a/packages/page-staking/src/Overview/Summary.tsx b/packages/page-staking/src/Overview/Summary.tsx
index 3ea4fb51e9..32840ae3e1 100644
--- a/packages/page-staking/src/Overview/Summary.tsx
+++ b/packages/page-staking/src/Overview/Summary.tsx
@@ -25,7 +25,7 @@ function Summary ({ className = '', isVisible, stakingOverview, targets: { count
   const { t } = useTranslation();
 
   return (
-    <SummaryBox className={`${className}${!isVisible ? ' staking--hidden' : ''}`}>
+    <SummaryBox className={`${className} ${isVisible ? '' : ' --hidden'}`}>
       <section>
         <CardSummary label={t<string>('validators')}>
           {stakingOverview
diff --git a/packages/page-staking/src/Overview/index.tsx b/packages/page-staking/src/Overview/index.tsx
index 8160c88bb2..26bc62965f 100644
--- a/packages/page-staking/src/Overview/index.tsx
+++ b/packages/page-staking/src/Overview/index.tsx
@@ -77,7 +77,7 @@ function Overview ({ className = '', favorites, hasQueries, minCommission, nomin
         />
       </Button.Group>
       <CurrentList
-        className={intentIndex === 0 ? '' : 'staking--hidden'}
+        className={intentIndex === 0 ? '' : '--hidden'}
         favorites={favorites}
         hasQueries={hasQueries}
         isOwn={isOwn}
@@ -90,7 +90,7 @@ function Overview ({ className = '', favorites, hasQueries, minCommission, nomin
       />
       {intentIndex === 1 && (
         <CurrentList
-          className={intentIndex === 1 ? '' : 'staking--hidden'}
+          className={intentIndex === 1 ? '' : '--hidden'}
           favorites={favorites}
           hasQueries={hasQueries}
           isIntentions
diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx
index 5bb0d73ae8..64993e9697 100644
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@@ -183,7 +183,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
         </Route>
       </Switch>
       <Actions
-        className={pathname === `${basePath}/actions` ? '' : 'staking--hidden'}
+        className={pathname === `${basePath}/actions` ? '' : '--hidden'}
         isInElection={isInElection}
         minCommission={minCommission}
         ownStashes={ownStashes}
@@ -193,7 +193,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
         <ActionsBanner />
       )}
       <Overview
-        className={basePath === pathname ? '' : 'staking--hidden'}
+        className={basePath === pathname ? '' : '--hidden'}
         favorites={favorites}
         hasQueries={hasQueries}
         minCommission={minCommission}
@@ -210,10 +210,6 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
 }
 
 export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => `
-  .staking--hidden {
-    display: none;
-  }
-
   .staking--Chart {
     margin-top: 1.5rem;