diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000000000000000000000000000000000000..88ca5039eaa0e553eb638006cf09065d31752314 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,14 @@ +{ + "name": "light", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "case-sensitive-paths-webpack-plugin": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.2.tgz", + "integrity": "sha512-oEZgAFfEvKtjSRCu6VgYkuGxwrWXMnQzyBmlLPP7r6PWQVtHxP5Z5N6XsuJvtoVax78am/r7lr46bwo3IVEBOg==", + "dev": true + } + } +} diff --git a/package.json b/package.json index 1a44727328805503bce94a36a9444701d9f779da..27191e391b3474f88fd5731e5b20f9a3efc26766 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ }, "dependencies": { "@parity/api": "^2.1.22", - "@parity/light.js": "https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45", + "@parity/light.js": "https://github.com/parity-js/light.js#c531c68b5268a1bf7aba1f43424f440b2bde7828", "axios": "^0.18.0", "electron": "^2.0.0", "electron-dl": "^1.11.0", @@ -58,6 +58,7 @@ }, "devDependencies": { "babel-eslint": "^8.2.3", + "case-sensitive-paths-webpack-plugin": "^2.1.2", "cross-env": "^5.1.4", "node-sass": "^4.9.0", "node-sass-chokidar": "^1.2.2", diff --git a/src/App/App.css b/src/App/App.css index 7dea331ef0f24227221b364a1619b427ba12a4b2..77f851a06000ff84f7f1601179ccdddf0208eca4 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -753,7 +753,7 @@ body { background-image: linear-gradient(#A5BFDA, #BFCDDC); background-repeat: no-repeat; background-size: cover; - color: #f9f9f9; + color: #222; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; font-size: 1rem; @@ -772,12 +772,17 @@ a, a:link, a:visited { .box { display: block; } .box.-card { + padding: 0.75rem; background: #f9f9f9; - color: #888; - box-shadow: 0 0.125rem 0.125rem rgba(34, 34, 34, 0.5); - border-radius: 2px; } - .box.-card strong { - color: #222; } + border-radius: 2px; + box-shadow: 0 1px 2px rgba(34, 34, 34, 0.125); } + .box.-card.-clickable { + transition: box-shadow 0.125s ease; } + .box.-card.-clickable:hover { + cursor: default; + box-shadow: 0 1px 2px rgba(34, 34, 34, 0.225), 0 1px 2px rgba(34, 34, 34, 0.125); } + .box.-well { + padding: 0.325rem; } .box.-scroller { max-height: 22rem; overflow-x: hidden; @@ -792,7 +797,7 @@ a, a:link, a:visited { button { color: #f9f9f9; background-color: #3ec28f; - border-radius: 3px; + border-radius: 0.25rem; border: none; font-size: 1rem; line-height: 1.3; @@ -808,10 +813,12 @@ button { button.-small:active { background-color: #d7d7d7; } -.list.-tokens > li { - margin-bottom: 0.25rem; } - .list.-tokens > li:last-child { - margin-bottom: 0; } +.list.-tokens { + padding: 0.325rem; } + .list.-tokens > li { + margin-bottom: 0.325rem; } + .list.-tokens > li:last-child { + margin-bottom: 0; } .text p, .text ul, .text ol, .text blockquote { margin: 1rem 0; } @@ -853,23 +860,32 @@ button { height: 0.5rem; width: auto; } .wrapper .content .connector svg polygon { - fill: #330044; } + fill: #F5F6F6; } .wrapper .content .window { - background: #330044; - padding: 0.25rem; + background: #F5F6F6; border-radius: 0.25rem; - box-shadow: 0 0.125rem 0.75rem rgba(34, 34, 34, 0.325), 0 0.125rem 0.125rem rgba(34, 34, 34, 0.175); } + 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; } .debug-nav { background-color: rgba(34, 34, 34, 0.125); position: fixed; + left: 1rem; right: 1rem; - bottom: 1rem; } - .debug-nav a, .debug-nav a:link, .debug-nav a:visited { + bottom: 1rem; + padding: 1rem; } + .debug-nav a, + .debug-nav a:link, + .debug-nav a:visited { color: #f9f9f9; display: block; padding: 0.5rem 1rem; } - .debug-nav a:hover, .debug-nav a:link:hover, .debug-nav a:visited:hover { + .debug-nav a:hover, + .debug-nav a:link:hover, + .debug-nav a:visited:hover { cursor: pointer; background-color: rgba(34, 34, 34, 0.125); } @@ -892,17 +908,14 @@ button { overflow: hidden; } .token { - display: flex; - padding: 1rem; - user-select: none; } - .token:hover { - cursor: default; } + user-select: none; + display: flex; } + .token.-header { + padding: 0 0 0.5rem; } .token .token_icon { margin: -0.5rem 0 -0.5rem -0.425rem; - border-radius: 1.15rem; width: 2.3rem; height: 2.3rem; - background-color: #ddd; display: flex; flex-direction: column; flex-wrap: nowrap; @@ -913,111 +926,137 @@ button { height: 1.3rem; width: auto; } .token .token_name { - padding-left: 0.5rem; + padding-left: 0.325rem; flex-grow: 1; color: #222; font-weight: 500; } .token .token_balance { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; color: #888; } + .token .token_symbol { + font-size: 0.69444rem; } + .token .token_symbol:before { + content: ' '; } + +.status .status_icon { + display: inline-block; + width: 0.5rem; + height: 0.5rem; + margin-right: 0.25rem; } + .status .status_icon svg { + display: inline-block; + width: 0.5rem; + height: 0.5rem; } + .status .status_icon.-good svg circle { + fill: #3ec28f; } + .status .status_icon.-syncing svg circle { + fill: #DFCA29; } + .status .status_icon.-bad svg circle { + fill: #C2473E; } + +.status .status_text { + display: inline-block; } + +.header-nav { + display: flex; + justify-content: space-around; + padding: 1rem 0.5rem; } + .header-nav a, + .header-nav a:link, + .header-nav a:visited { + color: rgba(34, 34, 34, 0.675); + font-weight: 500; + display: block; + margin: -0.175rem 0 -0.175rem; + padding: 0.25rem 0.5rem 0.175rem; + border-radius: 0.25rem; } + .header-nav a:hover, + .header-nav a:link:hover, + .header-nav a:visited:hover { + background: rgba(221, 221, 221, 0.5); + color: #222; } -.primary-nav { +.footer-nav { display: flex; - justify-content: flex-end; - padding-top: 0.25rem; } - .primary-nav a, - .primary-nav a:link, - .primary-nav a:visited { - text-transform: uppercase; + justify-content: space-between; } + .footer-nav .footer-nav_status { + padding: 1rem; font-size: 0.69444rem; - color: rgba(249, 249, 249, 0.675); - font-weight: 500; - padding: 0 0.5rem; - display: block; } - .primary-nav a:hover, - .primary-nav a:link:hover, - .primary-nav a:visited:hover { - color: #f9f9f9; - border-radius: 0.25rem; } - .primary-nav a.icon, - .primary-nav a:link.icon, - .primary-nav a:visited.icon { - padding: 0; - width: 1.3rem; - height: 1.3rem; + color: #888; } + .footer-nav .footer-nav_icons { + padding: 1rem; } + .footer-nav a, + .footer-nav a:link, + .footer-nav a:visited { + display: block; + margin: -0.175rem 0 -0.175rem; + padding: 0.25rem 0.5rem 0.175rem; + border-radius: 0.25rem; } + .footer-nav a:hover, + .footer-nav a:link:hover, + .footer-nav a:visited:hover { + background: rgba(221, 221, 221, 0.5); + color: #222; } + .footer-nav a.icon, + .footer-nav a:link.icon, + .footer-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; - margin-left: 0.25rem; } - .primary-nav a.icon:hover, - .primary-nav a:link.icon:hover, - .primary-nav a:visited.icon:hover { + opacity: 0.675; } + .footer-nav a.icon:hover, + .footer-nav a:link.icon:hover, + .footer-nav a:visited.icon:hover { opacity: 1; } - .primary-nav a.icon.-receive, - .primary-nav a:link.icon.-receive, - .primary-nav a:visited.icon.-receive { + .footer-nav a.icon.-receive, + .footer-nav a:link.icon.-receive, + .footer-nav a:visited.icon.-receive { background-image: url("../assets/img/icons/receive.svg"); } - .primary-nav a.icon.-settings, - .primary-nav a:link.icon.-settings, - .primary-nav a:visited.icon.-settings { + .footer-nav a.icon.-settings, + .footer-nav a:link.icon.-settings, + .footer-nav a:visited.icon.-settings { background-image: url("../assets/img/icons/gear.svg"); } -.token-header { - text-align: center; - padding: 1rem 0; - border-bottom: 1px solid #ddd; } - -.token-header_icon { - margin: 0 auto; - border-radius: 1.936rem; - width: 3.872rem; - height: 3.872rem; - background-color: #ddd; - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: center; - align-items: center; - align-content: center; } - .token-header_icon img { - height: 1.872rem; - width: auto; } - -.token-header_name { - color: #222; - font-weight: 500; } - -.token-header_balance { - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - color: #888; - font-size: 0.83333rem; } - -.send-form { - padding: 1rem; } - -.send-form_fields label { - display: block; - font-size: 0.83333rem; } +.send-form_fields { + border-top: 1px solid rgba(221, 221, 221, 0.5); } -.send-form_fields input[type="tel"] { - -webkit-appearance: none; - display: block; - width: 100%; - border-radius: 3px; - border: 1px solid #888; - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 1rem; - line-height: 1.3; - padding: 0.25rem 0.25rem 0.325rem; } - .send-form_fields input[type="tel"]:focus { - border-color: #3ec28f; } +.send-form_field { + display: flex; + border-bottom: 1px solid rgba(221, 221, 221, 0.5); + padding: 0.5rem 0; } + .send-form_field label { + display: block; + padding-top: 0.325rem; + padding-right: 1rem; + text-align: right; + font-size: 0.83333rem; + font-weight: 600; + color: #888; + width: 9rem; } + .send-form_field input[type="number"] { + display: block; + width: 100%; + border-radius: 2px; + border: 1px solid #e3e3e3; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 1rem; + line-height: 1.3; + 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 { + background-color: #fff; + border-color: #d7d7d7; + box-shadow: 0 0 0; } .send-form_action { - padding-top: 1rem; } + padding-top: 0.5rem; + display: flex; + justify-content: flex-end; } .send-form_action button { - margin: 0 auto; display: block; } .address { diff --git a/src/App/App.js b/src/App/App.js index 795d191e8861c0c642afed2b72af7e2e06b049ed..c6fc10984296ff4c2757b6ef655870608a0d5d0d 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -7,6 +7,7 @@ import React, { Component } from 'react'; import { BrowserRouter, MemoryRouter, Route, Link } from 'react-router-dom'; import CreateAccount from '../Accounts/CreateAccount'; +import Health from '../Health'; import Loading from '../Loading'; import ProtectedRoute from './ProtectedRoute'; import Receive from '../Receive'; @@ -33,25 +34,29 @@ class App extends Component {
- - - - - - - + + +
+ + + + + + + +
-
diff --git a/src/App/App.sass b/src/App/App.sass index dfbe57144353cceb59d6f26764d1ec8e1eb0d468..b397ca045ed5c3521ded5058a6b35c6b58de39e5 100644 --- a/src/App/App.sass +++ b/src/App/App.sass @@ -22,8 +22,9 @@ @import '../assets/sass/components/debug-nav' @import '../assets/sass/components/logo' @import '../assets/sass/components/token' -@import '../assets/sass/components/primary-nav' -@import '../assets/sass/components/token-header' +@import '../assets/sass/components/status' +@import '../assets/sass/components/header-nav' +@import '../assets/sass/components/footer-nav' @import '../assets/sass/components/send-form' @import '../assets/sass/components/address' diff --git a/src/Health/Health.js b/src/Health/Health.js new file mode 100644 index 0000000000000000000000000000000000000000..f526d543550e0b5ed282ecfd7960c45a4842f786 --- /dev/null +++ b/src/Health/Health.js @@ -0,0 +1,23 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React, { Component } from 'react'; + +class Health extends Component { + render () { + return ( +
+ + + + + + Syncing... (4m) +
+ ); + } +} + +export default Health; diff --git a/src/Health/index.js b/src/Health/index.js new file mode 100644 index 0000000000000000000000000000000000000000..6e81ce42cd32ce0056c443300b1d013b6306a90e --- /dev/null +++ b/src/Health/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import Health from './Health'; + +export default Health; diff --git a/src/Send/Send.js b/src/Send/Send.js index 0fe92a2ca90abf2eb3fa46e2b1ab2012c509cf08..6c2a461a777ff57ae20ef021207d969accc3e296 100644 --- a/src/Send/Send.js +++ b/src/Send/Send.js @@ -57,48 +57,49 @@ class Send extends Component { } return ( -
+
-
-
+
+
ethereum
-
Ethereum
-
42.89
+
Ethereum
+
+ 42.89 + ETH +
- {/* @brian can we not use ul/li here? Not really semantic. I could - change it but I'm scared it'll break the layout */} -
    -
  • +
    +
    -
  • -
  • +
+
- -
  • +
  • +
    - - +
    +
    diff --git a/src/Tokens/BalanceLayout/BalanceLayout.js b/src/Tokens/BalanceLayout/BalanceLayout.js index 8ad53d8374ae05b603d2ee9966497c1c88cd9cd5..bd597eee7ca3f6b290910283766b83429b5870ad 100644 --- a/src/Tokens/BalanceLayout/BalanceLayout.js +++ b/src/Tokens/BalanceLayout/BalanceLayout.js @@ -8,14 +8,14 @@ import React from 'react'; const ETHER_IN_WEI = 1000000000000000000; // Is there a util function for this? const BalanceLayout = ({ balance, image, name, symbol }) => ( -
    +
    {name}
    {name}
    {Number.isFinite(balance) ? (balance / ETHER_IN_WEI).toFixed(2) : '...'}{' '} - {symbol} + {symbol}
    ); diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js index 5e79fc3c46980cb4d96cf6fe960c9689acc56ab7..13407eaa9d1ba1704f91282d13a240749b75790f 100644 --- a/src/Tokens/Tokens.js +++ b/src/Tokens/Tokens.js @@ -5,7 +5,7 @@ import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; -import { defaultAccount$, nodeHealth$ } from '@parity/light.js'; +import { defaultAccount$ } from '@parity/light.js'; import { Redirect } from 'react-router-dom'; import EthBalance from './EthBalance'; @@ -15,14 +15,12 @@ import TokenBalance from './TokenBalance'; @inject('parityStore', 'tokensStore') @observer @light({ - me: defaultAccount$, - nodeHealth: nodeHealth$ + me: defaultAccount$ }) class Tokens extends Component { render () { const { me, - nodeHealth, parityStore: { isApiConnected }, tokensStore: { tokens } } = this.props; @@ -44,43 +42,6 @@ class Tokens extends Component { )} ))} - - {/* @brian the following 3
  • are just to show what data I have from the backend, remove them whenever you want */} -
  • -

    1. DL and install parity Status

    - -
    OK, parity installed and running
    -
  • - - {nodeHealth && ( -
  • -

    2. Overall node health status

    -
    -                PEERS: {nodeHealth.peers.status} {nodeHealth.peers.details[0]}/{
    -                  nodeHealth.peers.details[1]
    -                }
    -                
    SYNC: {nodeHealth.sync.status} -
    TIMESYNC: {nodeHealth.time.status} -
    -

    - Note: I can make a small algorithm which outputs the average - health with 3 states: OK, ALRIGHT, and BAD -

    -
  • - )} - - {nodeHealth && ( -
  • -

    - 3. When SYNC above is false, we have the syncing progress to - give an idea how much time it'll take -

    -
    -                "startingBlock": 900
    "currentBlock": 902
    - "highestBlock": 1108 -
    -
  • - )}
    ); diff --git a/src/assets/img/icons/gear.svg b/src/assets/img/icons/gear.svg index 38aa98b57533220a5a69ff1bf6edc3e643ed302f..6800361fadef624123bf1a736f2bd75623181f8c 100644 --- a/src/assets/img/icons/gear.svg +++ b/src/assets/img/icons/gear.svg @@ -1,4 +1,10 @@ - - - + + + Untitled 10 + Created with Sketch. + + + + + \ No newline at end of file diff --git a/src/assets/sass/components/_debug-nav.scss b/src/assets/sass/components/_debug-nav.scss index 1eb987d4a6f39bdca08987c077f793a5105c34f4..b4091bf8a15479e7259f9ce75537dd4053b2d990 100644 --- a/src/assets/sass/components/_debug-nav.scss +++ b/src/assets/sass/components/_debug-nav.scss @@ -1,10 +1,14 @@ .debug-nav { background-color: rgba($black,0.125); position: fixed; + left: 1rem; right: 1rem; bottom: 1rem; + padding: 1rem; - a, a:link, a:visited { + a, + a:link, + a:visited { color: $white; display: block; padding: 0.5rem 1rem; diff --git a/src/assets/sass/components/_primary-nav.scss b/src/assets/sass/components/_footer-nav.scss similarity index 57% rename from src/assets/sass/components/_primary-nav.scss rename to src/assets/sass/components/_footer-nav.scss index f9263260623b37838bab4bcdc29ebc9fc5490432..1cfbbb4c3b28ee0998d744fda4756833ddb792c8 100644 --- a/src/assets/sass/components/_primary-nav.scss +++ b/src/assets/sass/components/_footer-nav.scss @@ -1,32 +1,37 @@ -.primary-nav { +.footer-nav { display: flex; - justify-content: flex-end; - padding-top: 0.25rem; + justify-content: space-between; + + .footer-nav_status { + padding: 1rem; + font-size: ms(-2); + color: $grey; + } + + .footer-nav_icons { + padding: 1rem; + } a, a:link, a:visited { - text-transform: uppercase; - font-size: ms(-2); - color: rgba($white, 0.675); - font-weight: 500; - padding: 0 0.5rem; display: block; + margin: -0.175rem 0 -0.175rem; + padding: 0.25rem 0.5rem 0.175rem; + border-radius: 0.25rem; &:hover { - color: $white; - border-radius: 0.25rem; + background: rgba($faint,0.5); + color: $black; } &.icon { - padding: 0; - width: ms(0) * 1.3; - height: ms(0) * 1.3; + 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; - margin-left: 0.25rem; &:hover { opacity: 1; } diff --git a/src/assets/sass/components/_header-nav.scss b/src/assets/sass/components/_header-nav.scss new file mode 100644 index 0000000000000000000000000000000000000000..501d56f64ccd0dc6f2cf7e372b3eb52a39548e7c --- /dev/null +++ b/src/assets/sass/components/_header-nav.scss @@ -0,0 +1,20 @@ +.header-nav { + display: flex; + justify-content: space-around; + padding: 1rem 0.5rem; + + a, + a:link, + a:visited { + color: rgba($black, 0.675); + font-weight: 500; + display: block; + margin: -0.175rem 0 -0.175rem; + padding: 0.25rem 0.5rem 0.175rem; + border-radius: 0.25rem; + &:hover { + background: rgba($faint,0.5); + color: $black; + } + } +} diff --git a/src/assets/sass/components/_send-form.scss b/src/assets/sass/components/_send-form.scss index 397c361be9360041191a2196176d402d4781e846..e474cea79e233963e30fca2405edae2367a51fd1 100644 --- a/src/assets/sass/components/_send-form.scss +++ b/src/assets/sass/components/_send-form.scss @@ -1,33 +1,50 @@ .send-form { - padding: 1rem; } .send-form_fields { + border-top: 1px solid rgba($faint,0.5); +} + +.send-form_field { + display: flex; + border-bottom: 1px solid rgba($faint,0.5); + padding: 0.5rem 0; + label { display: block; + padding-top: 0.325rem; + padding-right: 1rem; + text-align: right; font-size: ms(-1); + font-weight: 600; + color: $grey; + width: 9rem; } - input[type="tel"] { - -webkit-appearance: none; + input[type="number"] { display: block; width: 100%; - border-radius: 3px; - border: 1px solid $grey; + border-radius: 2px; + border: 1px solid lighten($faint,2.5%); font-family: $mono; font-size: ms(0); line-height: 1.3; + background-color: $eggshell; padding: 0.25rem 0.25rem 0.325rem; + box-shadow: 0 1px 2px rgba($black,0.0675); &:focus { - border-color: $blue; + background-color: $eggshell; + border-color: darken($faint,2.5%); + box-shadow: 0 0 0; } } } .send-form_action { - padding-top: 1rem; + padding-top: 0.5rem; + display: flex; + justify-content: flex-end; button { - margin: 0 auto; display: block; } } diff --git a/src/assets/sass/components/_status.scss b/src/assets/sass/components/_status.scss new file mode 100644 index 0000000000000000000000000000000000000000..3bcad3037f34f52824a3646d88fce44e42261568 --- /dev/null +++ b/src/assets/sass/components/_status.scss @@ -0,0 +1,42 @@ +.status { + .status_icon { + display: inline-block; + width: 0.5rem; + height: 0.5rem; + margin-right: 0.25rem; + + svg { + display: inline-block; + width: 0.5rem; + height: 0.5rem; + } + + &.-good { + svg { + circle { + fill: $green; + } + } + } + + &.-syncing { + svg { + circle { + fill: $yellow; + } + } + } + + &.-bad { + svg { + circle { + fill: $red; + } + } + } + } + + .status_text { + display: inline-block; + } +} diff --git a/src/assets/sass/components/_token-header.scss b/src/assets/sass/components/_token-header.scss deleted file mode 100644 index 492ab009df3f180603ba2f49e1d23c43f5b0affb..0000000000000000000000000000000000000000 --- a/src/assets/sass/components/_token-header.scss +++ /dev/null @@ -1,34 +0,0 @@ -.token-header { - text-align: center; - padding: 1rem 0; - border-bottom: 1px solid $faint -} - -.token-header_icon { - margin: 0 auto; - border-radius: ((ms(2) * 1.3) + 2rem) * 0.5; - width: (ms(2) * 1.3) + 2rem; - height: (ms(2) * 1.3) + 2rem; - background-color: $faint; - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: center; - align-items: center; - align-content: center; - img { - height: (ms(2) * 1.3); - width: auto; - } -} - -.token-header_name { - color: $black; - font-weight: 500; -} - -.token-header_balance { - font-family: $mono; - color: $grey; - font-size: ms(-1); -} \ No newline at end of file diff --git a/src/assets/sass/components/_token.scss b/src/assets/sass/components/_token.scss index eec854698043b956009ac216db8a1d19f92fbe68..8b0aa4354ccd267f493eb5e7cb74d90b7d489028 100644 --- a/src/assets/sass/components/_token.scss +++ b/src/assets/sass/components/_token.scss @@ -1,18 +1,15 @@ .token { - display: flex; - padding: 1rem; user-select: none; + display: flex; - &:hover { - cursor: default; + &.-header { + padding: 0 0 0.5rem; } .token_icon { margin: -0.5rem 0 -0.5rem -0.425rem; - border-radius: ((ms(0) * 1.3) + 1rem) * 0.5; width: (ms(0) * 1.3) + 1rem; height: (ms(0) * 1.3) + 1rem; - background-color: $faint; display: flex; flex-direction: column; flex-wrap: nowrap; @@ -26,7 +23,7 @@ } .token_name { - padding-left: 0.5rem; + padding-left: 0.325rem; flex-grow: 1; color: $black; font-weight: 500; @@ -36,4 +33,11 @@ font-family: $mono; color: $grey; } + + .token_symbol { + font-size: ms(-2); + &:before { + content: ' '; + } + } } diff --git a/src/assets/sass/layouts/_wrapper.scss b/src/assets/sass/layouts/_wrapper.scss index 75f1d41b3a5b69c9885a202f98c81d73b774340a..59290d570c1e73bf25e42081c0707c1027c72ada 100644 --- a/src/assets/sass/layouts/_wrapper.scss +++ b/src/assets/sass/layouts/_wrapper.scss @@ -20,16 +20,21 @@ height: 0.5rem; width: auto; polygon { - fill: $purple; + fill: $chrome; } } } .window { - background: $purple; - padding: 0.25rem; + background: $chrome; border-radius: 0.25rem; - box-shadow: 0 0.125rem 0.75rem rgba($black,0.325), 0 0.125rem 0.125rem rgba($black,0.175); + 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; + } } } } diff --git a/src/assets/sass/modules/_variables.scss b/src/assets/sass/modules/_variables.scss index 0bb56ca51671b03fe8caa67b3e37b26c2050110c..de99b0e876d8c37fe1880a5894d9b945845ca5dc 100644 --- a/src/assets/sass/modules/_variables.scss +++ b/src/assets/sass/modules/_variables.scss @@ -3,14 +3,19 @@ $sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-ser // Site colours +$eggshell: #fff; $white: #f9f9f9; +$chrome: #F5F6F6; $faint: #ddd; $black: #222; $grey: #888; $purple: #330044; -$blue: #3ec28f; + +$blue: #3E4DC2; $green: #3ec28f; +$yellow: #DFCA29; +$red: #C2473E; // Modular Scale diff --git a/src/assets/sass/shared/_basics.scss b/src/assets/sass/shared/_basics.scss index d28a6b8f1cf80c0c769b2c4d09f9fe5bb0568942..ed6ca4768543fa0c2f870dc1c47d28723d6ed3c1 100644 --- a/src/assets/sass/shared/_basics.scss +++ b/src/assets/sass/shared/_basics.scss @@ -11,7 +11,7 @@ body { background-image: linear-gradient(#A5BFDA, #BFCDDC); background-repeat: no-repeat; background-size: cover; - color: $white; + color: $black; font-family: $sans; font-weight: 400; font-size: ms(0); diff --git a/src/assets/sass/shared/_box.scss b/src/assets/sass/shared/_box.scss index 085774c9682ca9354190af94b6d52ceab916627b..15cab9fe1b5567a80953b5d8527cc30dd43d70fd 100644 --- a/src/assets/sass/shared/_box.scss +++ b/src/assets/sass/shared/_box.scss @@ -2,16 +2,23 @@ display: block; &.-card { + padding: 0.75rem; background: $white; - color: $grey; - box-shadow: 0 0.125rem 0.125rem rgba($black,0.5); border-radius: 2px; - - strong { - color: $black; + box-shadow: 0 1px 2px rgba($black,0.125); + &.-clickable { + transition: box-shadow 0.125s ease; + &:hover { + cursor: default; + box-shadow: 0 1px 2px rgba($black,0.225), 0 1px 2px rgba($black,0.125); + } } } + &.-well { + padding: 0.325rem; + } + &.-scroller { max-height: 22rem; overflow-x: hidden; diff --git a/src/assets/sass/shared/_button.scss b/src/assets/sass/shared/_button.scss index 77489e037b267f24050e60b6c1f57b1b8b9ae7c9..a3958be3ab2f4b379cc3225b3c750da3280ccbd1 100644 --- a/src/assets/sass/shared/_button.scss +++ b/src/assets/sass/shared/_button.scss @@ -1,7 +1,7 @@ button { color: $white; background-color: $green; - border-radius: 3px; + border-radius: 0.25rem; border: none; font-size: ms(0); line-height: 1.3; diff --git a/src/assets/sass/shared/_list.scss b/src/assets/sass/shared/_list.scss index 5ced253ec5f21190f0ea59648ec488163f11a691..1520e3998a7b6e1d50930ee8f9cb6e5e739081cd 100644 --- a/src/assets/sass/shared/_list.scss +++ b/src/assets/sass/shared/_list.scss @@ -1,7 +1,8 @@ .list { &.-tokens { + padding: 0.325rem; & > li { - margin-bottom: 0.25rem; + margin-bottom: 0.325rem; &:last-child { margin-bottom: 0; } diff --git a/yarn.lock b/yarn.lock index 07e4c8565f22241a8c561fcad1e5d51ade4f4493..ad9dcdcf94457bcd9eb55c6b90d467b34524814f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -122,9 +122,9 @@ version "2.1.6" resolved "https://registry.yarnpkg.com/@parity/jsonrpc/-/jsonrpc-2.1.6.tgz#260bbe7dfcec18d59f0bf1668dfd6021452d6452" -"@parity/light.js@https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45": +"@parity/light.js@https://github.com/parity-js/light.js#c531c68b5268a1bf7aba1f43424f440b2bde7828": version "1.0.0" - resolved "https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45" + resolved "https://github.com/parity-js/light.js#c531c68b5268a1bf7aba1f43424f440b2bde7828" dependencies: "@babel/runtime" "^7.0.0-beta.46" "@parity/api" "^2.1.22" @@ -1730,6 +1730,10 @@ case-sensitive-paths-webpack-plugin@2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.1.tgz#3d29ced8c1f124bf6f53846fb3f5894731fdc909" +case-sensitive-paths-webpack-plugin@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.2.tgz#c899b52175763689224571dad778742e133f0192" + caseless@~0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"