Additional syled-component conversions (#1265)

* Additional syled-component conversions

* Small updates

* Providers to index

* Cleanup linting

packages/app-accounts/src/index.css

@@ -1,7 +0,0 @@
-/* Copyright 2017-2019 @polkadot/app-accounts authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.accounts--Creator-advanced {
-  margin-top: 1rem;
-}

packages/app-accounts/src/index.tsx

@@ -13,8 +13,6 @@ import { HelpOverlay, Tabs } from '@polkadot/ui-app';
 import { TabItem } from '@polkadot/ui-app/Tabs';
 import { withMulti, withObservable } from '@polkadot/ui-api';
 
-import './index.css';
-
 import basicMd from './md/basic.md';
 import Overview from './Overview';
 import translate from './translate';

packages/app-accounts/src/modals/Create.tsx

@@ -10,6 +10,7 @@ import { ModalProps } from '../types';
 
 import FileSaver from 'file-saver';
 import React from 'react';
+import styled from 'styled-components';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
 import { withApi, withMulti } from '@polkadot/ui-api';
 import { AddressRow, Button, Dropdown, Input, InputTags, Labelled, Modal, Password } from '@polkadot/ui-app';
@@ -109,10 +110,11 @@ class Create extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { t } = this.props;
+    const { className, t } = this.props;
 
     return (
       <Modal
+        className={className}
         dimmer='inverted'
         open
       >
@@ -452,7 +454,11 @@ class Create extends React.PureComponent<Props, State> {
 }
 
 export default withMulti(
-  Create,
+  styled(Create)`
+    .accounts--Creator-advanced {
+      margin-top: 1rem;
+    }
+  `,
   translate,
   withApi
 );

packages/app-address-book/src/index.css

@@ -1,7 +0,0 @@
-/* Copyright 2017-2019 @polkadot/app-address-book authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.forgetting-Address {
-  text-align: center;
-}

packages/app-address-book/src/index.tsx

@@ -6,8 +6,6 @@ import { AppProps, I18nProps } from '@polkadot/ui-app/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import { ComponentProps } from './types';
 
-import './index.css';
-
 import React from 'react';
 import { Route, Switch } from 'react-router';
 import addressObservable from '@polkadot/ui-keyring/observable/addresses';

packages/app-address-book/src/modals/Forgetting.tsx

@@ -67,7 +67,7 @@ class Forgetting extends React.PureComponent<Props> {
       : undefined;
 
     return (
-      <Modal.Content className='forgetting-Address'>
+      <Modal.Content>
         <AddressRow
           isInline
           value={address || ''}

packages/app-storage/src/Query.tsx

@@ -7,10 +7,11 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { QueryTypes, StorageModuleQuery } from './types';
 
 import React from 'react';
+import styled from 'styled-components';
 import { Compact } from '@polkadot/types';
 import { Button, Labelled } from '@polkadot/ui-app';
-import valueToText from '@polkadot/ui-params/valueToText';
 import { withCallDiv } from '@polkadot/ui-api';
+import valueToText from '@polkadot/ui-params/valueToText';
 import { isU8a, u8aToHex, u8aToString } from '@polkadot/util';
 
 import translate from './translate';
@@ -84,7 +85,7 @@ class Query extends React.PureComponent<Props, State> {
     };
   }
 
-  static getDerivedStateFromProps ({ value }: Props): State | null {
+  static getDerivedStateFromProps ({ value }: Props) {
     const Component = Query.getCachedComponent(value).Component;
     const inputs: Array<React.ReactNode> = isU8a(value.key)
       ? []
@@ -104,7 +105,7 @@ class Query extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { value } = this.props;
+    const { className, value } = this.props;
     const { Component } = this.state;
     const { key } = value;
     const type = isU8a(key)
@@ -116,7 +117,7 @@ class Query extends React.PureComponent<Props, State> {
       );
 
     return (
-      <div className='storage--Query storage--actionrow'>
+      <div className={`storage--Query storage--actionrow ${className}`}>
         <div className='storage--actionrow-value'>
           <Labelled
             label={
@@ -206,4 +207,16 @@ class Query extends React.PureComponent<Props, State> {
   }
 }
 
-export default translate(Query);
+export default translate(styled(Query as React.ComponentClass<Props>)`
+  margin-bottom: 0.25em;
+
+  .ui.disabled.dropdown.selection {
+    color: #aaa;
+    opacity: 1;
+  }
+
+  .ui--IdentityIcon {
+    margin: -10px 0;
+    vertical-align: middle;
+  }
+`);

packages/app-storage/src/index.css

@@ -2,20 +2,6 @@
 /* This software may be modified and distributed under the terms
 /* of the Apache-2.0 license. See the LICENSE file for details. */
 
-.storage--Query {
-  margin-bottom: 0.25em;
-
-  .ui.disabled.dropdown.selection {
-    color: #aaa;
-    opacity: 1;
-  }
-
-  .ui--IdentityIcon {
-    margin: -10px 0;
-    vertical-align: middle;
-  }
-}
-
 .storage--actionrow {
   align-items: center;
   display: flex;

packages/apps/src/Apps.tsx

@@ -10,7 +10,7 @@ import { BareProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
 import store from 'store';
-import styled, { ThemeProvider } from 'styled-components';
+import styled from 'styled-components';
 import { media } from '@polkadot/ui-app';
 import Signer from '@polkadot/ui-signer';
 import settings from '@polkadot/ui-settings';
@@ -30,23 +30,7 @@ type State = {
   transition: SideBarTransition
 };
 
-const Wrapper = styled.div`
-  align-items: stretch;
-  box-sizing: border-box;
-  display: flex;
-  min-height: 100vh;
-
-  header {
-    margin-bottom: 1.4rem;
-    text-align: center;
-
-    ${media.TABLET`
-      margin-bottom: 2rem;
-   `}
-  }
-`;
-
-export default class Apps extends React.Component<Props, State> {
+class Apps extends React.Component<Props, State> {
   state: State;
 
   constructor (props: Props) {
@@ -74,26 +58,25 @@ export default class Apps extends React.Component<Props, State> {
   }
 
   render () {
+    const { className } = this.props;
     const { isCollapsed, isMenu, menuOpen } = this.state;
 
     return (
-      <ThemeProvider theme={{ theme: settings.uiTheme }}>
-        <Wrapper className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu ? 'fixed' : ''} ${menuOpen ? 'menu-open' : ''} theme--${settings.uiTheme}`}>
-          {this.renderMenuBg()}
-          <SideBar
-            collapse={this.collapse}
-            handleResize={this.handleResize}
-            menuOpen={menuOpen}
-            isCollapsed={isCollapsed}
-            toggleMenu={this.toggleMenu}
-          />
-          <Signer>
-            <Content />
-          </Signer>
-          <ConnectingOverlay />
-          <AccountsOverlay />
-        </Wrapper>
-      </ThemeProvider>
+      <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--${settings.uiTheme} ${className}`}>
+        {this.renderMenuBg()}
+        <SideBar
+          collapse={this.collapse}
+          handleResize={this.handleResize}
+          menuOpen={menuOpen}
+          isCollapsed={isCollapsed}
+          toggleMenu={this.toggleMenu}
+        />
+        <Signer>
+          <Content />
+        </Signer>
+        <ConnectingOverlay />
+        <AccountsOverlay />
+      </div>
     );
   }
 
@@ -193,3 +176,19 @@ export default class Apps extends React.Component<Props, State> {
     }
   }
 }
+
+export default styled(Apps)`
+  align-items: stretch;
+  box-sizing: border-box;
+  display: flex;
+  min-height: 100vh;
+
+  header {
+    margin-bottom: 1.4rem;
+    text-align: center;
+
+    ${media.TABLET`
+      margin-bottom: 2rem;
+   `}
+  }
+`;

packages/apps/src/index.tsx

@@ -2,7 +2,9 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+// import first, get the load done
 import settings from '@polkadot/ui-settings';
+
 import '@polkadot/ui-app/i18n';
 import '@polkadot/ui-app/styles';
 
@@ -10,11 +12,12 @@ import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter } from 'react-router-dom';
 import store from 'store';
+import { ThemeProvider } from 'styled-components';
 import { getTypeRegistry } from '@polkadot/types';
 import { Api } from '@polkadot/ui-api';
-
 import { QueueConsumer } from '@polkadot/ui-app/Status/Context';
 import Queue from '@polkadot/ui-app/Status/Queue';
+
 import Apps from './Apps';
 
 const rootId = 'root';
@@ -39,6 +42,10 @@ try {
   console.error('Type registration failed', error);
 }
 
+const theme = {
+  theme: settings.uiTheme
+};
+
 ReactDOM.render(
   <Suspense fallback='...'>
     <Queue>
@@ -50,7 +57,9 @@ ReactDOM.render(
             url={url}
           >
             <HashRouter>
-              <Apps />
+              <ThemeProvider theme={theme}>
+                <Apps />
+              </ThemeProvider>
             </HashRouter>
           </Api>
         )}

packages/ui-app/src/Button/Button.css

@@ -2,19 +2,7 @@
 /* This software may be modified and distributed under the terms
 /* of the Apache-2.0 license. See the LICENSE file for details. */
 
-.ui--Button-Group {
-  text-align: right;
-
-  &.centered {
-    margin-bottom: 0.5rem;
-    text-align: center;
-  }
-}
-
-.ui--Button-Group:not(:first-child) {
-  margin-top: 0.75rem;
-}
-
+/* not sure where, why... */
 br+.ui--Button-Group {
   margin-top: 0;
 }

packages/ui-app/src/Button/Group.tsx

@@ -6,6 +6,7 @@ import { GroupProps, GroupType } from './types';
 
 import React from 'react';
 import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
+import styled from 'styled-components';
 
 import { classes } from '../util';
 import Divider from './Divider';
@@ -34,4 +35,15 @@ class ButtonGroup extends React.PureComponent<GroupProps> {
 
 (ButtonGroup as GroupType).Divider = Divider;
 
-export default (ButtonGroup as GroupType);
+export default styled(ButtonGroup)`
+  text-align: right;
+
+  :not(:first-child) {
+    margin-top: 0.75rem;
+  }
+
+  &.centered {
+    margin-bottom: 0.5rem;
+    text-align: center;
+  }
+` as any as GroupType;

packages/ui-app/src/Editor.tsx

@@ -4,11 +4,10 @@
 
 import { BareProps } from '@polkadot/ui-app/types';
 
-import React from 'react';
-import { classes } from '@polkadot/ui-app/util';
 import CodeFlask from 'codeflask';
-
-import './style.css';
+import React from 'react';
+import styled from 'styled-components';
+import { classes } from '@polkadot/ui-app/util';
 
 type Props = BareProps & {
   code: string,
@@ -35,8 +34,7 @@ type Props = BareProps & {
  *  />
  * ```
  */
-
-export default class Editor extends React.Component<Props> {
+class Editor extends React.Component<Props> {
   private id: string = `flask-${Date.now()}`;
   private editor: any;
 
@@ -70,9 +68,23 @@ export default class Editor extends React.Component<Props> {
 
     return (
       <div
-        className={classes('ui-app-editor', className, isValid === false ? 'invalid' : '')}
+        className={classes('ui-Editor', className, isValid === false ? 'invalid' : '')}
         id={this.id}
       />
     );
   }
 }
+
+export default styled(Editor)`
+  .codeflask {
+    border: 1px solid rgba(34,36,38,.15);
+    background: transparent;
+  }
+
+  &.invalid {
+    .codeflask {
+      background-color: #fff6f6;
+      border-color: #e0b4b4;
+    }
+  }
+`;

packages/ui-app/src/Editor/style.css

@@ -1,13 +0,0 @@
-.ui-app-editor {
-  .codeflask {
-    border: 1px solid rgba(34,36,38,.15);
-    background: transparent;
-  }
-
-  &.invalid {
-    .codeflask {
-      background-color: #fff6f6;
-      border-color: #e0b4b4;
-    }
-  }
-}

packages/ui-app/src/InputAddress.tsx

@@ -3,20 +3,19 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { KeyringOptions, KeyringSectionOption, KeyringSectionOptions, KeyringOption$Type } from '@polkadot/ui-keyring/options/types';
-import { BareProps } from '../types';
-
-import './InputAddress.css';
+import { BareProps } from './types';
 
 import React from 'react';
 import store from 'store';
+import styled from 'styled-components';
 import keyring from '@polkadot/ui-keyring';
 import keyringOption from '@polkadot/ui-keyring/options';
 import createItem from '@polkadot/ui-keyring/options/item';
 import { withMulti, withObservable } from '@polkadot/ui-api';
 
-import Dropdown from '../Dropdown';
-import { classes, getAddrName } from '../util';
-import addressToAddress from '../util/toAddress';
+import Dropdown from './Dropdown';
+import { classes, getAddrName } from './util';
+import addressToAddress from './util/toAddress';
 
 type Props = BareProps & {
   defaultValue?: string | null,
@@ -151,7 +150,7 @@ class InputAddress extends React.PureComponent<Props, State> {
 
     return (
       <Dropdown
-        className={classes('ui--InputAddress', hideAddress ? 'flag--hideAddress' : '', className)}
+        className={classes('ui--InputAddress', hideAddress && 'hideAddress', className)}
         defaultValue={
           isMultiple || (value !== undefined)
             ? undefined
@@ -283,6 +282,19 @@ class InputAddress extends React.PureComponent<Props, State> {
 export { InputAddress };
 
 export default withMulti(
-  InputAddress,
+  styled(InputAddress)`
+    .ui.dropdown .text {
+      width: 100%;
+    }
+
+    .ui.search.selection.dropdown > input.search {
+      padding-left: 4rem;
+    }
+
+    &.hideAddress .ui--KeyPair .ui--KeyPair-address {
+      flex: 0;
+      max-width: 0;
+    }
+  `,
   withObservable(keyringOption.optionsSubject, { propName: 'optionsAll' })
 );

packages/ui-app/src/InputAddress/InputAddress.css

@@ -1,18 +0,0 @@
-/* Copyright 2017-2019 @polkadot/ui-app authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.ui--InputAddress {}
-
-.ui--InputAddress .ui.dropdown .text {
-  width: 100%;
-}
-
-.ui--InputAddress .ui.search.selection.dropdown > input.search {
-  padding-left: 4rem;
-}
-
-.flag--hideAddress .ui--KeyPair .ui--KeyPair-address {
-  flex: 0;
-  max-width: 0;
-}