Introduce Page & Navigation components (consistency) (#211)

* Introduce Page & Navigation components (consistency)

* Staking account border update

packages/app-accounts/src/index.css

@@ -1,12 +1,3 @@
 /* Copyright 2017-2018 @polkadot/app-accounts authors & contributors
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
-
-.accounts--App {
-  padding: 1em 2em;
-}
-
-.accounts--App-navigation.ui--Button-Group {
-  margin-bottom: 2em;
-  text-align: center;
-}

packages/app-accounts/src/index.tsx

@@ -9,6 +9,8 @@ import './index.css';
 import React from 'react';
 
 import Button from '@polkadot/ui-app/Button';
+import Navigation from '@polkadot/ui-app/Navigation';
+import Page from '@polkadot/ui-app/Page';
 import classes from '@polkadot/ui-app/util/classes';
 
 import Creator from './Creator';
@@ -38,29 +40,31 @@ class AccountsApp extends React.PureComponent<Props, State> {
     const Component = Components[action];
 
     return (
-      <div
+      <Page
         className={classes('accounts--App', className)}
         style={style}
       >
-        <Button.Group className='accounts--App-navigation'>
-          <Button
-            isPrimary={action === 'edit'}
-            onClick={this.selectEdit}
-            text={t('app.edit', {
-              defaultValue: 'Edit account'
-            })}
-          />
-          <Button.Or />
-          <Button
-            isPrimary={action === 'create'}
-            onClick={this.selectCreate}
-            text={t('app.create', {
-              defaultValue: 'Create account'
-            })}
-          />
-        </Button.Group>
+        <Navigation>
+          <Button.Group>
+            <Button
+              isPrimary={action === 'edit'}
+              onClick={this.selectEdit}
+              text={t('app.edit', {
+                defaultValue: 'Edit account'
+              })}
+            />
+            <Button.Or />
+            <Button
+              isPrimary={action === 'create'}
+              onClick={this.selectCreate}
+              text={t('app.create', {
+                defaultValue: 'Create account'
+              })}
+            />
+          </Button.Group>
+        </Navigation>
         <Component onBack={this.selectEdit} />
-      </div>
+      </Page>
     );
   }
 

packages/app-addresses/src/index.css

@@ -1,12 +1,3 @@
 /* Copyright 2017-2018 @polkadot/app-addresses authors & contributors
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
-
-.addresses--App {
-  padding: 1em 2em;
-}
-
-.addresses--App-navigation.ui--Button-Group {
-  margin-bottom: 2em;
-  text-align: center;
-}

packages/app-addresses/src/index.tsx

@@ -9,6 +9,9 @@ import './index.css';
 import React from 'react';
 
 import Button from '@polkadot/ui-app/Button';
+import Navigation from '@polkadot/ui-app/Navigation';
+import Page from '@polkadot/ui-app/Page';
+
 import classes from '@polkadot/ui-app/util/classes';
 
 import Creator from './Creator';
@@ -38,29 +41,31 @@ class AddressesApp extends React.PureComponent<Props, State> {
     const Component = Components[action];
 
     return (
-      <div
+      <Page
         className={classes('addresses--App', className)}
         style={style}
       >
-        <Button.Group className='addresses--App-navigation'>
-          <Button
-            isPrimary={action === 'edit'}
-            onClick={this.selectEdit}
-            text={t('app.edit', {
-              defaultValue: 'Edit address'
-            })}
-          />
-          <Button.Or />
-          <Button
-            isPrimary={action === 'create'}
-            onClick={this.selectCreate}
-            text={t('app.create', {
-              defaultValue: 'Add address'
-            })}
-          />
-        </Button.Group>
+        <Navigation>
+          <Button.Group>
+            <Button
+              isPrimary={action === 'edit'}
+              onClick={this.selectEdit}
+              text={t('app.edit', {
+                defaultValue: 'Edit address'
+              })}
+            />
+            <Button.Or />
+            <Button
+              isPrimary={action === 'create'}
+              onClick={this.selectCreate}
+              text={t('app.create', {
+                defaultValue: 'Add address'
+              })}
+            />
+          </Button.Group>
+        </Navigation>
         <Component onBack={this.selectEdit} />
-      </div>
+      </Page>
     );
   }
 

packages/app-example/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. */
 
-.example--App {
-  padding: 1em 2em;
-}
-
 .example--App .navigation {
   margin-bottom: 1em;
 }

packages/app-example/src/index.tsx

@@ -3,6 +3,8 @@
 // of the ISC license. See the LICENSE file for details.
 
 import React from 'react';
+import Navigation from '@polkadot/ui-app/Navigation';
+import Page from '@polkadot/ui-app/Page';
 
 import './index.css';
 
@@ -34,14 +36,14 @@ export default class App extends React.PureComponent<any, State> {
     const { Component } = this.state;
 
     return (
-      <div className='example--App'>
-        <div className='navigation'>{
+      <Page className='example--App'>
+        <Navigation className='navigation'>{
           Object.keys(Components).map((name) => (
             <a key={name} onClick={() => this.onSelect(name)}>{name}</a>
           ))
-        }</div>
+        }</Navigation>
         <div><Component /></div>
-      </div>
+      </Page>
     );
   }
 

packages/app-explorer/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. */
 
-.explorer--App {
-  padding: 1em 2em;
-}
-
 .explorer--App .rx--updated {
   background: transparent !important;
 }

packages/app-explorer/src/index.tsx

@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-
+import Page from '@polkadot/ui-app/Page';
 import classes from '@polkadot/ui-app/util/classes';
 import BestNumber from '@polkadot/ui-react-rx/BestNumber';
 
@@ -22,7 +22,7 @@ class ExplorerApp extends React.PureComponent<Props> {
     const { className, style, t } = this.props;
 
     return (
-      <div
+      <Page
         className={classes('explorer--App', className)}
         style={style}
       >
@@ -34,7 +34,7 @@ class ExplorerApp extends React.PureComponent<Props> {
         />
         <BestHash />
         <BlockHeaders />
-      </div>
+      </Page>
     );
   }
 }

packages/app-extrinsics/src/index.css

@@ -1,7 +1,3 @@
 /* Copyright 2017-2018 @polkadot/app-extrinsics authors & contributors
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
-
-.extrinsics--App {
-  padding: 1em 2em;
-}

packages/app-extrinsics/src/index.tsx

@@ -8,7 +8,7 @@ import { QueueProps } from '@polkadot/ui-signer/types';
 import './index.css';
 
 import React from 'react';
-
+import Page from '@polkadot/ui-app/Page';
 import classes from '@polkadot/ui-app/util/classes';
 import { QueueConsumer } from '@polkadot/ui-signer/Context';
 
@@ -21,7 +21,7 @@ export default class ExtrinsicsApp extends React.PureComponent<Props> {
     const { className, style } = this.props;
 
     return (
-      <div
+      <Page
         className={classes('extrinsics--App', className)}
         style={style}
       >
@@ -30,7 +30,7 @@ export default class ExtrinsicsApp extends React.PureComponent<Props> {
             <Selection queueAdd={queueAdd} />
           )}
         </QueueConsumer>
-      </div>
+      </Page>
     );
   }
 }

packages/app-rpc/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. */
 
-.rpc--App {
-  padding: 1em 2em;
-}
-
 .rpc--Account {
   box-sizing: border-box;
   padding-left: 2em;

packages/app-rpc/src/index.tsx

@@ -8,7 +8,7 @@ import { QueueProps } from '@polkadot/ui-signer/types';
 import './index.css';
 
 import React from 'react';
-
+import Page from '@polkadot/ui-app/Page';
 import classes from '@polkadot/ui-app/util/classes';
 import { QueueConsumer } from '@polkadot/ui-signer/Context';
 
@@ -22,7 +22,7 @@ export default class RpcApp extends React.PureComponent<Props> {
     const { className, style } = this.props;
 
     return (
-      <div
+      <Page
         className={classes('rpc--App', className)}
         style={style}
       >
@@ -38,7 +38,7 @@ export default class RpcApp extends React.PureComponent<Props> {
             />
           ]}
         </QueueConsumer>
-      </div>
+      </Page>
     );
   }
 }

packages/app-staking/src/index.css

@@ -2,17 +2,13 @@
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
 
-.staking--App {
-  padding: 1em 2rem;
-}
-
 .staking--Summary {
   margin-bottom: 2rem;
   text-align: right;
 }
 
 .staking--Account {
-  background: #f9f9f9;
+  border: 1px solid #f5f5f5;
   border-radius: 0.25rem;
   display: inline-block;
   margin: 1rem;

packages/app-staking/src/index.tsx

@@ -7,6 +7,7 @@ import { ExtendedBalanceMap } from '@polkadot/ui-react-rx/types';
 
 import React from 'react';
 import storage from '@polkadot/storage';
+import Page from '@polkadot/ui-app/Page';
 import encodeAddress from '@polkadot/util-keyring/address/encode';
 import classes from '@polkadot/ui-app/util/classes';
 import withApiObservable from '@polkadot/ui-react-rx/with/apiObservable';
@@ -32,7 +33,7 @@ class App extends React.PureComponent<Props> {
     const { balances = {}, className, intentions = [], style, validators = [] } = this.props;
 
     return (
-      <div
+      <Page
         className={classes('staking--App', className)}
         style={style}
       >
@@ -46,7 +47,7 @@ class App extends React.PureComponent<Props> {
           intentions={intentions}
           validators={validators}
         />
-      </div>
+      </Page>
     );
   }
 }

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--App {
-  padding: 1em 2em;
-}
-
 .storage--Queries {
   margin-top: 2em;
 }

packages/app-storage/src/index.tsx

@@ -8,7 +8,7 @@ import { StorageQuery } from './types';
 import './index.css';
 
 import React from 'react';
-
+import Page from '@polkadot/ui-app/Page';
 import classes from '@polkadot/ui-app/util/classes';
 
 import Queries from './Queries';
@@ -31,7 +31,7 @@ class StorageApp extends React.PureComponent<Props, State> {
     const { queue } = this.state;
 
     return (
-      <div
+      <Page
         className={classes('storage--App', className)}
         style={style}
       >
@@ -40,7 +40,7 @@ class StorageApp extends React.PureComponent<Props, State> {
           onRemove={this.onRemove}
           value={queue}
         />
-      </div>
+      </Page>
     );
   }
 

packages/app-toolbox/src/index.tsx

@@ -7,8 +7,9 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-
 import Button from '@polkadot/ui-app/Button';
+import Navigation from '@polkadot/ui-app/Navigation';
+import Page from '@polkadot/ui-app/Page';
 import classes from '@polkadot/ui-app/util/classes';
 
 import Hash from './Hash';
@@ -42,13 +43,13 @@ class ToolboxApp extends React.PureComponent<Props, State> {
     const Component = Components[action];
 
     return (
-      <div
+      <Page
         className={classes('toolbox--App', className)}
         style={style}
       >
         {this.renderButtons()}
         <Component />
-      </div>
+      </Page>
     );
   }
 
@@ -57,31 +58,33 @@ class ToolboxApp extends React.PureComponent<Props, State> {
     const { action } = this.state;
 
     return (
-      <Button.Group className='accounts--App-navigation'>
-        <Button
-          isPrimary={action === 'hash'}
-          onClick={this.selectHash}
-          text={t('app.hash', {
-            defaultValue: 'Hash data'
-          })}
-        />
-        <Button.Or />
-        <Button
-          isPrimary={action === 'sign'}
-          onClick={this.selectSign}
-          text={t('app.sign', {
-            defaultValue: 'Sign message'
-          })}
-        />
-        <Button.Or />
-        <Button
-          isPrimary={action === 'verify'}
-          onClick={this.selectVerify}
-          text={t('app.verify', {
-            defaultValue: 'Verify signature'
-          })}
-        />
-      </Button.Group>
+      <Navigation>
+        <Button.Group>
+          <Button
+            isPrimary={action === 'hash'}
+            onClick={this.selectHash}
+            text={t('app.hash', {
+              defaultValue: 'Hash data'
+            })}
+          />
+          <Button.Or />
+          <Button
+            isPrimary={action === 'sign'}
+            onClick={this.selectSign}
+            text={t('app.sign', {
+              defaultValue: 'Sign message'
+            })}
+          />
+          <Button.Or />
+          <Button
+            isPrimary={action === 'verify'}
+            onClick={this.selectVerify}
+            text={t('app.verify', {
+              defaultValue: 'Verify signature'
+            })}
+          />
+        </Button.Group>
+      </Navigation>
     );
   }
 

packages/app-vanitygen/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. */
 
-.vanity--App {
-  padding: 1em 2em;
-}
-
 .vanity--App-matches {
   padding: 1em 0;
 }

packages/app-vanitygen/src/index.tsx

@@ -8,10 +8,10 @@ import { Generator$Matches, Generator$Result } from './generator/types';
 import './index.css';
 
 import React from 'react';
-
 import Button from '@polkadot/ui-app/Button';
 import Dropdown from '@polkadot/ui-app/Dropdown';
 import Input from '@polkadot/ui-app/Input';
+import Page from '@polkadot/ui-app/Page';
 import Static from '@polkadot/ui-app/Static';
 import classes from '@polkadot/ui-app/util/classes';
 
@@ -59,7 +59,7 @@ class VanityApp extends React.PureComponent<Props, State> {
     const { className, style } = this.props;
 
     return (
-      <div
+      <Page
         className={classes('vanity--App', className)}
         style={style}
       >
@@ -67,7 +67,7 @@ class VanityApp extends React.PureComponent<Props, State> {
         {this.renderButtons()}
         {this.renderStats()}
         {this.renderMatches()}
-      </div>
+      </Page>
     );
   }
 

packages/ui-app/src/Navigation.tsx

@@ -0,0 +1,28 @@
+// 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 Navigation extends React.PureComponent<Props> {
+  render () {
+    const { children, className, style } = this.props;
+
+    return (
+      <div
+        className={classes('ui--Navigation', className)}
+        style={style}
+      >
+        {children}
+      </div>
+    );
+  }
+}

packages/ui-app/src/Page.tsx

@@ -0,0 +1,28 @@
+// 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 Page extends React.PureComponent<Props> {
+  render () {
+    const { children, className, style } = this.props;
+
+    return (
+      <div
+        className={classes('ui--Page', className)}
+        style={style}
+      >
+        {children}
+      </div>
+    );
+  }
+}

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

@@ -66,12 +66,13 @@
 }
 
 .ui--AddressSummary {
-  padding: 0 2em;
+  padding: 0 1em;
   text-align: left;
   white-space: nowrap
 }
 
 .ui--AddressSummary-base {
+  padding: 0 1em;
   text-align: center;
 }
 
@@ -121,3 +122,16 @@
   font-size: 1.5em;
   padding: 0;
 }
+
+.ui--Navigation {
+  margin-bottom: 2em;
+  text-align: center;
+}
+
+.ui--Navigation .ui--Button-Group {
+  text-align: center;
+}
+
+.ui--Page {
+  padding: 1em 2em;
+}