Consolidate *--hidden classes (#7359)

* Consolidate *--hidden classes

* Additional

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;
+  }
 `);

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

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

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

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

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

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;