From 4e4e9514e5023b1232fe25390e92f0d140647d3f Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 28 May 2019 10:59:15 +0200
Subject: [PATCH] Swap accounts/addresses/staking to CardGrid & Card layout
 (#1225)

* Swap accounts/addresses to CardGrid & Card layout

* Staking to CardGrid layout

* Staking styling adjustments

* Edit inputs left align
---
 packages/app-accounts/src/Account.tsx         | 45 +-----------
 packages/app-accounts/src/Overview.tsx        | 64 +++++++----------
 packages/app-accounts/src/index.tsx           |  2 +-
 packages/app-address-book/src/Address.tsx     | 45 +-----------
 packages/app-address-book/src/Overview.tsx    | 52 ++++++--------
 packages/app-address-book/src/index.tsx       |  2 +-
 packages/app-staking/src/Account/index.tsx    |  6 +-
 packages/app-staking/src/Accounts.tsx         | 51 +++++---------
 packages/app-staking/src/Overview/Address.tsx |  2 +-
 packages/app-staking/src/index.css            | 68 +++----------------
 packages/ui-app/src/AddressSummary.tsx        |  1 -
 packages/ui-app/src/Card.tsx                  | 55 +++++++++++++++
 packages/ui-app/src/CardGrid.tsx              | 45 ++++++++++++
 packages/ui-app/src/index.tsx                 |  2 +
 packages/ui-app/src/styles/components.css     |  6 +-
 15 files changed, 186 insertions(+), 260 deletions(-)
 create mode 100644 packages/ui-app/src/Card.tsx
 create mode 100644 packages/ui-app/src/CardGrid.tsx

diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx
index a5714c3fde..18a4c96bdf 100644
--- a/packages/app-accounts/src/Account.tsx
+++ b/packages/app-accounts/src/Account.tsx
@@ -6,8 +6,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import styled from 'styled-components';
-import { AddressInfo, AddressRow, Button, Icon } from '@polkadot/ui-app';
+import { AddressInfo, AddressRow, Button, Card, Icon } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
 
 import Backup from './modals/Backup';
@@ -29,44 +28,6 @@ type State = {
   isTransferOpen: boolean
 };
 
-// FIXME This is duplicated in app-ddresses
-const Wrapper = styled.article`
-  position: relative;
-  flex: 1 1;
-  min-width: 24%;
-  max-width: 24%;
-  justify-content: space-around;
-
-  .accounts--Account-buttons {
-    text-align: right;
-    margin-bottom: 2em;
-  }
-
-  .ui--AddressSummary-base {
-    flex: 1;
-    padding: 0;
-  }
-
-  .accounts--Account-buttons > button {
-    margin: .2em;
-  }
-
-  @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%;
-  }
-`;
-
 class Account extends React.PureComponent<Props> {
   state: State;
 
@@ -89,7 +50,7 @@ class Account extends React.PureComponent<Props> {
     // FIXME It is a bit heavy-handled switching of being editable here completely
     // (and removing the tags, however the keyring cannot save these)
     return (
-      <Wrapper className='overview--Account'>
+      <Card>
         {this.renderModals()}
         <AddressRow
           buttons={this.renderButtons()}
@@ -106,7 +67,7 @@ class Account extends React.PureComponent<Props> {
             value={address}
           />
         </AddressRow>
-      </Wrapper>
+      </Card>
     );
   }
 
diff --git a/packages/app-accounts/src/Overview.tsx b/packages/app-accounts/src/Overview.tsx
index 4835290edd..ae074b622f 100644
--- a/packages/app-accounts/src/Overview.tsx
+++ b/packages/app-accounts/src/Overview.tsx
@@ -7,10 +7,9 @@ import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import { ComponentProps } from './types';
 
 import React from 'react';
-import styled from 'styled-components';
 import accountObservable from '@polkadot/ui-keyring/observable/accounts';
 import { withMulti, withObservable } from '@polkadot/ui-api';
-import { Button } from '@polkadot/ui-app';
+import { Button, CardGrid } from '@polkadot/ui-app';
 
 import CreateModal from './modals/Create';
 import ImportModal from './modals/Import';
@@ -26,19 +25,6 @@ type State = {
   isImportOpen: boolean
 };
 
-const Wrapper = styled.div`
-  .accounts {
-    display: flex;
-    flex-wrap: wrap;
-
-    .spacer {
-      flex: 1 1;
-      margin: .25rem;
-      padding: 1rem 1.5rem;
-    }
-  }
-`;
-
 class Overview extends React.PureComponent<Props, State> {
   state: State = {
     isCreateOpen: false,
@@ -50,20 +36,23 @@ class Overview extends React.PureComponent<Props, State> {
     const { isCreateOpen, isImportOpen } = this.state;
 
     return (
-      <Wrapper>
-        <Button.Group>
-          <Button
-            isPrimary
-            label={t('Add account')}
-            onClick={this.toggleCreate}
-          />
-          <Button.Or />
-          <Button
-            isPrimary
-            label={t('Restore JSON')}
-            onClick={this.toggleImport}
-          />
-        </Button.Group>
+      <CardGrid
+        buttons={
+          <Button.Group>
+            <Button
+              isPrimary
+              label={t('Add account')}
+              onClick={this.toggleCreate}
+            />
+            <Button.Or />
+            <Button
+              isPrimary
+              label={t('Restore JSON')}
+              onClick={this.toggleImport}
+            />
+          </Button.Group>
+        }
+      >
         {isCreateOpen && (
           <CreateModal
             onClose={this.toggleCreate}
@@ -76,16 +65,13 @@ class Overview extends React.PureComponent<Props, State> {
             onStatusChange={onStatusChange}
           />
         )}
-        <div className='accounts'>
-          {accounts && Object.keys(accounts).map((address) => (
-            <Account
-              address={address}
-              key={address}
-            />
-          ))}
-          <div className='spacer' />
-        </div>
-      </Wrapper>
+        {accounts && Object.keys(accounts).map((address) => (
+          <Account
+            address={address}
+            key={address}
+          />
+        ))}
+      </CardGrid>
     );
   }
 
diff --git a/packages/app-accounts/src/index.tsx b/packages/app-accounts/src/index.tsx
index fad790b780..bb06dc0d3a 100644
--- a/packages/app-accounts/src/index.tsx
+++ b/packages/app-accounts/src/index.tsx
@@ -45,7 +45,7 @@ class AccountsApp extends React.PureComponent<Props, State> {
       tabs: [
         {
           name: 'overview',
-          text: t('Overview')
+          text: t('My accounts')
         },
         {
           name: 'vanity',
diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx
index 7f4955fff5..736d35e58e 100644
--- a/packages/app-address-book/src/Address.tsx
+++ b/packages/app-address-book/src/Address.tsx
@@ -7,8 +7,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import styled from 'styled-components';
-import { AddressInfo, AddressRow, Button } from '@polkadot/ui-app';
+import { AddressInfo, AddressRow, Button, Card } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
 
 import Forgetting from './modals/Forgetting';
@@ -25,44 +24,6 @@ type State = {
   isForgetOpen: boolean
 };
 
-// FIXME This is duplicated in app-accounts
-const Wrapper = styled.article`
-  position: relative;
-  flex: 1 1;
-  min-width: 24%;
-  max-width: 24%;
-  justify-content: space-around;
-
-  .accounts--Account-buttons {
-    text-align: right;
-    margin-bottom: 2em;
-  }
-
-  .ui--AddressSummary-base {
-    flex: 1;
-    padding: 0;
-  }
-
-  .accounts--Account-buttons > button {
-    margin: .2em;
-  }
-
-  @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%;
-  }
-`;
-
 class Address extends React.PureComponent<Props> {
   state: State;
 
@@ -83,7 +44,7 @@ class Address extends React.PureComponent<Props> {
     const { isEditable } = this.state;
 
     return (
-      <Wrapper className='overview--Account'>
+      <Card>
         {this.renderModals()}
         <AddressRow
           buttons={this.renderButtons()}
@@ -100,7 +61,7 @@ class Address extends React.PureComponent<Props> {
             value={address}
           />
         </AddressRow>
-      </Wrapper>
+      </Card>
     );
   }
 
diff --git a/packages/app-address-book/src/Overview.tsx b/packages/app-address-book/src/Overview.tsx
index ee75d90777..2afaf7a097 100644
--- a/packages/app-address-book/src/Overview.tsx
+++ b/packages/app-address-book/src/Overview.tsx
@@ -7,8 +7,7 @@ import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import { ComponentProps } from './types';
 
 import React from 'react';
-import styled from 'styled-components';
-import { Button } from '@polkadot/ui-app';
+import { Button, CardGrid } from '@polkadot/ui-app';
 import addressObservable from '@polkadot/ui-keyring/observable/addresses';
 import { withMulti, withObservable } from '@polkadot/ui-api';
 
@@ -24,19 +23,6 @@ type State = {
   isCreateOpen: boolean
 };
 
-const Wrapper = styled.div`
-  .addresses {
-    display: flex;
-    flex-wrap: wrap;
-
-    .spacer {
-      flex: 1 1;
-      margin: .25rem;
-      padding: 1rem 1.5rem;
-    }
-  }
-`;
-
 class Overview extends React.PureComponent<Props, State> {
   state: State = {
     isCreateOpen: false
@@ -47,30 +33,30 @@ class Overview extends React.PureComponent<Props, State> {
     const { isCreateOpen } = this.state;
 
     return (
-      <Wrapper>
-        <Button.Group>
-          <Button
-            isPrimary
-            label={t('Add contact')}
-            onClick={this.toggleCreate}
-          />
-        </Button.Group>
+      <CardGrid
+        buttons={
+          <Button.Group>
+            <Button
+              isPrimary
+              label={t('Add contact')}
+              onClick={this.toggleCreate}
+            />
+          </Button.Group>
+        }
+      >
         {isCreateOpen && (
           <CreateModal
             onClose={this.toggleCreate}
             onStatusChange={onStatusChange}
           />
         )}
-        <div className='addresses'>
-          {addresses && Object.keys(addresses).map((address) => (
-            <Address
-              address={address}
-              key={address}
-            />
-          ))}
-          <div className='spacer' />
-        </div>
-      </Wrapper>
+        {addresses && Object.keys(addresses).map((address) => (
+          <Address
+            address={address}
+            key={address}
+          />
+        ))}
+      </CardGrid>
     );
   }
 
diff --git a/packages/app-address-book/src/index.tsx b/packages/app-address-book/src/index.tsx
index 4c862b26df..247aafa875 100644
--- a/packages/app-address-book/src/index.tsx
+++ b/packages/app-address-book/src/index.tsx
@@ -46,7 +46,7 @@ class AddressBookApp extends React.PureComponent<Props, State> {
       items: [
         {
           name: 'overview',
-          text: t('Overview')
+          text: t('My contacts')
         }
       ]
     };
diff --git a/packages/app-staking/src/Account/index.tsx b/packages/app-staking/src/Account/index.tsx
index 869eedd9bf..25314cd613 100644
--- a/packages/app-staking/src/Account/index.tsx
+++ b/packages/app-staking/src/Account/index.tsx
@@ -10,7 +10,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
 
 import React from 'react';
-import { AddressInfo, AddressMini, AddressRow, Button, TxButton } from '@polkadot/ui-app';
+import { AddressInfo, AddressMini, AddressRow, Button, Card, TxButton } from '@polkadot/ui-app';
 import { withCalls } from '@polkadot/ui-api';
 
 import Bond from './Bond';
@@ -107,7 +107,7 @@ class Account extends React.PureComponent<Props, State> {
     // This is deliberate in order to display the Component modals in a performant matter later on
     // because their state will already be loaded.
     return (
-      <article className='staking--Account'>
+      <Card>
         {this.renderBond()}
         {this.renderBondExtra()}
         {this.renderNominating()}
@@ -136,7 +136,7 @@ class Account extends React.PureComponent<Props, State> {
             </div>
           </AddressInfo>
         </AddressRow>
-      </article>
+      </Card>
     );
   }
 
diff --git a/packages/app-staking/src/Accounts.tsx b/packages/app-staking/src/Accounts.tsx
index 313125a2e0..bd081cdbce 100644
--- a/packages/app-staking/src/Accounts.tsx
+++ b/packages/app-staking/src/Accounts.tsx
@@ -6,8 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { AccountFilter, ComponentProps } from './types';
 
 import React from 'react';
-import styled from 'styled-components';
-import { Dropdown, FilterOverlay } from '@polkadot/ui-app';
+import { CardGrid, Dropdown, FilterOverlay } from '@polkadot/ui-app';
 import { getAddrName } from '@polkadot/ui-app/util';
 import keyring from '@polkadot/ui-keyring';
 import createOption from '@polkadot/ui-keyring/options/item';
@@ -23,19 +22,6 @@ type State = {
   filterOptions: Array<{ text: React.ReactNode, value: AccountFilter }>
 };
 
-const Wrapper = styled.div`
-  .accounts {
-    display: flex;
-    flex-wrap: wrap;
-
-    .spacer {
-      flex: 1 1;
-      margin: .25rem;
-      padding: 1rem 1.5rem;
-    }
-  }
-`;
-
 class Accounts extends React.PureComponent<Props, State> {
   state: State;
 
@@ -62,7 +48,7 @@ class Accounts extends React.PureComponent<Props, State> {
     const stashOptions = this.getStashOptions();
 
     return (
-      <Wrapper>
+      <CardGrid>
         <FilterOverlay>
           <Dropdown
             help={t('Select which types of accounts to display, either all, only the stash accounts or the controller accounts.')}
@@ -72,25 +58,22 @@ class Accounts extends React.PureComponent<Props, State> {
             value={filter}
           />
         </FilterOverlay>
-        <div className='accounts'>
-          {accounts.map((account) => {
-            const address = account.address();
+        {accounts.map((account) => {
+          const address = account.address();
 
-            return (
-              <Account
-                accountId={address}
-                balances={balances}
-                filter={filter}
-                isValidator={validators.includes(address)}
-                key={address}
-                recentlyOffline={recentlyOffline}
-                stashOptions={stashOptions}
-              />
-            );
-          })}
-          <div className='spacer' />
-        </div>
-      </Wrapper>
+          return (
+            <Account
+              accountId={address}
+              balances={balances}
+              filter={filter}
+              isValidator={validators.includes(address)}
+              key={address}
+              recentlyOffline={recentlyOffline}
+              stashOptions={stashOptions}
+            />
+          );
+        })}
+      </CardGrid>
     );
   }
 
diff --git a/packages/app-staking/src/Overview/Address.tsx b/packages/app-staking/src/Overview/Address.tsx
index 8ac898653b..812d38a60a 100644
--- a/packages/app-staking/src/Overview/Address.tsx
+++ b/packages/app-staking/src/Overview/Address.tsx
@@ -190,7 +190,7 @@ class Address extends React.PureComponent<Props, State> {
     }
 
     return (
-      <details className='staking--Account-detail'>
+      <details>
         <summary>
           {t('Nominators ({{count}})', {
             replace: {
diff --git a/packages/app-staking/src/index.css b/packages/app-staking/src/index.css
index 686d8eb036..1279b6c816 100644
--- a/packages/app-staking/src/index.css
+++ b/packages/app-staking/src/index.css
@@ -103,13 +103,18 @@
   text-align: right;
 }
 
-.staking--Account-detail,
-.staking--accounts-info {
+.staking--Account-detail {
+  text-align: right;
+
   .staking--label {
-    margin: 0 1.75rem -.75rem 0;
+    margin: 0 1.75rem -0.75rem 0;
   }
 }
 
+.staking--accounts-info .staking--label {
+  margin: 0 2.25rem -0.75rem 0;
+}
+
 .ui--AddressSummary {
   display: flex;
   justify-content: space-between;
@@ -120,60 +125,3 @@
     min-width: 0;
   }
 }
-
-@media (max-width: 1280px) {
-  .staking--Account {
-    min-width: 31%;
-
-    .ui--AddressMini {
-      display: block;
-    }
-
-    .ui--AddressSummary {
-      display: block;
-
-      .ui--AddressSummary-base,
-      .ui--AddressSummary-children {
-        min-width: 0;
-        display: block;
-      }
-
-      .ui--AddressSummary-base {
-        min-height: 16rem;
-      }
-
-      .ui--AddressSummary-children {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-
-  .staking--Account-expand {
-    min-width: auto;
-  }
-
-  .staking--Account-links {
-    max-width: 12rem;
-  }
-}
-
-@media (max-width: 1020px) {
-  .staking--Account {
-    min-width: 48%;
-  }
-}
-
-@media (max-width: 860px) {
-  .staking--Account {
-    min-width: 48%;
-  }
-}
-
-@media (max-width: 620px) {
-  .staking--Account {
-    min-width: 100%;
-  }
-}
diff --git a/packages/ui-app/src/AddressSummary.tsx b/packages/ui-app/src/AddressSummary.tsx
index 19ae751c44..d98c8e1016 100644
--- a/packages/ui-app/src/AddressSummary.tsx
+++ b/packages/ui-app/src/AddressSummary.tsx
@@ -191,7 +191,6 @@ class AddressSummary extends React.PureComponent<Props, State> {
         <Input
           autoFocus
           defaultValue={name}
-          className='full'
           onBlur={this.saveName}
           onChange={this.onChangeName}
           onEnter={this.saveName}
diff --git a/packages/ui-app/src/Card.tsx b/packages/ui-app/src/Card.tsx
new file mode 100644
index 0000000000..f85bfa79dc
--- /dev/null
+++ b/packages/ui-app/src/Card.tsx
@@ -0,0 +1,55 @@
+// Copyright 2017-2019 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  children: React.ReactNode,
+  className?: string
+};
+
+class Card extends React.PureComponent<Props> {
+  render () {
+    const { children, className } = this.props;
+
+    return (
+      <article className={className}>
+        {children}
+      </article>
+    );
+  }
+}
+
+export default styled(Card)`
+  position: relative;
+  flex: 1 1;
+  min-width: 24%;
+  max-width: 24%;
+  justify-content: space-around;
+
+  .ui--AddressSummary-buttons {
+    text-align: right;
+    margin-bottom: 2em;
+
+    button {
+      margin-left: 0.2em;
+    }
+  }
+
+  @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%;
+  }
+`;
diff --git a/packages/ui-app/src/CardGrid.tsx b/packages/ui-app/src/CardGrid.tsx
new file mode 100644
index 0000000000..4244867ebf
--- /dev/null
+++ b/packages/ui-app/src/CardGrid.tsx
@@ -0,0 +1,45 @@
+// Copyright 2017-2019 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  buttons?: React.ReactNode,
+  children: React.ReactNode,
+  className?: string
+};
+
+class CardGrid extends React.PureComponent<Props> {
+  render () {
+    const { buttons, children, className } = this.props;
+
+    return (
+      <div className={className}>
+        {buttons && (
+          <div className='ui--CardGrid-buttons'>
+            {buttons}
+          </div>
+        )}
+        <div className='ui--CardGrid-grid'>
+          {children}
+          <div className='ui--CardGrid-spacer' />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default styled(CardGrid)`
+  .ui--CardGrid-grid {
+    display: flex;
+    flex-wrap: wrap;
+
+    > .ui--CardGrid-spacer {
+      flex: 1 1;
+      margin: .25rem;
+      padding: 1rem 1.5rem;
+    }
+  }
+`;
diff --git a/packages/ui-app/src/index.tsx b/packages/ui-app/src/index.tsx
index 0aaa94469e..d04daeb80c 100644
--- a/packages/ui-app/src/index.tsx
+++ b/packages/ui-app/src/index.tsx
@@ -12,6 +12,8 @@ export { default as Bonded } from './Bonded';
 export { default as Bubble } from './Bubble';
 export { default as Button } from './Button';
 export { default as Call } from './Call';
+export { default as Card } from './Card';
+export { default as CardGrid } from './CardGrid';
 export { default as CardSummary } from './CardSummary';
 export { default as Chart } from './Chart';
 export { default as CopyButton } from './CopyButton';
diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css
index 486a1e8f8f..8c35c9ef9b 100644
--- a/packages/ui-app/src/styles/components.css
+++ b/packages/ui-app/src/styles/components.css
@@ -319,10 +319,10 @@ button.ui.icon.iconButton {
 
 .ui--AddressSummary-data .ui--Input input {
   height: 1em;
-  text-align: center;
+  text-align: left;
   text-transform: uppercase;
-  margin-top: -.3em;
-  margin-bottom: -.35em;
+  margin-top: -0.3em;
+  margin-bottom: -0.35em;
 }
 
 .ui--AddressSummary-tags-input {