Basic council overview (#1267)

* Cleanup styles for staking

* Basic council members list

* AddressRow adjustments

* Less-spacy rows

* Adjust after merge

* Move accounts to first tranch

* s/council/members/

* Update CardGrid.tsx

* Remove any on styled props

* Small readability tweak

packages/app-council/LICENSE

@@ -0,0 +1,201 @@
+                              Apache License
+                        Version 2.0, January 2004
+                    http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+  "License" shall mean the terms and conditions for use, reproduction,
+  and distribution as defined by Sections 1 through 9 of this document.
+
+  "Licensor" shall mean the copyright owner or entity authorized by
+  the copyright owner that is granting the License.
+
+  "Legal Entity" shall mean the union of the acting entity and all
+  other entities that control, are controlled by, or are under common
+  control with that entity. For the purposes of this definition,
+  "control" means (i) the power, direct or indirect, to cause the
+  direction or management of such entity, whether by contract or
+  otherwise, or (ii) ownership of fifty percent (50%) or more of the
+  outstanding shares, or (iii) beneficial ownership of such entity.
+
+  "You" (or "Your") shall mean an individual or Legal Entity
+  exercising permissions granted by this License.
+
+  "Source" form shall mean the preferred form for making modifications,
+  including but not limited to software source code, documentation
+  source, and configuration files.
+
+  "Object" form shall mean any form resulting from mechanical
+  transformation or translation of a Source form, including but
+  not limited to compiled object code, generated documentation,
+  and conversions to other media types.
+
+  "Work" shall mean the work of authorship, whether in Source or
+  Object form, made available under the License, as indicated by a
+  copyright notice that is included in or attached to the work
+  (an example is provided in the Appendix below).
+
+  "Derivative Works" shall mean any work, whether in Source or Object
+  form, that is based on (or derived from) the Work and for which the
+  editorial revisions, annotations, elaborations, or other modifications
+  represent, as a whole, an original work of authorship. For the purposes
+  of this License, Derivative Works shall not include works that remain
+  separable from, or merely link (or bind by name) to the interfaces of,
+  the Work and Derivative Works thereof.
+
+  "Contribution" shall mean any work of authorship, including
+  the original version of the Work and any modifications or additions
+  to that Work or Derivative Works thereof, that is intentionally
+  submitted to Licensor for inclusion in the Work by the copyright owner
+  or by an individual or Legal Entity authorized to submit on behalf of
+  the copyright owner. For the purposes of this definition, "submitted"
+  means any form of electronic, verbal, or written communication sent
+  to the Licensor or its representatives, including but not limited to
+  communication on electronic mailing lists, source code control systems,
+  and issue tracking systems that are managed by, or on behalf of, the
+  Licensor for the purpose of discussing and improving the Work, but
+  excluding communication that is conspicuously marked or otherwise
+  designated in writing by the copyright owner as "Not a Contribution."
+
+  "Contributor" shall mean Licensor and any individual or Legal Entity
+  on behalf of whom a Contribution has been received by Licensor and
+  subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+  this License, each Contributor hereby grants to You a perpetual,
+  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+  copyright license to reproduce, prepare Derivative Works of,
+  publicly display, publicly perform, sublicense, and distribute the
+  Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+  this License, each Contributor hereby grants to You a perpetual,
+  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+  (except as stated in this section) patent license to make, have made,
+  use, offer to sell, sell, import, and otherwise transfer the Work,
+  where such license applies only to those patent claims licensable
+  by such Contributor that are necessarily infringed by their
+  Contribution(s) alone or by combination of their Contribution(s)
+  with the Work to which such Contribution(s) was submitted. If You
+  institute patent litigation against any entity (including a
+  cross-claim or counterclaim in a lawsuit) alleging that the Work
+  or a Contribution incorporated within the Work constitutes direct
+  or contributory patent infringement, then any patent licenses
+  granted to You under this License for that Work shall terminate
+  as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+  Work or Derivative Works thereof in any medium, with or without
+  modifications, and in Source or Object form, provided that You
+  meet the following conditions:
+
+  (a) You must give any other recipients of the Work or
+      Derivative Works a copy of this License; and
+
+  (b) You must cause any modified files to carry prominent notices
+      stating that You changed the files; and
+
+  (c) You must retain, in the Source form of any Derivative Works
+      that You distribute, all copyright, patent, trademark, and
+      attribution notices from the Source form of the Work,
+      excluding those notices that do not pertain to any part of
+      the Derivative Works; and
+
+  (d) If the Work includes a "NOTICE" text file as part of its
+      distribution, then any Derivative Works that You distribute must
+      include a readable copy of the attribution notices contained
+      within such NOTICE file, excluding those notices that do not
+      pertain to any part of the Derivative Works, in at least one
+      of the following places: within a NOTICE text file distributed
+      as part of the Derivative Works; within the Source form or
+      documentation, if provided along with the Derivative Works; or,
+      within a display generated by the Derivative Works, if and
+      wherever such third-party notices normally appear. The contents
+      of the NOTICE file are for informational purposes only and
+      do not modify the License. You may add Your own attribution
+      notices within Derivative Works that You distribute, alongside
+      or as an addendum to the NOTICE text from the Work, provided
+      that such additional attribution notices cannot be construed
+      as modifying the License.
+
+  You may add Your own copyright statement to Your modifications and
+  may provide additional or different license terms and conditions
+  for use, reproduction, or distribution of Your modifications, or
+  for any such Derivative Works as a whole, provided Your use,
+  reproduction, and distribution of the Work otherwise complies with
+  the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+  any Contribution intentionally submitted for inclusion in the Work
+  by You to the Licensor shall be under the terms and conditions of
+  this License, without any additional terms or conditions.
+  Notwithstanding the above, nothing herein shall supersede or modify
+  the terms of any separate license agreement you may have executed
+  with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+  names, trademarks, service marks, or product names of the Licensor,
+  except as required for reasonable and customary use in describing the
+  origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+  agreed to in writing, Licensor provides the Work (and each
+  Contributor provides its Contributions) on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+  implied, including, without limitation, any warranties or conditions
+  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+  PARTICULAR PURPOSE. You are solely responsible for determining the
+  appropriateness of using or redistributing the Work and assume any
+  risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+  whether in tort (including negligence), contract, or otherwise,
+  unless required by applicable law (such as deliberate and grossly
+  negligent acts) or agreed to in writing, shall any Contributor be
+  liable to You for damages, including any direct, indirect, special,
+  incidental, or consequential damages of any character arising as a
+  result of this License or out of the use or inability to use the
+  Work (including but not limited to damages for loss of goodwill,
+  work stoppage, computer failure or malfunction, or any and all
+  other commercial damages or losses), even if such Contributor
+  has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+  the Work or Derivative Works thereof, You may choose to offer,
+  and charge a fee for, acceptance of support, warranty, indemnity,
+  or other liability obligations and/or rights consistent with this
+  License. However, in accepting such obligations, You may act only
+  on Your own behalf and on Your sole responsibility, not on behalf
+  of any other Contributor, and only if You agree to indemnify,
+  defend, and hold each Contributor harmless for any liability
+  incurred by, or claims asserted against, such Contributor by reason
+  of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+  To apply the Apache License to your work, attach the following
+  boilerplate notice, with the fields enclosed by brackets "[]"
+  replaced with your own identifying information. (Don't include
+  the brackets!)  The text should be enclosed in the appropriate
+  comment syntax for the file format. We also recommend that a
+  file or class name and description of purpose be included on the
+  same "printed page" as the copyright notice for easier
+  identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

packages/app-council/README.md

@@ -0,0 +1 @@
+# @polkadot/app-council

packages/app-council/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@polkadot/app-council",
+  "version": "0.33.0-beta.99",
+  "description": "Council",
+  "main": "index.js",
+  "scripts": {},
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "maintainers": [
+    "Jaco Greeff <jacogr@gmail.com>"
+  ],
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@babel/runtime": "^7.4.5",
+    "@polkadot/ui-app": "^0.33.0-beta.99",
+    "@polkadot/ui-reactive": "^0.33.0-beta.99"
+  }
+}

packages/app-council/src/Overview/Candidate.tsx

@@ -0,0 +1,25 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import { AddressRow, Card } from '@polkadot/ui-app';
+
+type Props = {
+  address: string
+};
+
+export default class Candidate extends React.PureComponent<Props> {
+  render () {
+    const { address } = this.props;
+
+    return (
+      <Card>
+        <AddressRow
+          defaultName='candidate'
+          value={address}
+        />
+      </Card>
+    );
+  }
+}

packages/app-council/src/Overview/Member.tsx

@@ -0,0 +1,35 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { I18nProps } from '@polkadot/ui-app/types';
+
+import BN from 'bn.js';
+import React from 'react';
+import { AddressRow, Card } from '@polkadot/ui-app';
+import { formatNumber } from '@polkadot/util';
+
+import translate from '../translate';
+
+type Props = I18nProps & {
+  address: string,
+  block: BN
+};
+
+class Member extends React.PureComponent<Props> {
+  render () {
+    const { address, block, t } = this.props;
+
+    return (
+      <Card>
+        <AddressRow
+          buttons={<div><label>{t('active until')}</label>#{formatNumber(block)}</div>}
+          defaultName='council member'
+          value={address}
+        />
+      </Card>
+    );
+  }
+}
+
+export default translate(Member);

packages/app-council/src/Overview/Members.tsx

@@ -0,0 +1,68 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { I18nProps } from '@polkadot/ui-app/types';
+
+import React from 'react';
+import { AccountId, BlockNumber } from '@polkadot/types';
+import { Columar, Column } from '@polkadot/ui-app';
+import { withCalls } from '@polkadot/ui-api';
+
+import translate from '../translate';
+import Candidate from './Candidate';
+import Member from './Member';
+
+type Props = I18nProps & {
+  council_activeCouncil?: Array<[string, BlockNumber]>
+  council_candidates?: Array<string>
+};
+
+class Members extends React.PureComponent<Props> {
+  render () {
+    const { council_activeCouncil = [], council_candidates = [], t } = this.props;
+
+    return (
+      <Columar>
+        <Column header={t('members')}>
+          {this.renderNone(council_activeCouncil.map(([address, block]) => (
+            <Member
+              address={address}
+              block={block}
+              key={address}
+            />
+          )))}
+        </Column>
+        <Column header={t('candidates')}>
+          {this.renderNone(council_candidates.map((address) => (
+            <Candidate
+              address={address}
+              key={address}
+            />
+          )))}
+        </Column>
+      </Columar>
+    );
+  }
+
+  private renderNone (items: Array<React.ReactNode>) {
+    const { t } = this.props;
+
+    return items.length
+      ? items
+      : <article>{t('No addresses found')}</article>;
+  }
+}
+
+export default translate(
+  withCalls<Props>(
+    ['query.council.activeCouncil', {
+      transform: (active: Array<[AccountId, BlockNumber]>) =>
+        active.map(([accountId, blockNumber]) => [accountId.toString(), blockNumber])
+    }],
+    ['query.council.candidates', {
+      transform: (candidates: Array<AccountId>) =>
+        candidates.map((accountId) => accountId.toString())
+    }]
+  )(Members)
+);

packages/app-council/src/Overview/Summary.tsx

@@ -0,0 +1,62 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { I18nProps } from '@polkadot/ui-app/types';
+
+import BN from 'bn.js';
+import React from 'react';
+import { AccountId, BlockNumber } from '@polkadot/types';
+import { SummaryBox, CardSummary } from '@polkadot/ui-app';
+import { withCalls } from '@polkadot/ui-api';
+import { formatNumber } from '@polkadot/util';
+
+import translate from '../translate';
+
+type Props = I18nProps & {
+  council_activeCouncil?: Array<[AccountId, BlockNumber]>
+  council_candidateCount?: BN,
+  council_desiredSeats?: BN,
+  council_termDuration?: BN,
+  council_voteCount?: BN
+};
+
+class Summary extends React.PureComponent<Props> {
+  render () {
+    const { council_activeCouncil = [], council_candidateCount = new BN(0), council_desiredSeats = new BN(1), council_termDuration = new BN(0), council_voteCount = new BN(0), t } = this.props;
+
+    return (
+      <SummaryBox>
+        <section>
+          <CardSummary label={t('seats')}>
+            {formatNumber(council_activeCouncil.length)}/{formatNumber(council_desiredSeats)}
+          </CardSummary>
+          <CardSummary label={t('candidates')}>
+            {formatNumber(council_candidateCount)}
+          </CardSummary>
+        </section>
+        <section>
+          <CardSummary label={t('total votes')}>
+            {formatNumber(council_voteCount)}
+          </CardSummary>
+        </section>
+
+        <section>
+          <CardSummary label={t('term duration')}>
+              {formatNumber(council_termDuration)}
+           </CardSummary>
+        </section>
+      </SummaryBox>
+    );
+  }
+}
+
+export default translate(
+  withCalls<Props>(
+    'query.council.activeCouncil',
+    'query.council.candidateCount',
+    'query.council.desiredSeats',
+    'query.council.termDuration',
+    'query.council.voteCount'
+  )(Summary)
+);

packages/app-council/src/Overview/index.tsx

@@ -0,0 +1,21 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+
+import Members from './Members';
+import Summary from './Summary';
+
+type Props = {};
+
+export default class Overview extends React.PureComponent<Props> {
+  render () {
+    return (
+      <>
+        <Summary />
+        <Members />
+      </>
+    );
+  }
+}

packages/app-council/src/index.tsx

@@ -0,0 +1,57 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { AppProps, BareProps, I18nProps } from '@polkadot/ui-app/types';
+import { TabItem } from '@polkadot/ui-app/Tabs';
+
+import React from 'react';
+import { Route, Switch } from 'react-router';
+import { Tabs } from '@polkadot/ui-app';
+
+import Overview from './Overview';
+import translate from './translate';
+
+type Props = AppProps & BareProps & I18nProps;
+
+type State = {
+  tabs: Array<TabItem>
+};
+
+class App extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props);
+
+    const { t } = props;
+
+    this.state = {
+      tabs: [
+        {
+          name: 'overview',
+          text: t('Council overview')
+        }
+      ]
+    };
+  }
+
+  render () {
+    const { basePath } = this.props;
+    const { tabs } = this.state;
+
+    return (
+      <main>
+        <header>
+          <Tabs
+            basePath={basePath}
+            items={tabs}
+          />
+        </header>
+        <Switch>
+          <Route component={Overview} />
+        </Switch>
+      </main>
+    );
+  }
+}
+
+export default translate(App);

packages/app-council/src/translate.ts

@@ -0,0 +1,7 @@
+// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { withTranslation } from 'react-i18next';
+
+export default withTranslation(['council', 'ui']);

packages/app-staking/src/Account/index.tsx

@@ -222,17 +222,15 @@ class Account extends React.PureComponent<Props, State> {
     return (
       <div className='staking--Account-detail'>
         <label className='staking--label'>{t('nominating')}</label>
-        {
-          nominators.map((nomineeId, index) => (
-            <AddressMini
-              key={index}
-              value={nomineeId}
-              offlineStatus={recentlyOffline[nomineeId.toString()]}
-              withBalance={false}
-              withBonded
-            />
-          ))
-        }
+        {nominators.map((nomineeId, index) => (
+          <AddressMini
+            key={index}
+            value={nomineeId}
+            offlineStatus={recentlyOffline[nomineeId.toString()]}
+            withBalance={false}
+            withBonded
+          />
+        ))}
       </div>
     );
   }

packages/app-staking/src/Overview/Address.tsx

@@ -7,9 +7,10 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { ValidatorFilter, RecentlyOfflineMap } from '../types';
 
 import React from 'react';
+import styled from 'styled-components';
 import { AccountId, Balance, Exposure } from '@polkadot/types';
 import { withCalls, withMulti } from '@polkadot/ui-api/with';
-import { AddressMini, AddressRow, RecentlyOffline } from '@polkadot/ui-app';
+import { AddressMini, AddressRow, Card, RecentlyOffline } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
 import { formatBalance } from '@polkadot/util';
 
@@ -18,6 +19,7 @@ import translate from '../translate';
 type Props = I18nProps & {
   address: string,
   balances: DerivedBalancesMap,
+  className?: string,
   defaultName: string,
   lastAuthor: string,
   lastBlock: string,
@@ -74,7 +76,7 @@ class Address extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { address, defaultName, lastAuthor, lastBlock, filter } = this.props;
+    const { address, className, defaultName, lastAuthor, lastBlock, filter } = this.props;
     const { controllerId, stakers, stashId } = this.state;
     const isAuthor = [address, controllerId, stashId].includes(lastAuthor);
     const bonded = stakers && !stakers.own.isZero()
@@ -90,7 +92,10 @@ class Address extends React.PureComponent<Props, State> {
     }
 
     return (
-      <article key={stashId || controllerId}>
+      <Card
+        className={className}
+        key={stashId || controllerId}
+      >
         <AddressRow
           buttons={this.renderKeys()}
           defaultName={defaultName}
@@ -105,7 +110,7 @@ class Address extends React.PureComponent<Props, State> {
             ? <div className='blockNumber'>#{lastBlock}</div>
             : null
         }
-      </article>
+      </Card>
     );
   }
 
@@ -115,7 +120,7 @@ class Address extends React.PureComponent<Props, State> {
     const isSame = controllerId === sessionId;
 
     return (
-      <div className='staking--accounts-info'>
+      <div className='staking--Address-info'>
         {controllerId
           ? (
             <div>
@@ -228,7 +233,22 @@ class Address extends React.PureComponent<Props, State> {
 }
 
 export default withMulti(
-  Address,
+  styled(Address as React.ComponentClass<Props>)`
+    .blockNumber {
+      background: #3f3f3f;
+      border-radius: 0.25rem;
+      bottom: 0.75rem;
+      box-shadow: 0 3px 3px rgba(0,0,0,.2);
+      color: #eee;
+      font-size: 1.5rem;
+      font-weight: 100;
+      line-height: 1.5rem;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      right: -0.75rem;
+      vertical-align: middle;
+    }
+  `,
   translate,
   withCalls<Props>(
     ['derive.staking.info', { paramName: 'address' }]

packages/app-staking/src/Overview/Summary.tsx

@@ -7,6 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
+import styled from 'styled-components';
 import SummarySession from '@polkadot/app-explorer/SummarySession';
 import { CardSummary, IdentityIcon, SummaryBox } from '@polkadot/ui-app';
 import { withCalls, withMulti } from '@polkadot/ui-api';
@@ -15,6 +16,7 @@ import translate from '../translate';
 
 type Props = I18nProps & {
   balances: DerivedBalancesMap,
+  className?: string,
   controllers: Array<string>,
   lastAuthor?: string,
   lastBlock: string,
@@ -63,7 +65,13 @@ class Summary extends React.PureComponent<Props> {
 }
 
 export default withMulti(
-  Summary,
+  styled(Summary)`
+    .validator--Account-block-icon {
+      margin-right: 0.75rem;
+      margin-top: -0.25rem;
+      vertical-align: middle;
+    }
+  `,
   translate,
   withCalls<Props>('query.staking.validatorCount')
 );

packages/app-staking/src/Overview/index.css

@@ -1,116 +0,0 @@
-/* Copyright 2017-2019 @polkadot/app-staking authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.validator--Account-info-address {
-  flex: 3;
-  margin: 0px 5px 0px 5px;
-}
-
-.validator--Account-info-details {
-  flex: 1;
-  margin: 0px 5px 0px 5px;
-}
-
-.validator--row {
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 1.5em;
-}
-
-.validator--Account-address {
-  font-family: monospace;
-  font-size: 1.5rem;
-}
-
-.validator--Account-icon {
-  margin-right: 1rem;
-}
-
-.validator--Account-block-icon {
-  margin-right: 0.75rem;
-  margin-top: -0.25rem;
-  vertical-align: middle;
-}
-
-.validator--Account-validating {
-  opacity: 0.25 !important;
-  padding-top: 0.5em;
-  vertical-align: top !important;
-}
-
-.validator--Account-validating.isValidator {
-  color: red;
-  opacity: 1 !important;
-}
-
-.validator--Account-details,
-.column{
-  flex: 1;
-}
-
-.validator--Account-balance,
-.validator--Account-nonce {
-  opacity: 0.45;
-  text-align: right;
-}
-
-.validator--ValidatorsList {
-  article {
-    position: relative;
-
-    details {
-      summary {
-        cursor: pointer;
-        outline: none;
-      }
-
-      summary + div {
-        margin-top: 0;
-      }
-    }
-
-    .blockNumber {
-      background: #3f3f3f;
-      border-radius: 0.25rem;
-      bottom: 0.75rem;
-      box-shadow: 0 3px 3px rgba(0,0,0,.2);
-      color: #eee;
-      font-size: 1.5rem;
-      font-weight: 100;
-      line-height: 1.5rem;
-      padding: 0.25rem 0.5rem;
-      position: absolute;
-      right: -0.75rem;
-      vertical-align: middle;
-    }
-  }
-}
-
-.validator--current,
-.validator--next {
-  margin: 1em;
-  flex: 1;
-
-  .ui--AddressRow + .ui--AddressRow {
-    margin-top: 1em;
-  }
-}
-
-.validator--Account-address.isMine {
-  color: #47b547;
-  font-weight: 500;
-  opacity: 1 !important;
-}
-
-.validator-icon {
-  color: #2284d0;
-  position: absolute;
-  font-size: 1.5em !important;
-}
-
-.nominator-icon {
-  color: #aaa;
-  position: absolute;
-  font-size: 1.5em !important;
-}

packages/app-staking/src/Overview/index.tsx

@@ -6,8 +6,6 @@ import { Balance } from '@polkadot/types';
 import { BareProps } from '@polkadot/ui-app/types';
 import { ComponentProps } from '../types';
 
-import './index.css';
-
 import React from 'react';
 import { HeaderExtended } from '@polkadot/api-derive';
 import { withCalls, withMulti } from '@polkadot/ui-api/with';

packages/app-staking/src/index.css

@@ -6,103 +6,12 @@
   background: transparent !important;
 }
 
-.staking--App-navigation.ui--Button-Group {
-  margin-bottom: 2em;
-  text-align: center;
-}
-
-.staking--Account {
-  position: relative;
-  flex: 1 1;
-  min-width: 48%;
-
-  .ui--AddressMini {
-    display: block;
-    text-align: right;
-  }
-}
-
-.ui--Nominators {
-  overflow-y: overlay;
-  max-height: 196px;
-  padding-right: 18px;
-}
-
-.staking--Account-expand {
-  min-width: 18rem;
-  text-align: right;
-}
-
 .staking--Account-links {
   display: flex;
   align-items: flex-end;
   flex-direction: column;
 }
 
-.staking--Account-details {
-  display: inline-block;
-  text-align: left;
-  vertical-align: top;
-}
-
-.staking--Account-nominate {
-  padding: 0 0 3em 3em;
-}
-
-.staking--Account-nominating {
-  margin-top: 1rem;
-}
-
-.staking--Account-nominating * {
-  vertical-align: middle;
-}
-
-.staking--Account-nominating .ui--IdentityIcon {
-  margin-right: 0.25rem;
-}
-
-.staking--Account-info {
-  display: inline-block;
-}
-
-.staking--Account-address {
-  font-family: monospace;
-  font-size: 1.5rem;
-}
-
-.staking--Account-icon {
-  margin-right: 1rem;
-}
-
-.staking--Account-validating {
-  opacity: 0.25 !important;
-  position: absolute;
-  top: 1em;
-  left: 1em;
-}
-
-.staking--Account-validating.isValidator {
-  color: #d75ea1;
-  opacity: 1 !important;
-}
-
-.staking--Account-balance,
-.staking--Account-nonce {
-  opacity: 0.45;
-  text-align: right;
-}
-
-.staking--Summary-text {
-  text-align: right;
-  font-size: 1rem;
-  font-weight: normal;
-  line-height: 1.2rem;
-}
-
-.staking--accounts-info {
-  text-align: right;
-}
-
 .staking--Account-detail {
   text-align: right;
 
@@ -111,6 +20,10 @@
   }
 }
 
-.staking--accounts-info .staking--label {
-  margin: 0 2.25rem -0.75rem 0;
+.staking--Address-info {
+  text-align: right;
+
+  .staking--label {
+    margin: 0 2.25rem -0.75rem 0;
+  }
 }

packages/apps-routing/src/council.ts

@@ -0,0 +1,23 @@
+// Copyright 2017-2019 @polkadot/apps-routing authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Routes } from './types';
+
+import Council from '@polkadot/app-council';
+
+export default ([
+  {
+    Component: Council,
+    display: {
+      needsApi: [
+        'query.council.candidates'
+      ]
+    },
+    i18n: {
+      defaultValue: 'Council'
+    },
+    icon: 'building',
+    name: 'council'
+  }
+] as Routes);

packages/apps-routing/src/index.ts

@@ -10,6 +10,7 @@ import template from './123code';
 import accounts from './accounts';
 import addressbook from './addressbook';
 import contracts from './contracts';
+import council from './council';
 import dashboard from './dashboard';
 import democracy from './democracy';
 import explorer from './explorer';
@@ -26,26 +27,28 @@ const routes: Routes = appSettings.uiMode === 'light'
   ? ([] as Routes).concat(
     dashboard,
     explorer,
-    staking,
-    democracy,
-    null,
     accounts,
     addressbook,
     transfer,
     null,
+    staking,
+    democracy,
+    council,
+    null,
     settings,
     template
   )
   : ([] as Routes).concat(
     dashboard,
     explorer,
-    staking,
-    democracy,
-    null,
     accounts,
     addressbook,
     transfer,
     null,
+    staking,
+    democracy,
+    council,
+    null,
     contracts,
     storage,
     extrinsics,

packages/apps/src/overlays/Accounts.tsx

@@ -80,7 +80,7 @@ class Accounts extends React.PureComponent<Props, State> {
 }
 
 export default withMulti(
-  styled(Accounts as any)`
+  styled(Accounts as React.ComponentClass<Props>)`
     background: #fff6cb;
     border-color: #e7c000;
     color: #6b5900;

packages/ui-app/src/AddressRow.tsx

@@ -414,7 +414,7 @@ export {
 };
 
 export default withMulti(
-  styled(AddressRow as any)`
+  styled(AddressRow as React.ComponentClass<Props>)`
     text-align: left;
 
     &.inline {

packages/ui-app/src/Card.tsx

@@ -15,7 +15,7 @@ class Card extends React.PureComponent<Props> {
     const { children, className } = this.props;
 
     return (
-      <article className={className}>
+      <article className={`ui--Card ${className}`}>
         {children}
       </article>
     );
@@ -24,10 +24,6 @@ class Card extends React.PureComponent<Props> {
 
 export default styled(Card)`
   position: relative;
-  flex: 1 1;
-  min-width: 24%;
-  max-width: 24%;
-  justify-content: space-around;
 
   i.help.circle.icon,
   .ui.button.mini,
@@ -43,18 +39,12 @@ export default styled(Card)`
     }
   }
 
-  @media (max-width: 2060px) {
-    min-width: 32%;
-    max-width: 32%;
-  }
+  .ui--AddressSummary-buttons {
+    text-align: right;
+    margin-bottom: 2em;
 
-  @media (max-width: 1580px) {
-      min-width: 49%;
-      max-width: 49%;
-  }
-
-  @media (max-width: 1100px) {
-    min-width: 100%;
-    max-width: 100%;
+    button {
+      margin-left: 0.2em;
+    }
   }
 `;

packages/ui-app/src/CardGrid.tsx

@@ -38,8 +38,29 @@ export default styled(CardGrid)`
 
     > .ui--CardGrid-spacer {
       flex: 1 1;
-      margin: .25rem;
+      margin: 0.25rem;
       padding: 1rem 1.5rem;
     }
   }
+
+  .ui--Card {
+    flex: 1 1;
+    min-width: 24%;
+    max-width: 24%;
+
+    @media (max-width: 2060px) {
+      min-width: 32%;
+      max-width: 32%;
+    }
+
+    @media (max-width: 1580px) {
+      min-width: 49%;
+      max-width: 49%;
+    }
+
+    @media (max-width: 1100px) {
+      min-width: 100%;
+      max-width: 100%;
+    }
+  }
 `;

packages/ui-app/src/SummaryBox.tsx

@@ -8,10 +8,23 @@ import React from 'react';
 import styled from 'styled-components';
 
 type Props = BareProps & {
-  children?: React.ReactNode
+  children?: React.ReactNode,
+  className?: string
 };
 
-const StyledSummary = styled.div`
+class SummaryBox extends React.PureComponent<Props> {
+  render () {
+    const { children, className } = this.props;
+
+    return (
+      <div className={className}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default styled(SummaryBox)`
   align-items: stretch;
   border-radius: 4px;
   display: flex;
@@ -33,7 +46,6 @@ const StyledSummary = styled.div`
 		overflow: hidden;
 		text-align: left;
 		text-overflow: ellipsis;
-		vertical-align: middle;
 		white-space: nowrap;
 
 		+ div {
@@ -59,14 +71,3 @@ const StyledSummary = styled.div`
     padding-top: 0;
   }
 `;
-
-export default class SummaryBox extends React.PureComponent<Props> {
-  render () {
-
-    return (
-      <StyledSummary>
-        {this.props.children}
-      </StyledSummary>
-    );
-  }
-}

tsconfig.json

@@ -11,6 +11,8 @@
       "@polkadot/app-address-book/*": [ "packages/app-address-book/src/*" ],
       "@polkadot/app-contracts": [ "packages/app-contracts/src" ],
       "@polkadot/app-contracts/*": [ "packages/app-contracts/src/*" ],
+      "@polkadot/app-council": [ "packages/app-council/src" ],
+      "@polkadot/app-council/*": [ "packages/app-council/src/*" ],
       "@polkadot/app-dashboard": [ "packages/app-dashboard/src" ],
       "@polkadot/app-dashboard/*": [ "packages/app-dashboard/src/*" ],
       "@polkadot/app-democracy": [ "packages/app-democracy/src" ],