Cleanup extra classes(...), additional semantic elements (#249)

packages/app-accounts/src/Creator.tsx

@@ -10,7 +10,6 @@ import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
 import Password from '@polkadot/ui-app/Password';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import isHex from '@polkadot/util/is/hex';
 import hexToU8a from '@polkadot/util/hex/toU8a';
@@ -62,14 +61,10 @@ class Creator extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
     const { address, isSeedValid } = this.state;
 
     return (
-      <div
-        className={classes('accounts--Creator', className)}
-        style={style}
-      >
+      <div className='accounts--Creator'>
         <div className='ui--grid'>
           <AddressSummary
             className='shrink'

packages/app-accounts/src/Editor.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import InputAddress from '@polkadot/ui-app/InputAddress';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import accountObservable from '@polkadot/ui-keyring/observable/accounts';
 import withObservableBase from '@polkadot/ui-react-rx/with/observableBase';
@@ -39,13 +38,8 @@ class Editor extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('accounts--Editor', className)}
-        style={style}
-      >
+      <div className='accounts--Editor'>
         {this.renderData()}
         {this.renderButtons()}
       </div>

packages/app-accounts/src/index.tsx

@@ -9,7 +9,6 @@ import './index.css';
 import React from 'react';
 
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Creator from './Creator';
 import Editor from './Editor';
@@ -35,15 +34,12 @@ class AccountsApp extends React.PureComponent<Props, State> {
   state: State = { action: 'edit' };
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { action } = this.state;
     const Component = Components[action];
 
     return (
-      <main
-        className={classes('accounts--App', className)}
-        style={style}
-      >
+      <main className='accounts--App'>
         <header>
           <Button.Group>
             <Button

packages/app-addresses/src/Creator.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import addressDecode from '@polkadot/util-keyring/address/decode';
 import addressEncode from '@polkadot/util-keyring/address/encode';
@@ -39,14 +38,10 @@ class Creator extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
     const { address } = this.state;
 
     return (
-      <div
-        className={classes('addresses--Creator', className)}
-        style={style}
-      >
+      <div className='addresses--Creator'>
         <div className='ui--grid'>
           <AddressSummary
             className='shrink'

packages/app-addresses/src/Editor.tsx

@@ -11,7 +11,6 @@ import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import AddressSummary from '@polkadot/ui-app/AddressSummary';
 import InputAddress from '@polkadot/ui-app/InputAddress';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import addressObservable from '@polkadot/ui-keyring/observable/addresses';
 import withObservableBase from '@polkadot/ui-react-rx/with/observableBase';
@@ -39,13 +38,8 @@ class Editor extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('addresses--Editor', className)}
-        style={style}
-      >
+      <div className='addresses--Editor'>
         {this.renderData()}
         {this.renderButtons()}
       </div>

packages/app-addresses/src/index.tsx

@@ -7,11 +7,8 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-
 import Button from '@polkadot/ui-app/Button';
 
-import classes from '@polkadot/ui-app/util/classes';
-
 import Creator from './Creator';
 import Editor from './Editor';
 import translate from './translate';
@@ -36,15 +33,12 @@ class AddressesApp extends React.PureComponent<Props, State> {
   state: State = { action: 'edit' };
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { action } = this.state;
     const Component = Components[action];
 
     return (
-      <main
-        className={classes('addresses--App', className)}
-        style={style}
-      >
+      <main className='addresses--App'>
         <header>
           <Button.Group>
             <Button

packages/app-democracy/src/Item.tsx

@@ -7,9 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import Card from '@polkadot/ui-app/Card';
 import Extrinsic from '@polkadot/ui-app/Extrinsic';
-import classes from '@polkadot/ui-app/util/classes';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
 
 // TODO This would be nice as a shared component, move to ui-app as soon as
@@ -26,13 +24,10 @@ type Props = I18nProps & {
 // FIXME Duplicated layout here and in explorer, clean up with extrinsics
 class Item extends React.PureComponent<Props> {
   render () {
-    const { children, className, idNumber, proposal, proposalExtra, style } = this.props;
+    const { children, idNumber, proposal, proposalExtra } = this.props;
 
     return (
-      <Card
-        className={classes('democracy--Item', className)}
-        style={style}
-      >
+      <article className='democracy--Item'>
         <div className='democracy--Item-header'>
           <div className='democracy--Item-header-info'>
             <div className='democracy--Item-header-name'>
@@ -57,7 +52,7 @@ class Item extends React.PureComponent<Props> {
             {children}
           </div>
         </div>
-      </Card>
+      </article>
     );
   }
 }

packages/app-democracy/src/Proposal.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import AddressMini from '@polkadot/ui-app/AddressMini';
 import Labelled from '@polkadot/ui-app/Labelled';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
@@ -26,15 +25,13 @@ type Props = I18nProps & {
 
 class Proposal extends React.PureComponent<Props> {
   render () {
-    const { className, idNumber, style, value } = this.props;
+    const { idNumber, value } = this.props;
 
     return (
       <Item
-        className={classes('democracy--Proposal', className)}
         idNumber={idNumber}
         proposal={value.proposal}
         proposalExtra={this.renderExtra()}
-        style={style}
       >
         {this.renderVoting()}
       </Item>

packages/app-democracy/src/Proposals.tsx

@@ -6,7 +6,6 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { RxProposal } from '@polkadot/ui-react-rx/ApiObservable/types';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 
@@ -19,18 +18,15 @@ type Props = I18nProps & {
 
 class Proposals extends React.PureComponent<Props> {
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
 
     return (
-      <div
-        className={classes('democracy--Proposals', className)}
-        style={style}
-      >
+      <section className='democracy--Proposals'>
         <h1>{t('proposals.header', {
           defaultValue: 'proposals'
         })}</h1>
         {this.renderProposals()}
-      </div>
+      </section>
     );
   }
 

packages/app-democracy/src/Referendum.tsx

@@ -11,7 +11,6 @@ import React from 'react';
 import Static from '@polkadot/ui-app/Static';
 import Doughnut from '@polkadot/ui-app/Chart/Doughnut';
 import VoteThreshold from '@polkadot/ui-app/Params/Param/VoteThreshold';
-import classes from '@polkadot/ui-app/util/classes';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
@@ -90,15 +89,13 @@ class Referendum extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, idNumber, style, value } = this.props;
+    const { idNumber, value } = this.props;
 
     return (
       <Item
-        className={classes('democracy--Referendum', className)}
         idNumber={idNumber}
         proposal={value.proposal}
         proposalExtra={this.renderExtra()}
-        style={style}
       >
         <Voting referendumId={idNumber} />
         {this.renderResults()}

packages/app-democracy/src/Referendums.tsx

@@ -6,7 +6,6 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { RxReferendum } from '@polkadot/ui-react-rx/ApiObservable/types';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 
@@ -19,18 +18,15 @@ type Props = I18nProps & {
 
 class Referendums extends React.PureComponent<Props> {
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
 
     return (
-      <div
-        className={classes('democracy--Referendums', className)}
-        style={style}
-      >
+      <section className='democracy--Referendums'>
         <h1>{t('referendums.header', {
           defaultValue: 'referendums'
         })}</h1>
         {this.renderReferendums()}
-      </div>
+      </section>
     );
   }
 

packages/app-democracy/src/Summary.tsx

@@ -23,13 +23,10 @@ type Props = I18nProps & {
 
 class Summary extends React.PureComponent<Props> {
   render () {
-    const { className, democracyLaunchPeriod, democracyNextTally = new BN(0), democracyProposalCount, democracyReferendumCount = new BN(0), democracyVotingPeriod, style, t } = this.props;
+    const { democracyLaunchPeriod, democracyNextTally = new BN(0), democracyProposalCount, democracyReferendumCount = new BN(0), democracyVotingPeriod, t } = this.props;
 
     return (
-      <summary
-        className={className}
-        style={style}
-      >
+      <summary>
         <section>
           <CardSummary label={t('summary.proposalCount', {
             defaultValue: 'proposals'

packages/app-democracy/src/index.css

@@ -6,11 +6,6 @@
   margin-bottom: 1em;
 }
 
-.democracy--Proposals,
-.democracy--Referendums {
-  margin-bottom: 2rem;
-}
-
 .democracy--Item-header {
   display: flex;
   justify-content: space-between;

packages/app-explorer/src/BlockByHash/BlockByHash.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import AddressMini from '@polkadot/ui-app/AddressMini';
-import Card from '@polkadot/ui-app/Card';
 import Extrinsic from '@polkadot/ui-app/Extrinsic';
 import prettyJson from '@polkadot/ui-app/util/prettyJson';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
@@ -39,16 +38,16 @@ class BlockByHash extends React.PureComponent<Props> {
     // TODO Remove, debug info for reverse-engineering
     console.log(prettyJson(chainGetBlock));
 
-    return (
-      <div className='explorer--BlockByHash'>
+    return [
+      <header key='header'>
         <BlockHeader
           value={header}
           withExtrinsics
         />
-        {this.renderExtrinsics()}
-        {this.renderJustification()}
-      </div>
-    );
+      </header>,
+      this.renderExtrinsics(),
+      this.renderJustification()
+    ];
   }
 
   private renderExtrinsics () {
@@ -56,7 +55,7 @@ class BlockByHash extends React.PureComponent<Props> {
     const { extrinsics } = chainGetBlock;
 
     return (
-      <div className='explorer--BlockByHash-extrinsics'>
+      <section key='extrinsics'>
         <h1>{t('block.extrinsics', {
           defaultValue: 'extrinsics'
         })}</h1>
@@ -66,7 +65,7 @@ class BlockByHash extends React.PureComponent<Props> {
               className='explorer--BlockByHash-extrinsic'
               key={`${value}:extrinsic:${index}`}
             >
-              <Card>
+              <article>
                 <div className='explorer--BlockByHash-extrinsic-header'>
                   <div className='explorer--BlockByHash-extrinsic-header-name'>
                     {extrinsic.extrinsic.section}.{extrinsic.extrinsic.name}
@@ -85,11 +84,11 @@ class BlockByHash extends React.PureComponent<Props> {
                   </div>
                 </div>
                 <Extrinsic value={extrinsic} />
-              </Card>
+              </article>
             </div>
           ))}
         </div>
-      </div>
+      </section>
     );
   }
 
@@ -98,7 +97,7 @@ class BlockByHash extends React.PureComponent<Props> {
     const { justification } = chainGetBlock;
 
     return (
-      <div className='explorer--BlockByHash-justification'>
+      <section key='justification'>
         <h1>{t('block.justifications', {
           defaultValue: 'justifications'
         })}</h1>
@@ -116,7 +115,7 @@ class BlockByHash extends React.PureComponent<Props> {
             </div>
           ))}
         </div>
-      </div>
+      </section>
     );
   }
 }

packages/app-explorer/src/BlockHeader/index.tsx

@@ -11,7 +11,6 @@ import './BlockHeader.css';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import headerHash from '@polkadot/primitives/codec/header/hash';
-import classes from '@polkadot/ui-app/util/classes';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
 import withApi from '@polkadot/ui-react-rx/with/api';
 import u8aToHex from '@polkadot/util/u8a/toHex';
@@ -26,7 +25,7 @@ type Props = ApiProps & BareProps & {
 
 class BlockHeader extends React.PureComponent<Props> {
   render () {
-    const { apiMethods, className, value, style, withExtrinsics = false, withLink = false } = this.props;
+    const { apiMethods, value, withExtrinsics = false, withLink = false } = this.props;
 
     if (!value) {
       return null;
@@ -40,10 +39,7 @@ class BlockHeader extends React.PureComponent<Props> {
     const parentHex = u8aToHex(parentHash);
 
     return (
-      <div
-        className={classes('explorer--BlockHeader', className)}
-        style={style}
-      >
+      <div className='explorer--BlockHeader'>
         <div className='number'>
           <div>{numberFormat(number)}</div>
         </div>

packages/app-explorer/src/index.css

@@ -30,11 +30,6 @@
   text-align: right;
 }
 
-.explorer--BlockByHash-extrinsics,
-.explorer--BlockByHash-justification {
-  margin-top: 2em;
-}
-
 .explorer--BlockByHash-flexable {
   display: flex;
   flex-wrap: wrap;

packages/app-explorer/src/index.tsx

@@ -8,7 +8,6 @@ import './index.css';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
-import classes from '@polkadot/ui-app/util/classes';
 
 import BlockByHash from './BlockByHash';
 import Main from './Main';
@@ -19,13 +18,8 @@ type Props = BareProps & {
 
 export default class ExplorerApp extends React.Component<Props> {
   render () {
-    const { className, style } = this.props;
-
     return (
-      <main
-        className={classes('explorer--App', className)}
-        style={style}
-      >
+      <main className='explorer--App'>
         <Switch>
           <Route path='/explorer/hash/:hash' component={BlockByHash} />
           <Route component={Main} />

packages/app-extrinsics/src/Account.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 
 import InputAddress from '@polkadot/ui-app/InputAddress';
 import Labelled from '@polkadot/ui-app/Labelled';
-import classes from '@polkadot/ui-app/util/classes';
 import Balance from '@polkadot/ui-react-rx/Balance';
 
 import translate from './translate';
@@ -41,13 +40,10 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, defaultValue, isDisabled, isError, isInput, label, style, type, withLabel } = this.props;
+    const { defaultValue, isDisabled, isError, isInput, label, type, withLabel } = this.props;
 
     return (
-      <div
-        className={classes('extrinsics--Account', 'ui--row', className)}
-        style={style}
-      >
+      <div className='extrinsics--Account ui--row'>
         <div className='large'>
           <InputAddress
             defaultValue={defaultValue}

packages/app-extrinsics/src/Extrinsic.tsx

@@ -14,7 +14,6 @@ import React from 'react';
 import encode from '@polkadot/extrinsics/codec/encode/extrinsic';
 import InputExtrinsic from '@polkadot/ui-app/InputExtrinsic';
 import Params from '@polkadot/ui-app/Params';
-import classes from '@polkadot/ui-app/util/classes';
 import isUndefined from '@polkadot/util/is/undefined';
 import withApi from '@polkadot/ui-react-rx/with/api';
 
@@ -49,14 +48,11 @@ class Extrinsic extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, defaultValue, isDisabled, isError, isPrivate, labelMethod, labelSection, style, withLabel } = this.props;
+    const { defaultValue, isDisabled, isError, isPrivate, labelMethod, labelSection, withLabel } = this.props;
     const { extrinsic } = this.state;
 
     return (
-      <div
-        className={classes('extrinsics--Extrinsic', className)}
-        style={style}
-      >
+      <div className='extrinsics--Extrinsic'>
         <InputExtrinsic
           defaultValue={defaultValue}
           isDisabled={isDisabled}

packages/app-extrinsics/src/Nonce.tsx

@@ -8,7 +8,6 @@ import { BareProps } from '@polkadot/ui-app/types';
 import React from 'react';
 
 import Labelled from '@polkadot/ui-app/Labelled';
-import classes from '@polkadot/ui-app/util/classes';
 import RxNonce from '@polkadot/ui-react-rx/Nonce';
 
 type Props = BareProps & {
@@ -19,17 +18,14 @@ type Props = BareProps & {
 
 export default class Nonce extends React.PureComponent<Props> {
   render () {
-    const { className, label, style, rxChange, value } = this.props;
+    const { label, rxChange, value } = this.props;
 
     if (!value) {
       return null;
     }
 
     return (
-      <div
-        className={classes('ui--row', className)}
-        style={style}
-      >
+      <div className='ui--row'>
         <Labelled
           className='small'
           label={label}

packages/app-extrinsics/src/Selection.tsx

@@ -11,7 +11,6 @@ import React from 'react';
 import extrinsics from '@polkadot/extrinsics';
 import rpc from '@polkadot/jsonrpc';
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Account from './Account';
 import Extrinsic from './Extrinsic';
@@ -38,14 +37,11 @@ class Selection extends React.PureComponent<Props, State> {
   } as State;
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { publicKey, isValid } = this.state;
 
     return (
-      <div
-        className={classes('extrinsics--Selection', className)}
-        style={style}
-      >
+      <div className='extrinsics--Selection'>
         <Account
           isInput={false}
           label={t('display.sender', {

packages/app-extrinsics/src/index.tsx

@@ -8,7 +8,6 @@ import { QueueProps } from '@polkadot/ui-signer/types';
 import './index.css';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import { QueueConsumer } from '@polkadot/ui-signer/Context';
 
 import Selection from './Selection';
@@ -19,13 +18,8 @@ type Props = BareProps & {
 
 export default class ExtrinsicsApp extends React.PureComponent<Props> {
   render () {
-    const { className, style } = this.props;
-
     return (
-      <main
-        className={classes('extrinsics--App', className)}
-        style={style}
-      >
+      <main className='extrinsics--App'>
         <QueueConsumer>
           {({ queueAdd }: QueueProps) => (
             <Selection queueAdd={queueAdd} />

packages/app-rpc/src/Account.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 
 import InputAddress from '@polkadot/ui-app/InputAddress';
 import Labelled from '@polkadot/ui-app/Labelled';
-import classes from '@polkadot/ui-app/util/classes';
 import Nonce from '@polkadot/ui-react-rx/Nonce';
 
 import translate from './translate';
@@ -38,13 +37,10 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, defaultValue, isError, style, t } = this.props;
+    const { defaultValue, isError, t } = this.props;
 
     return (
-      <div
-        className={classes('rpc--Account', 'ui--row', className)}
-        style={style}
-      >
+      <div className='rpc--Account ui--row'>
         <div className='large'>
           <InputAddress
             defaultValue={defaultValue}

packages/app-rpc/src/Results.tsx

@@ -8,7 +8,6 @@ import { QueueTx } from '@polkadot/ui-signer/types';
 import React from 'react';
 
 import Output from '@polkadot/ui-app/Output';
-import classes from '@polkadot/ui-app/util/classes';
 import prettyJson from '@polkadot/ui-app/util/prettyJson';
 import isUndefined from '@polkadot/util/is/undefined';
 
@@ -18,7 +17,7 @@ type Props = BareProps & {
 
 export default class Results extends React.PureComponent<Props> {
   render () {
-    const { className, queue = [], style } = this.props;
+    const { queue = [] } = this.props;
 
     const filtered = queue
       .filter(({ error, result }) =>
@@ -31,10 +30,7 @@ export default class Results extends React.PureComponent<Props> {
     }
 
     return (
-      <div
-        className={classes('rpc--Results', className)}
-        style={style}
-      >
+      <section className='rpc--Results'>
         {filtered.map(({ error, id, result, rpc: { section, name } }) => (
           <Output
             isError={!!error}
@@ -47,7 +43,7 @@ export default class Results extends React.PureComponent<Props> {
             }
           />
         ))}
-      </div>
+      </section>
     );
   }
 }

packages/app-rpc/src/Selection.tsx

@@ -12,12 +12,10 @@ import './index.css';
 
 import BN from 'bn.js';
 import React from 'react';
-
 import rpc from '@polkadot/jsonrpc';
 import Button from '@polkadot/ui-app/Button';
 import InputRpc from '@polkadot/ui-app/InputRpc';
 import Params from '@polkadot/ui-app/Params';
-import classes from '@polkadot/ui-app/util/classes';
 import rawToValues from '@polkadot/ui-signer/rawToValues';
 
 import Account from './Account';
@@ -47,14 +45,11 @@ class Selection extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { isValid, rpc } = this.state;
 
     return (
-      <div
-        className={classes('rpc--Selection', className)}
-        style={style}
-      >
+      <section className='rpc--Selection'>
         <InputRpc
           defaultValue={defaultMethod}
           onChange={this.onChangeMethod}
@@ -74,7 +69,7 @@ class Selection extends React.PureComponent<Props, State> {
             })}
           />
         </Button.Group>
-      </div>
+      </section>
     );
   }
 

packages/app-rpc/src/index.tsx

@@ -8,7 +8,6 @@ import { QueueProps } from '@polkadot/ui-signer/types';
 import './index.css';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import { QueueConsumer } from '@polkadot/ui-signer/Context';
 
 import Results from './Results';
@@ -20,13 +19,8 @@ type Props = BareProps & {
 
 export default class RpcApp extends React.PureComponent<Props> {
   render () {
-    const { className, style } = this.props;
-
     return (
-      <main
-        className={classes('rpc--App', className)}
-        style={style}
-      >
+      <main className='rpc--App'>
         <QueueConsumer>
           {({ queue, queueAdd }: QueueProps) => [
             <Selection

packages/app-staking/src/Account.tsx

@@ -15,7 +15,6 @@ import extrinsics from '@polkadot/extrinsics';
 import AddressMini from '@polkadot/ui-app/AddressMini';
 import AddressSummary from '@polkadot/ui-app/AddressSummary';
 import Button from '@polkadot/ui-app/Button';
-import Card from '@polkadot/ui-app/Card';
 import Icon from '@polkadot/ui-app/Icon';
 import classes from '@polkadot/ui-app/util/classes';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
@@ -53,14 +52,11 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { address, className, intentions, isValidator, name, style } = this.props;
+    const { address, intentions, isValidator, name } = this.props;
     const { isNominateOpen } = this.state;
 
     return (
-      <Card
-        className={classes('staking--Account', className)}
-        style={style}
-      >
+      <article className='staking--Account'>
         <Icon
           className={classes('staking--Account-validating', isValidator ? 'isValidator' : '')}
           name='certificate'
@@ -83,7 +79,7 @@ class Account extends React.PureComponent<Props, State> {
             {this.renderNominators()}
           </div>
         </AddressSummary>
-      </Card>
+      </article>
     );
   }
 

packages/app-staking/src/Nominating.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import Modal from '@polkadot/ui-app/Modal';
-import classes from '@polkadot/ui-app/util/classes';
 
 import translate from './translate';
 
@@ -38,7 +37,7 @@ class Nominating extends React.PureComponent<Props> {
   }
 
   render () {
-    const { className, isOpen, style } = this.props;
+    const { isOpen, style } = this.props;
 
     if (!isOpen) {
       return null;
@@ -46,7 +45,7 @@ class Nominating extends React.PureComponent<Props> {
 
     return (
       <Modal
-        className={classes('ui--signer-Signer', className)}
+        className='staking--Nominating'
         dimmer='inverted'
         open
         style={style}

packages/app-staking/src/StakeList.tsx

@@ -7,7 +7,6 @@ import { QueueProps } from '@polkadot/ui-signer/types';
 import { RxBalanceMap } from '@polkadot/ui-react-rx/ApiObservable/types';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import { QueueConsumer } from '@polkadot/ui-signer/Context';
 
@@ -22,15 +21,12 @@ type Props = I18nProps & {
 
 class StakeList extends React.PureComponent<Props> {
   render () {
-    const { balances, className, intentions, style, validators } = this.props;
+    const { balances, intentions, validators } = this.props;
 
     return (
       <QueueConsumer>
         {({ queueExtrinsic }: QueueProps) => (
-          <div
-            className={classes('staking--StakeList', className)}
-            style={style}
-          >
+          <div className='staking--StakeList'>
             {keyring.getAccounts().map((account) => {
               const address = account.address();
               const name = account.getMeta().name || '';

packages/app-staking/src/UnnominateButton.tsx

@@ -6,7 +6,6 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 
@@ -21,7 +20,7 @@ type Props = I18nProps & {
 
 class UnnominateButton extends React.Component<Props> {
   render () {
-    const { className, nominating, stakingNominatorsFor, style, t } = this.props;
+    const { nominating, stakingNominatorsFor, style, t } = this.props;
 
     if (!nominating || !stakingNominatorsFor || stakingNominatorsFor.length === 0) {
       return null;
@@ -29,7 +28,7 @@ class UnnominateButton extends React.Component<Props> {
 
     return (
       <Button
-        className={classes('staking--Account-buttons', className)}
+        className='staking--Account-buttons'
         style={style}
         isNegative
         onClick={this.onClick}

packages/app-staking/src/index.tsx

@@ -6,7 +6,6 @@ import { BareProps } from '@polkadot/ui-app/types';
 import { RxBalanceMap } from '@polkadot/ui-react-rx/ApiObservable/types';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 
@@ -24,13 +23,10 @@ type Props = BareProps & {
 
 class App extends React.PureComponent<Props> {
   render () {
-    const { className, sessionValidators = [], stakingIntentions = [], style, validatingBalances = {} } = this.props;
+    const { sessionValidators = [], stakingIntentions = [], validatingBalances = {} } = this.props;
 
     return (
-      <main
-        className={classes('staking--App', className)}
-        style={style}
-      >
+      <main className='staking--App'>
         <Summary
           balances={validatingBalances}
           intentions={stakingIntentions}

packages/app-storage/src/Queries.tsx

@@ -2,34 +2,28 @@
 // This software may be modified and distributed under the terms
 // of the ISC license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/ui-app/types';
+import { BareProps } from '@polkadot/ui-app/types';
 import { StorageQuery } from './types';
 
 import React from 'react';
 
-import classes from '@polkadot/ui-app/util/classes';
-
-import translate from './translate';
 import Query from './Query';
 
-type Props = I18nProps & {
+type Props = BareProps & {
   onRemove: (id: number) => void,
   value?: Array<StorageQuery>
 };
 
-class Queries extends React.PureComponent<Props> {
+export default class Queries extends React.PureComponent<Props> {
   render () {
-    const { className, onRemove, style, value } = this.props;
+    const { onRemove, value } = this.props;
 
     if (!value || !value.length) {
       return null;
     }
 
     return (
-      <div
-        className={classes('storage--Queries', className)}
-        style={style}
-      >
+      <section className='storage--Queries'>
         {value.map((query) =>
           <Query
             key={query.id}
@@ -37,9 +31,7 @@ class Queries extends React.PureComponent<Props> {
             value={query}
           />
         )}
-      </div>
+      </section>
     );
   }
 }
-
-export default translate(Queries);

packages/app-storage/src/Query.tsx

@@ -12,7 +12,6 @@ import typeToString from '@polkadot/params/typeToString';
 import Button from '@polkadot/ui-app/Button';
 import Labelled from '@polkadot/ui-app/Labelled';
 import valueToText from '@polkadot/ui-app/Params/valueToText';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservableDiv from '@polkadot/ui-react-rx/with/observableDiv';
 
 import translate from './translate';
@@ -67,14 +66,11 @@ class Query extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style, value: { key } } = this.props;
+    const { value: { key } } = this.props;
     const { Component, inputs } = this.state;
 
     return (
-      <div
-        className={classes('storage--Query', 'storage--actionrow', className)}
-        style={style}
-      >
+      <div className='storage--Query storage--actionrow'>
         <Labelled
           className='storage--actionrow-value'
           label={

packages/app-storage/src/Selection.tsx

@@ -15,7 +15,6 @@ import Button from '@polkadot/ui-app/Button';
 import InputStorage from '@polkadot/ui-app/InputStorage';
 import Labelled from '@polkadot/ui-app/Labelled';
 import Params from '@polkadot/ui-app/Params';
-import classes from '@polkadot/ui-app/util/classes';
 import isUndefined from '@polkadot/util/is/undefined';
 
 import translate from './translate';
@@ -41,14 +40,11 @@ class Selection extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { isValid, key } = this.state;
 
     return (
-      <div
-        className={classes('storage--Selection', 'storage--actionrow', className)}
-        style={style}
-      >
+      <section className='storage--Selection storage--actionrow'>
         <div className='storage--actionrow-value'>
           <InputStorage
             defaultValue={defaultValue}
@@ -71,7 +67,7 @@ class Selection extends React.PureComponent<Props, State> {
             onClick={this.onAdd}
           />
         </Labelled>
-      </div>
+      </section>
     );
   }
 

packages/app-storage/src/index.css

@@ -2,10 +2,6 @@
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
 
-.storage--Queries {
-  margin-top: 2em;
-}
-
 .storage--Query {
   margin-bottom: 0.25em;
   padding: 0.25em 0;

packages/app-storage/src/index.tsx

@@ -8,7 +8,6 @@ import { StorageQuery } from './types';
 import './index.css';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Queries from './Queries';
 import Selection from './Selection';
@@ -28,14 +27,10 @@ class StorageApp extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style } = this.props;
     const { queue } = this.state;
 
     return (
-      <main
-        className={classes('storage--App', className)}
-        style={style}
-      >
+      <main className='storage--App'>
         <Selection onAdd={this.onAdd} />
         <Queries
           onRemove={this.onRemove}

packages/app-toolbox/src/Hash.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import Input from '@polkadot/ui-app/Input';
 import Output from '@polkadot/ui-app/Output';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
 import u8aFromString from '@polkadot/util/u8a/fromString';
@@ -31,13 +30,8 @@ class Hash extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('toolbox--Hash', className)}
-        style={style}
-      >
+      <div className='toolbox--Hash'>
         {this.renderInput()}
         {this.renderOutput()}
       </div>

packages/app-toolbox/src/Sign.tsx

@@ -12,7 +12,6 @@ import Input from '@polkadot/ui-app/Input';
 import InputAddress from '@polkadot/ui-app/InputAddress';
 import Output from '@polkadot/ui-app/Output';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
@@ -57,13 +56,8 @@ class Sign extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('toolbox--Sign', className)}
-        style={style}
-      >
+      <div className='toolbox--Sign'>
         {this.renderAccount()}
         {this.renderInput()}
         {this.renderSignature()}

packages/app-toolbox/src/Unlock.tsx

@@ -11,7 +11,6 @@ import { Trans } from 'react-i18next';
 import Button from '@polkadot/ui-app/Button';
 import Modal from '@polkadot/ui-app/Modal';
 import Password from '@polkadot/ui-app/Password';
-import classes from '@polkadot/ui-app/util/classes';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 
 import translate from './translate';
@@ -48,14 +47,13 @@ class Unlock extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
 
     return (
       <Modal
-        className={classes('toolbox--Unlock', className)}
+        className='toolbox--Unlock'
         dimmer='inverted'
         open
-        style={style}
       >
         <Modal.Header>
           {t('unlock.header', {

packages/app-toolbox/src/Verify.tsx

@@ -10,7 +10,6 @@ import Icon from '@polkadot/ui-app/Icon';
 import Input from '@polkadot/ui-app/Input';
 import InputAddress from '@polkadot/ui-app/InputAddress';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
@@ -55,13 +54,8 @@ class Verify extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('toolbox--Verify', className)}
-        style={style}
-      >
+      <div className='toolbox--Verify'>
         {this.renderInput()}
         {this.renderAddress()}
         {this.renderSignature()}

packages/app-toolbox/src/index.tsx

@@ -8,7 +8,6 @@ import './index.css';
 
 import React from 'react';
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Hash from './Hash';
 import Sign from './Sign';
@@ -38,15 +37,11 @@ class ToolboxApp extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style } = this.props;
     const { action } = this.state;
     const Component = Components[action];
 
     return (
-      <main
-        className={classes('toolbox--App', className)}
-        style={style}
-      >
+      <main className='toolbox--App'>
         {this.renderButtons()}
         <Component />
       </main>

packages/app-vanitygen/src/Match.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 
 import CopyButton from '@polkadot/ui-app/CopyButton';
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import u8aToHex from '@polkadot/util/u8a/toHex';
 
@@ -34,14 +33,11 @@ export default class Match extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { address, className, count, offset, style } = this.props;
+    const { address, count, offset } = this.props;
     const { hexSeed } = this.state;
 
     return (
-      <div
-        className={classes('vanity--Match', className)}
-        style={style}
-      >
+      <div className='vanity--Match'>
         <div className='vanity--Match-item'>
           <IdentityIcon
             className='vanity--Match-icon'

packages/app-vanitygen/src/index.tsx

@@ -12,7 +12,6 @@ import Button from '@polkadot/ui-app/Button';
 import Dropdown from '@polkadot/ui-app/Dropdown';
 import Input from '@polkadot/ui-app/Input';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Match from './Match';
 import generator from './generator';
@@ -57,13 +56,8 @@ class VanityApp extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <main
-        className={classes('vanity--App', className)}
-        style={style}
-      >
+      <main className='vanity--App'>
         {this.renderOptions()}
         {this.renderButtons()}
         {this.renderStats()}

packages/apps/src/Connecting/index.tsx

@@ -8,8 +8,6 @@ import { ApiProps } from '@polkadot/ui-react-rx/types';
 import './Connecting.css';
 
 import React from 'react';
-
-import classes from '@polkadot/ui-app/util/classes';
 import withApi from '@polkadot/ui-react-rx/with/api';
 
 import translate from '../translate';
@@ -18,17 +16,14 @@ type Props = I18nProps & ApiProps;
 
 class Connecting extends React.PureComponent<Props> {
   render () {
-    const { apiConnected, className, style, t } = this.props;
+    const { apiConnected, t } = this.props;
 
     if (apiConnected) {
       return null;
     }
 
     return (
-      <div
-        className={classes('apps--Connecting', className)}
-        style={style}
-      >
+      <div className='apps--Connecting'>
         <div className='apps--Connecting-text'>
           {t('connecting.disconnected', {
             defaultValue: 'You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.'

packages/apps/src/Content/index.tsx

@@ -9,8 +9,6 @@ import './Content.css';
 import React from 'react';
 import { withRouter } from 'react-router';
 
-import classes from '@polkadot/ui-app/util/classes';
-
 import routing from '../routing';
 import NotFound from './NotFound';
 
@@ -25,7 +23,7 @@ const unknown = {
 
 class Content extends React.PureComponent<Props> {
   render () {
-    const { className, location, style } = this.props;
+    const { location } = this.props;
 
     const app = location.pathname.slice(1) || '';
     const { Component, name } = routing.routes.find((route) =>
@@ -33,10 +31,7 @@ class Content extends React.PureComponent<Props> {
     ) || unknown;
 
     return (
-      <div
-        className={classes('apps--Content', className)}
-        style={style}
-      >
+      <div className='apps--Content'>
         <Component basePath={`/${name}`} />
       </div>
     );

packages/apps/src/SideBar/index.tsx

@@ -9,7 +9,6 @@ import './SideBar.css';
 import React from 'react';
 import Icon from '@polkadot/ui-app/Icon';
 import Menu from '@polkadot/ui-app/Menu';
-import classes from '@polkadot/ui-app/util/classes';
 
 import polkadotLogo from '../static/polkadot-white.svg';
 import routing from '../routing';
@@ -22,13 +21,10 @@ type Props = I18nProps & {
 
 class SideBar extends React.PureComponent<Props> {
   render () {
-    const { children, className, style, t } = this.props;
+    const { children, t } = this.props;
 
     return (
-      <div
-        className={classes('apps--SideBar', className)}
-        style={style}
-      >
+      <div className='apps--SideBar'>
         <Menu
           secondary
           vertical

packages/apps/src/index.tsx

@@ -7,9 +7,7 @@ import { BareProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-
 import createApp from '@polkadot/ui-app/index';
-import classes from '@polkadot/ui-app/util/classes';
 import Signer from '@polkadot/ui-signer/index';
 
 import Connecting from './Connecting';
@@ -19,12 +17,9 @@ import SideBar from './SideBar';
 
 type Props = BareProps & {};
 
-function App ({ className, style }: Props) {
+function App (props: Props) {
   return (
-    <div
-      className={classes('apps--App', className)}
-      style={style}
-    >
+    <div className='apps--App'>
       <SideBar>
         <NodeInfo />
       </SideBar>

packages/ui-app/src/Card.tsx

@@ -1,28 +0,0 @@
-// Copyright 2017-2018 @polkadot/ui-app authors & contributors
-// This software may be modified and distributed under the terms
-// of the ISC license. See the LICENSE file for details.
-
-import { BareProps } from './types';
-
-import React from 'react';
-
-import classes from './util/classes';
-
-type Props = BareProps & {
-  children: React.ReactNode
-};
-
-export default class Card extends React.PureComponent<Props> {
-  render () {
-    const { children, className, style } = this.props;
-
-    return (
-      <div
-        className={classes('ui--Card', className)}
-        style={style}
-      >
-        {children}
-      </div>
-    );
-  }
-}

packages/ui-app/src/CardSummary.tsx

@@ -8,7 +8,6 @@ import BN from 'bn.js';
 import React from 'react';
 import isUndefined from '@polkadot/util/is/undefined';
 
-import Card from './Card';
 import Progress, { Colors as ProgressColors } from './Progress';
 import Labelled from './Labelled';
 import classes from './util/classes';
@@ -46,7 +45,7 @@ export default class CardSummary extends React.PureComponent<Props> {
       : undefined;
 
     return (
-      <Card
+      <article
         className={classes('ui--CardSummary', className)}
         style={style}
       >
@@ -73,7 +72,7 @@ export default class CardSummary extends React.PureComponent<Props> {
             )
           }
         </Labelled>
-      </Card>
+      </article>
     );
   }
 }

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

@@ -33,6 +33,18 @@ main {
   padding: 1em 2em;
 }
 
+main > section {
+  margin-bottom: 2em;
+}
+
+article {
+  background: #fefefe;
+  border: 1px solid #fafafa;
+  border-radius: 0.25rem;
+  margin: 0.5rem;
+  padding: 1.5rem;
+}
+
 header,
 summary {
   margin-bottom: 2em;
@@ -52,6 +64,11 @@ summary {
   flex-wrap: wrap;
 }
 
+summary article {
+  flex: 0 1 auto;
+  text-align: left;
+}
+
 summary > section {
   display: flex;
   flex: 0 1 auto;

packages/ui-app/src/styles/components.css

@@ -136,19 +136,6 @@ header .ui--Button-Group {
   padding: 0;
 }
 
-.ui--Card {
-  background: #fcfcfc;
-  border: 1px solid #fafafa;
-  border-radius: 0.25rem;
-  margin: 0.5rem;
-  padding: 1.5rem;
-}
-
-summary .ui--Card {
-  flex: 0 1 auto;
-  text-align: left;
-}
-
 .ui--CardSummary .ui.label {
   padding-left: 0;
   padding-right: 0;

packages/ui-signer/src/Modal.tsx

@@ -9,7 +9,6 @@ import { QueueTx, QueueTx$MessageSetStatus } from './types';
 import React from 'react';
 import Button from '@polkadot/ui-app/Button';
 import Modal from '@polkadot/ui-app/Modal';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import withApi from '@polkadot/ui-react-rx/with/api';
 
@@ -79,7 +78,6 @@ class Signer extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
     const { currentItem } = this.state;
 
     if (!currentItem || currentItem.rpc.isSigned !== true) {
@@ -88,10 +86,9 @@ class Signer extends React.PureComponent<Props, State> {
 
     return (
       <Modal
-        className={classes('ui--signer-Signer', className)}
+        className='ui--signer-Signer'
         dimmer='inverted'
         open
-        style={style}
       >
         {this.renderContent()}
         {this.renderButtons()}

packages/ui-signer/src/Status.tsx

@@ -15,7 +15,7 @@ type Props = BareProps & {
 
 export default class Status extends React.PureComponent<Props> {
   render () {
-    const { queue, className, style } = this.props;
+    const { queue } = this.props;
     const available = queue.filter(({ status }) =>
 
       !['completed', 'incomplete'].includes(status)
@@ -26,10 +26,7 @@ export default class Status extends React.PureComponent<Props> {
     }
 
     return (
-      <div
-        className={classes('ui--signer-Status', className)}
-        style={style}
-      >
+      <div className='ui--signer-Status'>
         {available.map(({ rpc: { name, section }, id, status }) =>
           <div
             className={classes('ui--signer-Status-Item', status)}

packages/ui-signer/src/Unlock.tsx

@@ -8,7 +8,6 @@ import { KeyringPair } from '@polkadot/util-keyring/types';
 import React from 'react';
 
 import Password from '@polkadot/ui-app/Password';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 
 import translate from './translate';
@@ -41,7 +40,7 @@ class Unlock extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, onChange, password, style, t } = this.props;
+    const { onChange, password, t } = this.props;
     const { isError, isLocked } = this.state;
 
     if (!isLocked) {
@@ -49,10 +48,7 @@ class Unlock extends React.PureComponent<Props, State> {
     }
 
     return (
-      <div
-        className={classes('ui--signer-Signer-Unlock', className)}
-        style={style}
-      >
+      <div className='ui--signer-Signer-Unlock'>
         <div className='ui--row'>
           <Password
             className='medium'