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 {