From 5b05dc17d97bdbf331a85a608f055ba512773800 Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Thu, 17 May 2018 16:18:04 +0100 Subject: [PATCH 1/5] rm chrome from accounts page --- src/Accounts/Accounts.js | 21 ++++++++--- src/App/App.css | 34 ++++++++++++++++-- src/App/App.js | 42 +++++++--------------- src/App/App.sass | 1 + src/Settings/Settings.js | 22 +++++++++++- src/Tokens/Tokens.js | 46 +++++++++++++++++------- src/assets/sass/components/_account.scss | 37 +++++++++++++++++++ src/assets/sass/shared/_list.scss | 2 +- 8 files changed, 152 insertions(+), 53 deletions(-) create mode 100644 src/assets/sass/components/_account.scss diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js index bb12defd..e5b5fc67 100644 --- a/src/Accounts/Accounts.js +++ b/src/Accounts/Accounts.js @@ -35,22 +35,33 @@ class Accounts extends Component { const { allAccountsInfo } = this.props; return ( -
+
{allAccountsInfo ? ( -
    +
      {Object.keys(allAccountsInfo).map(address => (
    • - - {allAccountsInfo[address].name} ({address}) +
      +
      + +
      +
      +
      {allAccountsInfo[address].name}
      +
      + {address} +
      +
      +
      • ))}
    ) : ( -

    Loading Accounts...

    +
    +

    Loading…

    +
    )}

    diff --git a/src/App/App.css b/src/App/App.css index 77f851a0..d4f9bd60 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -813,11 +813,11 @@ button { button.-small:active { background-color: #d7d7d7; } -.list.-tokens { +.list.-padded { padding: 0.325rem; } - .list.-tokens > li { + .list.-padded > li { margin-bottom: 0.325rem; } - .list.-tokens > li:last-child { + .list.-padded > li:last-child { margin-bottom: 0; } .text p, .text ul, .text ol, .text blockquote { @@ -938,6 +938,34 @@ button { .token .token_symbol:before { content: ' '; } +.account { + user-select: none; + display: flex; } + .account .account_avatar { + margin: -0.5rem 0 -0.5rem -0.425rem; + width: 3.3rem; + height: 3.3rem; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + align-content: center; } + .account .account_avatar canvas { + height: 1.3rem; + width: auto; } + .account .account_information { + padding-left: 0.325rem; + flex-grow: 1; } + .account .account_name { + color: #222; + font-weight: 500; } + .account .account_address { + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + color: #888; + font-size: 0.69444rem; + line-height: 0.90278rem; } + .status .status_icon { display: inline-block; width: 0.5rem; diff --git a/src/App/App.js b/src/App/App.js index 2d4843ec..ba7e10a2 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -4,11 +4,10 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import { BrowserRouter, MemoryRouter, Route, Link } from 'react-router-dom'; +import { BrowserRouter, MemoryRouter, Route } from 'react-router-dom'; import Accounts from '../Accounts'; import CreateAccount from '../Accounts/CreateAccount'; -import Health from '../Health'; import Loading from '../Loading'; import ProtectedRoute from './ProtectedRoute'; import Receive from '../Receive'; @@ -35,34 +34,17 @@ class App extends Component {

- - -
- - - - - - - - -
- - + + + + + + + +
diff --git a/src/App/App.sass b/src/App/App.sass index b397ca04..4ddda06b 100644 --- a/src/App/App.sass +++ b/src/App/App.sass @@ -22,6 +22,7 @@ @import '../assets/sass/components/debug-nav' @import '../assets/sass/components/logo' @import '../assets/sass/components/token' +@import '../assets/sass/components/account' @import '../assets/sass/components/status' @import '../assets/sass/components/header-nav' @import '../assets/sass/components/footer-nav' diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js index 5775c57e..1f302277 100644 --- a/src/Settings/Settings.js +++ b/src/Settings/Settings.js @@ -4,12 +4,32 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; + +import Health from '../Health'; class Settings extends Component { render () { return (
-

This is the settings page.

+ + +
+

Settings page

+
+ +
); } diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js index e7e07911..09a5c02a 100644 --- a/src/Tokens/Tokens.js +++ b/src/Tokens/Tokens.js @@ -5,8 +5,9 @@ import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; -import { Redirect } from 'react-router-dom'; +import { Redirect, Link } from 'react-router-dom'; +import Health from '../Health'; import EthBalance from './EthBalance'; import TokenBalance from './TokenBalance'; @@ -24,18 +25,37 @@ class Tokens extends Component { } return ( -
- +
+ + +
+
+
    + {Array.from(tokens.keys()).map(key => ( +
  • + {key === 'ETH' ? ( + + ) : ( + + )} +
    • + ))} +
+
+
+ +
); } diff --git a/src/assets/sass/components/_account.scss b/src/assets/sass/components/_account.scss new file mode 100644 index 00000000..439bdef5 --- /dev/null +++ b/src/assets/sass/components/_account.scss @@ -0,0 +1,37 @@ +.account { + user-select: none; + display: flex; + + .account_avatar { + margin: -0.5rem 0 -0.5rem -0.425rem; + width: (ms(0) * 1.3) + 2rem; + height: (ms(0) * 1.3) + 2rem; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + align-content: center; + canvas { + height: (ms(0) * 1.3); !important + width: auto; !important + } + } + + .account_information { + padding-left: 0.325rem; + flex-grow: 1; + } + + .account_name { + color: $black; + font-weight: 500; + } + + .account_address { + font-family: $mono; + color: $grey; + font-size: ms(-2); + line-height: ms(-2) * 1.3; + } +} diff --git a/src/assets/sass/shared/_list.scss b/src/assets/sass/shared/_list.scss index 1520e399..b6037a59 100644 --- a/src/assets/sass/shared/_list.scss +++ b/src/assets/sass/shared/_list.scss @@ -1,5 +1,5 @@ .list { - &.-tokens { + &.-padded { padding: 0.325rem; & > li { margin-bottom: 0.325rem; -- GitLab From 1bc2f314e6bc9560d8a20d8221466d9adafab3fb Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Thu, 17 May 2018 17:30:04 +0100 Subject: [PATCH 2/5] messy WIP of big flows and nav, cont'd --- src/Accounts/Accounts.js | 73 +++++++------ src/App/App.css | 35 ++++++- src/Send/Send.js | 110 +++++++++++++------- src/Tokens/Tokens.js | 11 +- src/assets/sass/components/_account.scss | 5 +- src/assets/sass/components/_header-nav.scss | 28 ++++- src/assets/sass/components/_send-form.scss | 2 +- 7 files changed, 182 insertions(+), 82 deletions(-) diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js index e5b5fc67..a4ddaae5 100644 --- a/src/Accounts/Accounts.js +++ b/src/Accounts/Accounts.js @@ -35,40 +35,49 @@ class Accounts extends Component { const { allAccountsInfo } = this.props; return ( -
- {allAccountsInfo ? ( -
    - {Object.keys(allAccountsInfo).map(address => ( -
  • -
    -
    - -
    -
    -
    {allAccountsInfo[address].name}
    -
    - {address} +
    + + +
    +
    + {allAccountsInfo ? ( +
      + {Object.keys(allAccountsInfo).map(address => ( +
    • +
      +
      + +
      +
      +
      {allAccountsInfo[address].name}
      +
      + {address} +
      +
      -
    -
    -
    • - ))} -
- ) : ( -
-

Loading…

-
- )} + + ))} + -

- - - -

+ ) : ( +
+

Loading…

+
+ )} + +
+
); } diff --git a/src/App/App.css b/src/App/App.css index d4f9bd60..bdae8a9a 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -952,8 +952,8 @@ button { align-items: center; align-content: center; } .account .account_avatar canvas { - height: 1.3rem; - width: auto; } + height: 1.3rem !important; + width: auto !important; } .account .account_information { padding-left: 0.325rem; flex-grow: 1; } @@ -987,8 +987,11 @@ button { .header-nav { display: flex; - justify-content: space-around; + justify-content: space-between; padding: 1rem 0.5rem; } + .header-nav .header_title { + color: rgba(34, 34, 34, 0.675); + font-weight: 500; } .header-nav a, .header-nav a:link, .header-nav a:visited { @@ -1003,6 +1006,28 @@ button { .header-nav a:visited:hover { background: rgba(221, 221, 221, 0.5); color: #222; } + .header-nav a.icon, + .header-nav a:link.icon, + .header-nav a:visited.icon { + width: 1.8rem; + height: 1.8rem; + text-indent: -9999rem; + background-size: 1rem auto; + background-position: center center; + background-repeat: no-repeat; + opacity: 0.675; } + .header-nav a.icon:hover, + .header-nav a:link.icon:hover, + .header-nav a:visited.icon:hover { + opacity: 1; } + .header-nav a.icon.-receive, + .header-nav a:link.icon.-receive, + .header-nav a:visited.icon.-receive { + background-image: url("../assets/img/icons/receive.svg"); } + .header-nav a.icon.-settings, + .header-nav a:link.icon.-settings, + .header-nav a:visited.icon.-settings { + background-image: url("../assets/img/icons/gear.svg"); } .footer-nav { display: flex; @@ -1064,7 +1089,7 @@ button { font-weight: 600; color: #888; width: 9rem; } - .send-form_field input[type="number"] { + .send-form_field input[type='text'], .send-form_field input[type='number'] { display: block; width: 100%; border-radius: 2px; @@ -1075,7 +1100,7 @@ button { background-color: #fff; padding: 0.25rem 0.25rem 0.325rem; box-shadow: 0 1px 2px rgba(34, 34, 34, 0.0675); } - .send-form_field input[type="number"]:focus { + .send-form_field input[type='text']:focus, .send-form_field input[type='number']:focus { background-color: #fff; border-color: #d7d7d7; box-shadow: 0 0 0; } diff --git a/src/Send/Send.js b/src/Send/Send.js index 5861f6a3..0ce09c06 100644 --- a/src/Send/Send.js +++ b/src/Send/Send.js @@ -7,7 +7,9 @@ import React, { Component } from 'react'; import { balanceOf$, defaultAccount$ } from '@parity/light.js'; import { map, switchMap } from 'rxjs/operators'; import { fromWei, toWei } from '@parity/api/lib/util/wei'; +import { Link } from 'react-router-dom'; +import Health from '../Health'; import ethereumIcon from '../assets/img/tokens/ethereum.png'; import light from '../hoc'; @@ -51,49 +53,77 @@ class Send extends Component { const { amount, gas, to } = this.state; return ( -
-
-
-
- ethereum -
-
Ethereum
-
- {balance} - ETH -
-
+
+ -
-
-
- - -
-
- - -
-
- - -
-
-
- +
+
+
+
+
+ ethereum +
+
Ethereum
+
+ {balance} + ETH +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
- +
+ +
); } diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js index 09a5c02a..dad37feb 100644 --- a/src/Tokens/Tokens.js +++ b/src/Tokens/Tokens.js @@ -27,7 +27,16 @@ class Tokens extends Component { return (
diff --git a/src/assets/sass/components/_account.scss b/src/assets/sass/components/_account.scss index 439bdef5..e8c93070 100644 --- a/src/assets/sass/components/_account.scss +++ b/src/assets/sass/components/_account.scss @@ -12,9 +12,10 @@ justify-content: center; align-items: center; align-content: center; + canvas { - height: (ms(0) * 1.3); !important - width: auto; !important + height: (ms(0) * 1.3) !important; + width: auto !important; } } diff --git a/src/assets/sass/components/_header-nav.scss b/src/assets/sass/components/_header-nav.scss index 501d56f6..d540b5cf 100644 --- a/src/assets/sass/components/_header-nav.scss +++ b/src/assets/sass/components/_header-nav.scss @@ -1,8 +1,13 @@ .header-nav { display: flex; - justify-content: space-around; + justify-content: space-between; padding: 1rem 0.5rem; + .header_title { + color: rgba($black, 0.675); + font-weight: 500; + } + a, a:link, a:visited { @@ -16,5 +21,26 @@ background: rgba($faint,0.5); color: $black; } + + &.icon { + width: ms(0) * 1.3 + 0.5rem; + height: ms(0) * 1.3 + 0.5rem; + text-indent: -9999rem; + background-size: ms(0) auto; + background-position: center center; + background-repeat: no-repeat; + opacity: 0.675; + &:hover { + opacity: 1; + } + + &.-receive { + background-image: url('../assets/img/icons/receive.svg'); + } + + &.-settings { + background-image: url('../assets/img/icons/gear.svg'); + } + } } } diff --git a/src/assets/sass/components/_send-form.scss b/src/assets/sass/components/_send-form.scss index e474cea7..ed500996 100644 --- a/src/assets/sass/components/_send-form.scss +++ b/src/assets/sass/components/_send-form.scss @@ -21,7 +21,7 @@ width: 9rem; } - input[type="number"] { + input[type='text'], input[type='number'] { display: block; width: 100%; border-radius: 2px; -- GitLab From e5a653bebf3201409896d463324f3fa6e74ac8f2 Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Fri, 18 May 2018 09:24:23 +0100 Subject: [PATCH 3/5] a bunch of icons in the various headers for navigating around --- src/Accounts/Accounts.js | 5 +- src/Accounts/CreateAccount/CreateAccount.js | 22 ++-- src/App/App.css | 21 ++++ src/Receive/Receive.js | 31 ++++-- src/Send/Send.js | 105 +++++++++----------- src/Tokens/Tokens.js | 4 +- src/assets/img/icons/back.svg | 13 +++ src/assets/img/icons/close.svg | 13 +++ src/assets/img/icons/plus.svg | 13 +++ src/assets/img/icons/receive.svg | 22 ++-- src/assets/img/icons/reload.svg | 19 ++++ src/assets/sass/components/_header-nav.scss | 17 ++++ src/assets/sass/layouts/_wrapper.scss | 6 ++ src/assets/sass/shared/_box.scss | 4 + 14 files changed, 208 insertions(+), 87 deletions(-) create mode 100644 src/assets/img/icons/back.svg create mode 100644 src/assets/img/icons/close.svg create mode 100644 src/assets/img/icons/plus.svg create mode 100644 src/assets/img/icons/reload.svg diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js index a4ddaae5..265b2ec1 100644 --- a/src/Accounts/Accounts.js +++ b/src/Accounts/Accounts.js @@ -37,11 +37,12 @@ class Accounts extends Component { return (
diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js index 33a2433e..a79546f1 100644 --- a/src/Accounts/CreateAccount/CreateAccount.js +++ b/src/Accounts/CreateAccount/CreateAccount.js @@ -4,7 +4,7 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import { Route } from 'react-router-dom'; +import { Route, Link } from 'react-router-dom'; import Step1 from './CreateAccountStep1'; import Step2 from './CreateAccountStep2'; @@ -16,11 +16,21 @@ class CreateAccount extends Component { render () { return (
- - - - - + + +
+ + + + + +
); } diff --git a/src/App/App.css b/src/App/App.css index bdae8a9a..21627b2c 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -789,6 +789,8 @@ a, a:link, a:visited { overflow-y: auto; } .box.-padded { padding: 1rem; } + .box.-modal { + background: #f9f9f9; } .box.-stacked { margin-bottom: 0.5rem; } .box.-stacked:last-child { @@ -864,11 +866,15 @@ button { .wrapper .content .window { background: #F5F6F6; border-radius: 0.25rem; + overflow: hidden; box-shadow: 0 0.125rem 0.75rem rgba(34, 34, 34, 0.175), 0 0.125rem 0.125rem rgba(34, 34, 34, 0.1); } .wrapper .content .window .window_content { background: rgba(221, 221, 221, 0.675); border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } + .wrapper .content .window .window_content.-modal { + border-top: 0; + border-bottom: 0; } .debug-nav { background-color: rgba(34, 34, 34, 0.125); @@ -990,8 +996,11 @@ button { justify-content: space-between; padding: 1rem 0.5rem; } .header-nav .header_title { + text-align: center; color: rgba(34, 34, 34, 0.675); font-weight: 500; } + .header-nav.-modal { + background: #f9f9f9; } .header-nav a, .header-nav a:link, .header-nav a:visited { @@ -1028,6 +1037,18 @@ button { .header-nav a:link.icon.-settings, .header-nav a:visited.icon.-settings { background-image: url("../assets/img/icons/gear.svg"); } + .header-nav a.icon.-back, + .header-nav a:link.icon.-back, + .header-nav a:visited.icon.-back { + background-image: url("../assets/img/icons/back.svg"); } + .header-nav a.icon.-close, + .header-nav a:link.icon.-close, + .header-nav a:visited.icon.-close { + background-image: url("../assets/img/icons/close.svg"); } + .header-nav a.icon.-new, + .header-nav a:link.icon.-new, + .header-nav a:visited.icon.-new { + background-image: url("../assets/img/icons/plus.svg"); } .footer-nav { display: flex; diff --git a/src/Receive/Receive.js b/src/Receive/Receive.js index fafe73b7..5df6c694 100644 --- a/src/Receive/Receive.js +++ b/src/Receive/Receive.js @@ -5,6 +5,7 @@ import React, { Component } from 'react'; import { defaultAccount$ } from '@parity/light.js'; +import { Link } from 'react-router-dom'; import light from '../hoc'; @@ -16,15 +17,27 @@ class Receive extends Component { const { me } = this.props; return (
-
-
- -
-
- {me} -
-
- + +
+
+
+
+ +
+
+ {me} +
+
+ +
+
diff --git a/src/Send/Send.js b/src/Send/Send.js index 0ce09c06..45fa3ec8 100644 --- a/src/Send/Send.js +++ b/src/Send/Send.js @@ -54,76 +54,63 @@ class Send extends Component { return (
-
diff --git a/src/Send/Send.js b/src/Send/Send.js index 45fa3ec8..a2b50507 100644 --- a/src/Send/Send.js +++ b/src/Send/Send.js @@ -9,7 +9,6 @@ import { map, switchMap } from 'rxjs/operators'; import { fromWei, toWei } from '@parity/api/lib/util/wei'; import { Link } from 'react-router-dom'; -import Health from '../Health'; import ethereumIcon from '../assets/img/tokens/ethereum.png'; import light from '../hoc'; -- GitLab