Small rework of styled (to bottom) (#1310)

* Small rework of styled (to bottom)

* Add isRoot to council

packages/app-123code/src/AccountSelector.tsx

@@ -8,6 +8,7 @@ import { Bubble, InputAddress } from '@polkadot/ui-app';
 import { AccountIndex, Balance, Nonce } from '@polkadot/ui-reactive';
 
 type Props = {
+  className?: string,
   onChange: (accountId?: string) => void
 };
 
@@ -15,22 +16,15 @@ type State = {
   accountId?: string
 };
 
-const Wrapper = styled.section`
-  align-items: flex-end;
-
-  .summary {
-    text-align: center;
-  }
-`;
-
-export default class AccountSelector extends React.PureComponent<Props, State> {
+class AccountSelector extends React.PureComponent<Props, State> {
   state: State = {};
 
   render () {
+    const { className } = this.props;
     const { accountId } = this.state;
 
     return (
-      <Wrapper className='template--AccountSelector ui--row'>
+      <section className={`template--AccountSelector ui--row ${className}`}>
         <InputAddress
           className='medium'
           label='my default account'
@@ -48,7 +42,7 @@ export default class AccountSelector extends React.PureComponent<Props, State> {
             <Nonce params={accountId} />
           </Bubble>
         </div>
-      </Wrapper>
+      </section>
     );
   }
 
@@ -60,3 +54,11 @@ export default class AccountSelector extends React.PureComponent<Props, State> {
     );
   }
 }
+
+export default styled(AccountSelector)`
+  align-items: flex-end;
+
+  .summary {
+    text-align: center;
+  }
+`;

packages/app-123code/src/Summary.tsx

@@ -11,22 +11,22 @@ type Props = BareProps & {
   children: React.ReactNode
 };
 
-const Wrapper = styled.div`
-  opacity: 0.5;
-  padding: 1rem 1.5rem;
-`;
-
-export default class Summary extends React.PureComponent<Props> {
+class Summary extends React.PureComponent<Props> {
   render () {
     const { children, className, style } = this.props;
 
     return (
-      <Wrapper
+      <div
         className={className}
         style={style}
       >
         {children}
-      </Wrapper>
+      </div>
     );
   }
 }
+
+export default styled(Summary)`
+  opacity: 0.5;
+  padding: 1rem 1.5rem;
+`;

packages/app-accounts/src/Vanity/Match.tsx

@@ -22,7 +22,69 @@ type State = {
   hexSeed: string
 };
 
-const Wrapper = styled.div`
+class Match extends React.PureComponent<Props, State> {
+  state: State = {} as State;
+
+  static getDerivedStateFromProps ({ seed }: Props): State {
+    return {
+      hexSeed: u8aToHex(seed)
+    };
+  }
+
+  render () {
+    const { address, className, count, offset } = this.props;
+    const { hexSeed } = this.state;
+
+    return (
+      <div className={className}>
+        <div className='vanity--Match-item'>
+          <IdentityIcon
+            className='vanity--Match-icon'
+            size={48}
+            value={address}
+          />
+          <div className='vanity--Match-data'>
+            <div className='vanity--Match-addr'>
+              <span className='no'>{address.slice(0, offset)}</span><span className='yes'>{address.slice(offset, count + offset)}</span><span className='no'>{address.slice(count + offset)}</span>
+            </div>
+            <div className='vanity--Match-seed'>
+              {hexSeed}
+            </div>
+          </div>
+          <div className='vanity--Match-buttons'>
+            <Button
+              icon='plus'
+              isPrimary
+              onClick={this.onCreate}
+              size='tiny'
+            />
+            <Button
+              icon='close'
+              isNegative
+              onClick={this.onRemove}
+              size='tiny'
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private onCreate = (): void => {
+    const { onCreateToggle } = this.props;
+    const { hexSeed } = this.state;
+
+    onCreateToggle(hexSeed);
+  }
+
+  private onRemove = (): void => {
+    const { address, onRemove } = this.props;
+
+    onRemove(address);
+  }
+}
+
+export default styled(Match as React.ComponentClass<Props>)`
   text-align: center;
 
   &:hover {
@@ -62,65 +124,3 @@ const Wrapper = styled.div`
     padding: 0 1rem;
   }
 `;
-
-export default class Match extends React.PureComponent<Props, State> {
-  state: State = {} as State;
-
-  static getDerivedStateFromProps ({ seed }: Props): State {
-    return {
-      hexSeed: u8aToHex(seed)
-    };
-  }
-
-  render () {
-    const { address, count, offset } = this.props;
-    const { hexSeed } = this.state;
-
-    return (
-      <Wrapper>
-        <div className='vanity--Match-item'>
-          <IdentityIcon
-            className='vanity--Match-icon'
-            size={48}
-            value={address}
-          />
-          <div className='vanity--Match-data'>
-            <div className='vanity--Match-addr'>
-              <span className='no'>{address.slice(0, offset)}</span><span className='yes'>{address.slice(offset, count + offset)}</span><span className='no'>{address.slice(count + offset)}</span>
-            </div>
-            <div className='vanity--Match-seed'>
-              {hexSeed}
-            </div>
-          </div>
-          <div className='vanity--Match-buttons'>
-            <Button
-              icon='plus'
-              isPrimary
-              onClick={this.onCreate}
-              size='tiny'
-            />
-            <Button
-              icon='close'
-              isNegative
-              onClick={this.onRemove}
-              size='tiny'
-            />
-          </div>
-        </div>
-      </Wrapper>
-    );
-  }
-
-  private onCreate = (): void => {
-    const { onCreateToggle } = this.props;
-    const { hexSeed } = this.state;
-
-    onCreateToggle(hexSeed);
-  }
-
-  private onRemove = (): void => {
-    const { address, onRemove } = this.props;
-
-    onRemove(address);
-  }
-}

packages/app-accounts/src/Vanity/index.tsx

@@ -41,18 +41,6 @@ const BOOL_OPTIONS = [
   { text: 'Yes', value: true }
 ];
 
-const Wrapper = styled.div`
-  .vanity--App-matches {
-    padding: 1em 0;
-  }
-
-  .vanity--App-stats {
-    padding: 1em 0 0 0;
-    opacity: 0.45;
-    text-align: center;
-  }
-`;
-
 class VanityApp extends TxComponent<Props, State> {
   results: Array<Generator$Result> = [];
   state: State = {
@@ -76,11 +64,11 @@ class VanityApp extends TxComponent<Props, State> {
   }
 
   render () {
-    const { onStatusChange } = this.props;
+    const { className, onStatusChange } = this.props;
     const { createSeed, type } = this.state;
 
     return (
-      <Wrapper>
+      <div className={className}>
         {this.renderOptions()}
         {this.renderButtons()}
         {this.renderStats()}
@@ -93,7 +81,7 @@ class VanityApp extends TxComponent<Props, State> {
             type={type}
           />
         )}
-      </Wrapper>
+      </div>
     );
   }
 
@@ -316,4 +304,14 @@ class VanityApp extends TxComponent<Props, State> {
   }
 }
 
-export default translate(VanityApp);
+export default translate(styled(VanityApp)`
+  .vanity--App-matches {
+    padding: 1em 0;
+  }
+
+  .vanity--App-stats {
+    padding: 1em 0 0 0;
+    opacity: 0.45;
+    text-align: center;
+  }
+`);

packages/app-council/src/index.tsx

@@ -27,6 +27,7 @@ class App extends React.PureComponent<Props, State> {
     this.state = {
       tabs: [
         {
+          isRoot: true,
           name: 'overview',
           text: t('Council overview')
         }

packages/app-dashboard/src/Entry.tsx

@@ -16,18 +16,12 @@ type Props = I18nProps & {
   route: Route
 };
 
-const Wrapper = styled.div`
-  .name {
-    margin-top: 0.75rem;
-  }
-`;
-
 class Entry extends React.PureComponent<Props> {
   render () {
-    const { route: { i18n, icon, name }, t } = this.props;
+    const { className, route: { i18n, icon, name }, t } = this.props;
 
     return (
-      <Wrapper>
+      <div className={className}>
         <Link to={`/${name}`}>
           <Icon
             name={icon}
@@ -37,9 +31,13 @@ class Entry extends React.PureComponent<Props> {
             {t(`entry.${name}`, i18n)}
           </div>
         </Link>
-      </Wrapper>
+      </div>
     );
   }
 }
 
-export default translate(Entry);
+export default translate(styled(Entry)`
+  .name {
+    margin-top: 0.75rem;
+  }
+`);

packages/app-dashboard/src/index.tsx

@@ -12,27 +12,15 @@ import routing from '@polkadot/apps-routing';
 import Entry from './Entry';
 import Spacer from './Spacer';
 
-type Props = AppProps;
+type Props = AppProps & {
+  className?: string;
+};
+
 type State = {
   routes: Array<Route>
 };
 
-const Wrapper = styled.main`
-  .routes {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-
-    > div {
-      flex: 1;
-      padding: 1.5rem;
-      text-align: center;
-    }
-  }
-`;
-
-export default class App extends React.PureComponent<Props, State> {
+class App extends React.PureComponent<Props, State> {
   // FIXME Atm we are not applying all the logic around should this be hidden or not, i.e.
   // is the api available, are there accounts, etc. (That logic should also be extracted so
   // it can be used in a proper way here)
@@ -43,15 +31,16 @@ export default class App extends React.PureComponent<Props, State> {
   };
 
   render () {
+    const { className } = this.props;
     const { routes } = this.state;
 
     return (
-      <Wrapper>
+      <main className={className}>
         <div className='routes'>
           {routes.map(this.renderEntry)}
           {routes.map(this.renderSpacer)}
         </div>
-      </Wrapper>
+      </main>
     );
   }
 
@@ -74,3 +63,18 @@ export default class App extends React.PureComponent<Props, State> {
     );
   }
 }
+
+export default styled(App)`
+  .routes {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > div {
+      flex: 1;
+      padding: 1.5rem;
+      text-align: center;
+    }
+  }
+`;

packages/app-explorer/src/index.tsx

@@ -33,12 +33,6 @@ type State = {
   recentEvents: Array<KeyedEvent>;
 };
 
-const Wrapper = styled.main`
-  .rx--updated {
-    background: transparent !important;
-  }
-`;
-
 class ExplorerApp extends React.Component<Props, State> {
   constructor (props: Props) {
     super(props);
@@ -90,14 +84,14 @@ class ExplorerApp extends React.Component<Props, State> {
   }
 
   render () {
-    const { basePath } = this.props;
+    const { basePath, className } = this.props;
     const { items } = this.state;
     const hidden = uiSettings.uiMode === 'full'
       ? []
       : ['node'];
 
     return (
-      <Wrapper>
+      <main className={className}>
         <header>
           <Tabs
             basePath={basePath}
@@ -111,7 +105,7 @@ class ExplorerApp extends React.Component<Props, State> {
           <Route path={`${basePath}/node`} component={NodeInfo} />
           <Route component={this.renderMain} />
         </Switch>
-      </Wrapper>
+      </main>
     );
   }
 
@@ -125,7 +119,11 @@ class ExplorerApp extends React.Component<Props, State> {
 }
 
 export default withMulti(
-  ExplorerApp,
+  styled(ExplorerApp as React.ComponentClass<Props>)`
+    .rx--updated {
+      background: transparent !important;
+    }
+  `,
   translate,
   withCalls<Props>('query.system.events')
 );

packages/app-settings/src/Developer.tsx

@@ -26,13 +26,6 @@ type State = {
   typesPlaceholder?: string
 };
 
-const Wrapper = styled.div`
-  .editor {
-    height: 300px;
-    position: relative;
-  }
-`;
-
 class Developer extends React.PureComponent<Props, State> {
   private defaultCode: string = `{\n\n}`;
 
@@ -54,12 +47,12 @@ class Developer extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { t } = this.props;
+    const { className, t } = this.props;
     const { code, isJsonValid, isTypesValid, types, typesPlaceholder } = this.state;
     const typesHasNoEntries = Object.keys(types).length === 0;
 
     return (
-      <Wrapper>
+      <div className={className}>
         <div className='ui--row'>
           <div className='full'>
             <InputFile
@@ -102,7 +95,7 @@ class Developer extends React.PureComponent<Props, State> {
             label={t('Save')}
           />
         </Button.Group>
-      </Wrapper>
+      </div>
     );
   }
 
@@ -196,4 +189,9 @@ class Developer extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(Developer);
+export default translate(styled(Developer)`
+  .editor {
+    height: 300px;
+    position: relative;
+  }
+`);

packages/app-staking/src/Actions/Accounts.tsx

@@ -23,24 +23,18 @@ type State = {
   isNewStakeOpen: boolean
 };
 
-const Wrapper = styled(CardGrid) `
-.ui--CardGrid-buttons {
-  text-align: right;
-}
-`;
-
 class Accounts extends React.PureComponent<Props,State> {
   state: State = {
     isNewStakeOpen: false
   };
 
   render () {
-    const { recentlyOffline, t } = this.props;
+    const { className, recentlyOffline, t } = this.props;
     const accounts = keyring.getAccounts();
     const stashOptions = this.getStashOptions();
 
     return (
-      <Wrapper
+      <CardGrid
         buttons={
           <Button
             isPrimary
@@ -54,6 +48,7 @@ class Accounts extends React.PureComponent<Props,State> {
             onClick={this.toggleNewStake}
           />
         }
+        className={className}
       >
         {this.renderNewStake()}
         {accounts.map(({ address }, index) => (
@@ -64,7 +59,7 @@ class Accounts extends React.PureComponent<Props,State> {
             stashOptions={stashOptions}
           />
         ))}
-      </Wrapper>
+      </CardGrid>
     );
   }
 
@@ -97,4 +92,8 @@ class Accounts extends React.PureComponent<Props,State> {
   }
 }
 
-export default translate(Accounts);
+export default translate(styled(Accounts)`
+  .ui--CardGrid-buttons {
+    text-align: right;
+  }
+`);

packages/app-sudo/src/SetKey.tsx

@@ -114,4 +114,5 @@ class SetKey extends React.PureComponent<Props, State> {
     );
   }
 }
+
 export default translate(SetKey);

packages/app-toolbox/src/Rpc/Account.tsx

@@ -23,11 +23,6 @@ type State = {
   accountId?: string | null
 };
 
-const Wrapper = styled.div`
-  box-sizing: border-box;
-  padding-left: 2em;
-`;
-
 class Account extends React.PureComponent<Props, State> {
   state: State;
 
@@ -41,10 +36,10 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { defaultValue, isError, t } = this.props;
+    const { className, defaultValue, isError, t } = this.props;
 
     return (
-      <Wrapper className='ui--row'>
+      <div className={`ui--row ${className}`}>
         <div className='large'>
           <InputAddress
             defaultValue={defaultValue}
@@ -56,7 +51,7 @@ class Account extends React.PureComponent<Props, State> {
           />
         </div>
         {this.renderNonce()}
-      </Wrapper>
+      </div>
     );
   }
 
@@ -100,4 +95,7 @@ class Account extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(Account);
+export default translate(styled(Account)`
+  box-sizing: border-box;
+  padding-left: 2em;
+`);