From a3da7d9c17254dfe12164409cb24f97312b6d37f Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Thu, 10 May 2018 15:16:55 +0100 Subject: [PATCH 01/11] moving things around so the interactions make a little more sense --- src/App/App.css | 117 ++++++++++-------- src/App/App.js | 35 +++--- src/App/App.sass | 3 +- src/Tokens/BalanceLayout/BalanceLayout.js | 4 +- src/Tokens/Tokens.js | 37 ------ src/assets/img/icons/gear.svg | 12 +- src/assets/sass/components/_debug-nav.scss | 4 +- .../{_primary-nav.scss => _footer-nav.scss} | 21 ++-- src/assets/sass/components/_header-nav.scss | 16 +++ src/assets/sass/components/_token-header.scss | 2 - src/assets/sass/components/_token.scss | 11 +- src/assets/sass/layouts/_wrapper.scss | 13 +- src/assets/sass/modules/_variables.scss | 1 + src/assets/sass/shared/_basics.scss | 2 +- src/assets/sass/shared/_box.scss | 11 -- src/assets/sass/shared/_list.scss | 3 +- 16 files changed, 153 insertions(+), 139 deletions(-) rename src/assets/sass/components/{_primary-nav.scss => _footer-nav.scss} (75%) create mode 100644 src/assets/sass/components/_header-nav.scss diff --git a/src/App/App.css b/src/App/App.css index 7dea331e..b5265323 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; @@ -771,13 +771,6 @@ a, a:link, a:visited { .box { display: block; } - .box.-card { - 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; } .box.-scroller { max-height: 22rem; overflow-x: hidden; @@ -808,10 +801,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 +848,30 @@ 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; right: 1rem; bottom: 1rem; } - .debug-nav a, .debug-nav a:link, .debug-nav a:visited { + .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); } @@ -893,16 +895,17 @@ button { .token { display: flex; - padding: 1rem; - user-select: none; } + padding: 0.75rem; + user-select: none; + background: #f9f9f9; + border-radius: 2px; + box-shadow: 0 1px 2px rgba(34, 34, 34, 0.125); } .token:hover { cursor: default; } .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; @@ -920,28 +923,44 @@ button { .token .token_balance { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; color: #888; } + .token .token_symbol { + font-size: 0.69444rem; } -.primary-nav { +.header-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; - font-size: 0.69444rem; - color: rgba(249, 249, 249, 0.675); + 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; 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 { + .header-nav a:hover, + .header-nav a:link:hover, + .header-nav a:visited:hover { + color: #222; } + +.footer-nav { + display: flex; + justify-content: space-between; } + .footer-nav .footer-nav_status { + padding: 1rem; + font-size: 0.69444rem; + color: #888; } + .footer-nav .footer-nav_icons { + padding: 1rem; } + .footer-nav a, + .footer-nav a:link, + .footer-nav a:visited { + display: block; } + .footer-nav a:hover, + .footer-nav a:link:hover, + .footer-nav a:visited:hover { + color: #f9f9f9; } + .footer-nav a.icon, + .footer-nav a:link.icon, + .footer-nav a:visited.icon { padding: 0; width: 1.3rem; height: 1.3rem; @@ -951,17 +970,17 @@ button { 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 { + .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 { @@ -971,10 +990,8 @@ button { .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; diff --git a/src/App/App.js b/src/App/App.js index a8a464b8..7966fd8e 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -32,21 +32,28 @@ class App extends Component {
- - - - - - + + +
+ + + + + + +
-
diff --git a/src/App/App.sass b/src/App/App.sass index dfbe5714..2402cd0c 100644 --- a/src/App/App.sass +++ b/src/App/App.sass @@ -22,7 +22,8 @@ @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/header-nav' +@import '../assets/sass/components/footer-nav' @import '../assets/sass/components/token-header' @import '../assets/sass/components/send-form' @import '../assets/sass/components/address' diff --git a/src/Tokens/BalanceLayout/BalanceLayout.js b/src/Tokens/BalanceLayout/BalanceLayout.js index 8ad53d83..a5c2ea63 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 5e79fc3c..e268650d 100644 --- a/src/Tokens/Tokens.js +++ b/src/Tokens/Tokens.js @@ -44,43 +44,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 38aa98b5..6800361f 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 1eb987d4..27f52bd7 100644 --- a/src/assets/sass/components/_debug-nav.scss +++ b/src/assets/sass/components/_debug-nav.scss @@ -4,7 +4,9 @@ right: 1rem; bottom: 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 75% rename from src/assets/sass/components/_primary-nav.scss rename to src/assets/sass/components/_footer-nav.scss index f9263260..bfde55f4 100644 --- a/src/assets/sass/components/_primary-nav.scss +++ b/src/assets/sass/components/_footer-nav.scss @@ -1,20 +1,23 @@ -.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; &:hover { color: $white; - border-radius: 0.25rem; } &.icon { diff --git a/src/assets/sass/components/_header-nav.scss b/src/assets/sass/components/_header-nav.scss new file mode 100644 index 00000000..f693b5e2 --- /dev/null +++ b/src/assets/sass/components/_header-nav.scss @@ -0,0 +1,16 @@ +.header-nav { + display: flex; + padding: 1rem 0.5rem; + + a, + a:link, + a:visited { + color: rgba($black, 0.675); + font-weight: 500; + padding: 0 0.5rem; + display: block; + &:hover { + color: $black; + } + } +} diff --git a/src/assets/sass/components/_token-header.scss b/src/assets/sass/components/_token-header.scss index 492ab009..61623803 100644 --- a/src/assets/sass/components/_token-header.scss +++ b/src/assets/sass/components/_token-header.scss @@ -6,10 +6,8 @@ .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; diff --git a/src/assets/sass/components/_token.scss b/src/assets/sass/components/_token.scss index eec85469..c9790745 100644 --- a/src/assets/sass/components/_token.scss +++ b/src/assets/sass/components/_token.scss @@ -1,7 +1,10 @@ .token { display: flex; - padding: 1rem; + padding: 0.75rem; user-select: none; + background: $white; + border-radius: 2px; + box-shadow: 0 1px 2px rgba($black,0.125); &:hover { cursor: default; @@ -9,10 +12,8 @@ .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; @@ -36,4 +37,8 @@ font-family: $mono; color: $grey; } + + .token_symbol { + font-size: ms(-2); + } } diff --git a/src/assets/sass/layouts/_wrapper.scss b/src/assets/sass/layouts/_wrapper.scss index 75f1d41b..59290d57 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 0bb56ca5..d79008d0 100644 --- a/src/assets/sass/modules/_variables.scss +++ b/src/assets/sass/modules/_variables.scss @@ -4,6 +4,7 @@ $sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-ser // Site colours $white: #f9f9f9; +$chrome: #F5F6F6; $faint: #ddd; $black: #222; $grey: #888; diff --git a/src/assets/sass/shared/_basics.scss b/src/assets/sass/shared/_basics.scss index d28a6b8f..ed6ca476 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 085774c9..05f96729 100644 --- a/src/assets/sass/shared/_box.scss +++ b/src/assets/sass/shared/_box.scss @@ -1,17 +1,6 @@ .box { display: block; - &.-card { - background: $white; - color: $grey; - box-shadow: 0 0.125rem 0.125rem rgba($black,0.5); - border-radius: 2px; - - strong { - color: $black; - } - } - &.-scroller { max-height: 22rem; overflow-x: hidden; diff --git a/src/assets/sass/shared/_list.scss b/src/assets/sass/shared/_list.scss index 5ced253e..1520e399 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; } -- GitLab From 0673294fe9a5f46c4038922300beb6603af42a5e Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Thu, 10 May 2018 15:39:42 +0100 Subject: [PATCH 02/11] fix lint and remove nodehealth to debug nav --- src/App/App.css | 4 +- src/Tokens/Tokens.js | 60 +++++++++++++++++----- src/assets/sass/components/_debug-nav.scss | 2 + 3 files changed, 52 insertions(+), 14 deletions(-) diff --git a/src/App/App.css b/src/App/App.css index b5265323..2420c4c3 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -861,8 +861,10 @@ button { .debug-nav { background-color: rgba(34, 34, 34, 0.125); position: fixed; + left: 1rem; right: 1rem; - bottom: 1rem; } + bottom: 1rem; + padding: 1rem; } .debug-nav a, .debug-nav a:link, .debug-nav a:visited { diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js index e268650d..992e165a 100644 --- a/src/Tokens/Tokens.js +++ b/src/Tokens/Tokens.js @@ -32,19 +32,53 @@ class Tokens extends Component { } return ( -
    -
      - {me && - Array.from(tokens.keys()).map(key => ( -
    • - {key === 'ETH' ? ( - - ) : ( - - )} -
      • - ))} -
    +
    +
    +
      + {me && + Array.from(tokens.keys()).map(key => ( +
    • + {key === 'ETH' ? ( + + ) : ( + + )} +
      • + )) + } +
    +
    +
    + {nodeHealth && ( +
    +

    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 && ( +
    +

    + 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/sass/components/_debug-nav.scss b/src/assets/sass/components/_debug-nav.scss index 27f52bd7..b4091bf8 100644 --- a/src/assets/sass/components/_debug-nav.scss +++ b/src/assets/sass/components/_debug-nav.scss @@ -1,8 +1,10 @@ .debug-nav { background-color: rgba($black,0.125); position: fixed; + left: 1rem; right: 1rem; bottom: 1rem; + padding: 1rem; a, a:link, -- GitLab From 53702c9a22ee98a242ea3d65c0fe73f6061d87b1 Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Thu, 10 May 2018 18:20:46 +0100 Subject: [PATCH 03/11] mock in sync state --- src/App/App.css | 22 +++++++++++++++++++-- src/App/App.js | 9 ++++++++- src/App/App.sass | 1 + src/assets/sass/components/_header-nav.scss | 5 ++++- src/assets/sass/components/_status.scss | 21 ++++++++++++++++++++ 5 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 src/assets/sass/components/_status.scss diff --git a/src/App/App.css b/src/App/App.css index 2420c4c3..f1d31607 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -928,6 +928,21 @@ button { .token .token_symbol { font-size: 0.69444rem; } +.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 svg circle { + fill: #3ec28f; } + +.status .status_text { + display: inline-block; } + .header-nav { display: flex; padding: 1rem 0.5rem; } @@ -936,11 +951,14 @@ button { .header-nav a:visited { color: rgba(34, 34, 34, 0.675); font-weight: 500; - padding: 0 0.5rem; - display: block; } + 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; } .footer-nav { diff --git a/src/App/App.js b/src/App/App.js index 7966fd8e..616db67f 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -47,7 +47,14 @@ class App extends Component {