diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js index bb12defd1cd01e11d740982b0b8070399e4074c4..265b2ec1bcd98d128045a26de6a1b8c031138c9f 100644 --- a/src/Accounts/Accounts.js +++ b/src/Accounts/Accounts.js @@ -36,28 +36,49 @@ class Accounts extends Component { return (
- {allAccountsInfo ? ( - - ) : ( -

Loading Accounts...

- )} - -

- - +

+ +
+
+ {allAccountsInfo ? ( +
    + {Object.keys(allAccountsInfo).map(address => ( +
  • +
    +
    + +
    +
    +
    {allAccountsInfo[address].name}
    +
    + {address} +
    +
    +
    +
    • + ))} +
+ + ) : ( +
+

Loading…

+
+ )} + +
+
); } diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js index 33a2433e364da39b982f46fcbbc2d4caf0c74020..22707c18063ce59193b44c39308375ac0a67c783 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/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js index d5fb148e955e482f563b31c2fa85c0d0cf46cc18..577acf17f9c77bb9b2b3fcad1b48770158ba4262 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js +++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js @@ -26,32 +26,35 @@ class CreateAccountStep1 extends Component { return (
-

Create account

-
- Your new address:
- - 
{address}
- {pathname === '/accounts/new' && ( - - )} -
- - {pathname === '/accounts/new' && - !!name && ( +
+
- - - + Your new address:
+ + 
{address}
+ {pathname === '/accounts/new' && ( + + )} +
+ +
+ {pathname === '/accounts/new' && + !!name && ( + + + + )}
- )} +
+
); } diff --git a/src/App/App.css b/src/App/App.css index 77f851a06000ff84f7f1601179ccdddf0208eca4..21627b2c12d4bb981bb88276a044bd5e87a5a318 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 { @@ -813,11 +815,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 { @@ -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); @@ -938,6 +944,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 !important; + width: auto !important; } + .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; @@ -959,8 +993,14 @@ button { .header-nav { display: flex; - justify-content: space-around; + 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 { @@ -975,6 +1015,40 @@ 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"); } + .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; @@ -1036,7 +1110,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; @@ -1047,7 +1121,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/App/App.js b/src/App/App.js index 2d4843ec4af42855a08418ce1908cb5c2304a400..ba7e10a2e20ac1ac55a6c18f7e13694e4000899b 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 b397ca045ed5c3521ded5058a6b35c6b58de39e5..4ddda06b5d03e77fc31a81b8bd3a8ba566021b9a 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/Receive/Receive.js b/src/Receive/Receive.js index fafe73b7c61358236d084454d31b647e4f675f4e..5df6c69406bbe3a74a37544fe0e207d7a78cfd18 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 5861f6a305d955f3e5d2c1a1add8f8dc6274f036..a2b50507004d03f27ca77e75d62fc0864457ab5e 100644 --- a/src/Send/Send.js +++ b/src/Send/Send.js @@ -7,6 +7,7 @@ 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 ethereumIcon from '../assets/img/tokens/ethereum.png'; import light from '../hoc'; @@ -51,48 +52,63 @@ class Send extends Component { const { amount, gas, to } = this.state; return ( -
-
-
-
- ethereum -
-
Ethereum
-
- {balance} - ETH -
-
+
+ -
-
-
- - +
+
+
+
+ ethereum
-
- - +
Ethereum
+
+ {balance} + ETH
-
- - +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
-
-
- -
-
+ +
); diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js index 5775c57ebd9fedc8bcbe1d29302489309571f4db..1f3022774e0e1589d63f77f94a975a165cefff75 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 e7e07911781e2a91c9f799b59a10f4f62428e6d7..d0ab03dff8f4a0d09ade922c37ef662f3be9f037 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,47 @@ class Tokens extends Component { } return ( -
-
    - {Array.from(tokens.keys()).map(key => ( -
  • - {key === 'ETH' ? ( - - ) : ( - - )} -
    • - ))} -
+
+ + +
+
+
    + {Array.from(tokens.keys()).map(key => ( +
  • + {key === 'ETH' ? ( + + ) : ( + + )} +
    • + ))} +
+
+
+ +
); } diff --git a/src/assets/img/icons/back.svg b/src/assets/img/icons/back.svg new file mode 100644 index 0000000000000000000000000000000000000000..03e2499d3d0cf0ab9c68506eedee6d1908204b0e --- /dev/null +++ b/src/assets/img/icons/back.svg @@ -0,0 +1,13 @@ + + + + Untitled 6 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/icons/close.svg b/src/assets/img/icons/close.svg new file mode 100644 index 0000000000000000000000000000000000000000..4f8c9eb6af092e98ab36235dc5bcb64751d43acd --- /dev/null +++ b/src/assets/img/icons/close.svg @@ -0,0 +1,13 @@ + + + + Untitled 6 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/icons/plus.svg b/src/assets/img/icons/plus.svg new file mode 100644 index 0000000000000000000000000000000000000000..92331aea3a28bfd51bb629528469b63b6644e8cd --- /dev/null +++ b/src/assets/img/icons/plus.svg @@ -0,0 +1,13 @@ + + + + Untitled 6 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/icons/receive.svg b/src/assets/img/icons/receive.svg index 923f1c85d36848ced59534773d4fe507af147233..2b48cd51a597961b7d37ca6f360c73451b11cd5f 100644 --- a/src/assets/img/icons/receive.svg +++ b/src/assets/img/icons/receive.svg @@ -1,11 +1,15 @@ - - - - - - - + + + Untitled 6 + Created with Sketch. + + + + + + + + - - + \ No newline at end of file diff --git a/src/assets/img/icons/reload.svg b/src/assets/img/icons/reload.svg new file mode 100644 index 0000000000000000000000000000000000000000..efd0c9378aa3e939d3be76a147f5802f1d8cb991 --- /dev/null +++ b/src/assets/img/icons/reload.svg @@ -0,0 +1,19 @@ + + + + Untitled 6 + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/sass/components/_account.scss b/src/assets/sass/components/_account.scss new file mode 100644 index 0000000000000000000000000000000000000000..e8c93070bfabeb8c4bb99c9ed7994a60427c978d --- /dev/null +++ b/src/assets/sass/components/_account.scss @@ -0,0 +1,38 @@ +.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/components/_header-nav.scss b/src/assets/sass/components/_header-nav.scss index 501d56f64ccd0dc6f2cf7e372b3eb52a39548e7c..49f4d209b902701885567964bc478193f9a9ffc8 100644 --- a/src/assets/sass/components/_header-nav.scss +++ b/src/assets/sass/components/_header-nav.scss @@ -1,8 +1,18 @@ .header-nav { display: flex; - justify-content: space-around; + justify-content: space-between; padding: 1rem 0.5rem; + .header_title { + text-align: center; + color: rgba($black, 0.675); + font-weight: 500; + } + + &.-modal { + background: $white; + } + a, a:link, a:visited { @@ -16,5 +26,38 @@ 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'); + } + + &.-back { + background-image: url('../assets/img/icons/back.svg'); + } + + &.-close { + background-image: url('../assets/img/icons/close.svg'); + } + + &.-new { + background-image: url('../assets/img/icons/plus.svg'); + } + } } } diff --git a/src/assets/sass/components/_send-form.scss b/src/assets/sass/components/_send-form.scss index e474cea79e233963e30fca2405edae2367a51fd1..ed500996ab1caf3f8e91f1cab9845118bcf37ff9 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; diff --git a/src/assets/sass/layouts/_wrapper.scss b/src/assets/sass/layouts/_wrapper.scss index 59290d570c1e73bf25e42081c0707c1027c72ada..b3295253c4e6dcf18c36496bc06dfbf0ceada81d 100644 --- a/src/assets/sass/layouts/_wrapper.scss +++ b/src/assets/sass/layouts/_wrapper.scss @@ -28,12 +28,18 @@ .window { background: $chrome; border-radius: 0.25rem; + overflow: hidden; box-shadow: 0 0.125rem 0.75rem rgba($black,0.175), 0 0.125rem 0.125rem rgba($black,0.100); .window_content { background: rgba($faint,0.675); border-top: 1px solid $faint; border-bottom: 1px solid $faint; + + &.-modal { + border-top: 0; + border-bottom: 0; + } } } } diff --git a/src/assets/sass/shared/_box.scss b/src/assets/sass/shared/_box.scss index 15cab9fe1b5567a80953b5d8527cc30dd43d70fd..ea18f740f8686408a7394836a182bd84e9d1ef05 100644 --- a/src/assets/sass/shared/_box.scss +++ b/src/assets/sass/shared/_box.scss @@ -29,6 +29,10 @@ padding: 1rem; } + &.-modal { + background: $white; + } + &.-stacked { margin-bottom: 0.5rem; &:last-child { diff --git a/src/assets/sass/shared/_list.scss b/src/assets/sass/shared/_list.scss index 1520e3998a7b6e1d50930ee8f9cb6e5e739081cd..b6037a59fd0203357e757da49afcc10975414322 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;