From 06baaedfac624099762b0b68a003cf1e8edf62ff Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Mon, 28 May 2018 10:20:22 +0100 Subject: [PATCH 1/4] minor tweaks to header styles --- src/Accounts/Accounts.js | 18 +++++++----- src/App/App.css | 28 ++++++++++++++---- src/Receive/Receive.js | 16 +++++++---- src/assets/sass/components/_header-nav.scss | 32 +++++++++++++++++++-- 4 files changed, 73 insertions(+), 21 deletions(-) diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js index 265b2ec1..26a43594 100644 --- a/src/Accounts/Accounts.js +++ b/src/Accounts/Accounts.js @@ -37,13 +37,17 @@ class Accounts extends Component { return (
diff --git a/src/App/App.css b/src/App/App.css index 21627b2c..540432c8 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -994,11 +994,29 @@ button { .header-nav { display: flex; 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; } + padding: 1rem 0.5rem; + position: relative; } + .header-nav .header-nav_left, .header-nav .header-nav_right { + display: flex; + flex-grow: 1; + z-index: 1; } + .header-nav .header-nav_left { + justify-content: flex-start; } + .header-nav .header-nav_right { + justify-content: flex-end; } + .header-nav .header-nav_title { + z-index: 0; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + padding: 1rem 0.5rem; + text-align: center; } + .header-nav .header-nav_title a, .header-nav .header-nav_title a:link, .header-nav .header-nav_title a:visited, .header-nav .header-nav_title h1 { + color: rgba(34, 34, 34, 0.675); + font-weight: 500; + display: inline-block; } .header-nav.-modal { background: #f9f9f9; } .header-nav a, diff --git a/src/Receive/Receive.js b/src/Receive/Receive.js index 5df6c694..d2871a29 100644 --- a/src/Receive/Receive.js +++ b/src/Receive/Receive.js @@ -18,12 +18,16 @@ class Receive extends Component { return (
diff --git a/src/assets/sass/components/_header-nav.scss b/src/assets/sass/components/_header-nav.scss index 49f4d209..37331e3a 100644 --- a/src/assets/sass/components/_header-nav.scss +++ b/src/assets/sass/components/_header-nav.scss @@ -2,11 +2,37 @@ display: flex; justify-content: space-between; padding: 1rem 0.5rem; + position: relative; - .header_title { + .header-nav_left, .header-nav_right { + display: flex; + flex-grow: 1; + z-index: 1; + } + + .header-nav_left { + justify-content: flex-start; + } + + .header-nav_right { + justify-content: flex-end; + } + + .header-nav_title { + z-index: 0; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + padding: 1rem 0.5rem; text-align: center; - color: rgba($black, 0.675); - font-weight: 500; + + a, a:link, a:visited, h1 { + color: rgba($black, 0.675); + font-weight: 500; + display: inline-block; + } } &.-modal { -- GitLab From ed9ce28499bfdc7f3651e8049e2d9cfb8b045964 Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Thu, 31 May 2018 10:06:27 +0100 Subject: [PATCH 2/4] progress on account signup flow --- src/Accounts/Accounts.js | 2 +- src/Accounts/CreateAccount/CreateAccount.js | 24 ++- .../CreateAccountStep1/CreateAccountStep1.js | 46 +++--- .../CreateAccountStep2/CreateAccountStep2.js | 3 +- .../CreateAccountStep3/CreateAccountStep3.js | 7 +- .../CreateAccountStep4/CreateAccountStep4.js | 3 +- .../CreateAccountStep5/CreateAccountStep5.js | 1 - src/App/App.css | 139 ++++++++++-------- src/App/App.sass | 1 + src/Receive/Receive.js | 25 ++-- src/Tokens/Tokens.js | 29 ++-- src/Tokens/TokensList/TokensList.js | 4 - src/assets/img/icons/reload.svg | 14 +- src/assets/img/icons/tiny-reload.svg | 20 +++ src/assets/sass/components/_account.scss | 7 +- src/assets/sass/components/_form-nav.scss | 0 src/assets/sass/components/_header-nav.scss | 20 +-- .../sass/components/_progress-indicator.scss | 17 +++ src/assets/sass/components/_token.scss | 6 +- src/assets/sass/layouts/_wrapper.scss | 3 - src/assets/sass/modules/_variables.scss | 2 +- src/assets/sass/shared/_basics.scss | 6 +- src/assets/sass/shared/_box.scss | 20 +-- src/assets/sass/shared/_button.scss | 48 ++++-- src/assets/sass/shared/_list.scss | 12 +- src/assets/sass/shared/_text.scss | 5 + 26 files changed, 266 insertions(+), 198 deletions(-) create mode 100644 src/assets/img/icons/tiny-reload.svg create mode 100644 src/assets/sass/components/_form-nav.scss create mode 100644 src/assets/sass/components/_progress-indicator.scss diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js index aaaa8549..8ddeb542 100644 --- a/src/Accounts/Accounts.js +++ b/src/Accounts/Accounts.js @@ -58,7 +58,7 @@ class Accounts extends Component {
{accountsInfo - ?
    + ?
      {Object.keys(accountsInfo).map(address =>
    • diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js index 88213fbe..7e7e7b0c 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js +++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js @@ -27,30 +27,40 @@ class CreateAccountStep1 extends Component { return (
      {address && -
      -
      - Your new address:
      - - 
      {address}
      - {pathname === '/accounts/new' && - } +
      +
      +
      + +
      +
      +
      + {name + ? name + : Account name} +
      +
      + {address} +
      +
      -
      + {pathname === '/accounts/new' && + } +
      + + +
      +
      }
      ); diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js index d788f2c8..9838bbe2 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js +++ b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js @@ -15,13 +15,12 @@ class CreateAccountStep2 extends Component { return (
      -

      Create account step 2

      Please write your secret phrase on a piece of paper:
      {phrase}
      - +
      ); diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js index d337ed5a..319fd627 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js +++ b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js @@ -22,18 +22,13 @@ class CreateAccountStep3 extends Component { return (
      -

      Create account step 3

      Please rewrite your whole phrase here
      - - @brian maybe tell the user to write the 3rd, 9th and 11th word only? - 3,9,11 being random numbers - {value === phrase && - + }
      ); diff --git a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js index 6e4a0003..f9304ad5 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js +++ b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js @@ -40,7 +40,6 @@ class CreateAccountStep3 extends Component { return (
      -

      Create account step 4

      - {password && confirm === password && } + {password && confirm === password && }
      ); diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js index 2a688ac7..8a304c6b 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js +++ b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js @@ -19,7 +19,6 @@ class CreateAccountStep5 extends Component { return (
      -

      Create account step 5

      Confirm account creation?

      Password Hint: {hint} diff --git a/src/App/App.css b/src/App/App.css index 540432c8..a1e7b27a 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -742,13 +742,11 @@ ul, ol { box-sizing: border-box; } html { - font-size: 17px; + font-size: 16px; height: 100%; } - @media screen and (min-width: 1280px) { - html { - font-size: 1.4vw; } } body { + user-select: none; background-color: #A5BFDA; background-image: linear-gradient(#A5BFDA, #BFCDDC); background-repeat: no-repeat; @@ -772,54 +770,68 @@ a, a:link, a:visited { .box { display: block; } .box.-card { - padding: 0.75rem; - background: #f9f9f9; - border-radius: 2px; - box-shadow: 0 1px 2px rgba(34, 34, 34, 0.125); } + padding: 1rem; + border-radius: 0.25rem; + background-color: #fff; + box-shadow: 0 0.125rem 0.5rem rgba(34, 34, 34, 0.125); } .box.-card.-clickable { - transition: box-shadow 0.125s ease; } + transition: box-shadow ease 0.125s; } .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-shadow: 0 0.125rem 0.675rem rgba(34, 34, 34, 0.175); + cursor: default; } + .box.-card.-clickable:active { + box-shadow: 0 0.125rem 0.325rem rgba(34, 34, 34, 0.175); + cursor: default; } .box.-scroller { max-height: 22rem; overflow-x: hidden; overflow-y: auto; } .box.-padded { - padding: 1rem; } - .box.-modal { - background: #f9f9f9; } + padding: 0.5rem; } .box.-stacked { margin-bottom: 0.5rem; } .box.-stacked:last-child { margin-bottom: 0; } -button { - color: #f9f9f9; - background-color: #3ec28f; - border-radius: 0.25rem; - border: none; - font-size: 1rem; +.button { + color: #160DF6; + background-color: transparent; + border-radius: 1rem; + border: 2px solid #160DF6; + font-size: 0.69444rem; + font-weight: 600; line-height: 1.3; - padding: 0.25rem 0.675rem 0.325rem; } - button:active { - background-color: #3ab988; } - button.-small { - font-weight: 500; + padding: 0.325rem 0.675rem 0.325rem; + text-transform: uppercase; } + .button:active { + background-color: #160DF6; + color: #f9f9f9; } + .button.-tiny { font-size: 0.69444rem; - padding: 0.125rem 0.25rem 0.175rem; - background-color: #ddd; - color: rgba(34, 34, 34, 0.75); } - button.-small:active { - background-color: #d7d7d7; } - -.list.-padded { - padding: 0.325rem; } - .list.-padded > li { - margin-bottom: 0.325rem; } - .list.-padded > li:last-child { + text-transform: none; + border: 0; + border-radius: 2px; + color: #222; + background-size: auto 0.675rem; + background-position: left center; + background-repeat: no-repeat; + background-color: transparent; + padding: 0 0 0 0.925rem; + opacity: 0.5; } + .button.-tiny:hover { + opacity: 0.625; + background-color: transparent; } + .button.-tiny:active { + opacity: 0.75; + background-color: transparent; } + .button.-tiny.-reload { + background-image: url("../assets/img/icons/reload.svg"); } + +.list { + padding: 0.5rem; } + .list > li { + margin-bottom: 0.5rem; } + .list > li:last-child { margin-bottom: 0; } .text p, .text ul, .text ol, .text blockquote { @@ -842,6 +854,9 @@ button { .text strong { font-weight: 500; } +.span.-placeholder { + color: #ddd; } + .wrapper { position: fixed; left: 0; @@ -868,13 +883,9 @@ button { 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; } + .wrapper .content .window .window_content.-modal { + border-top: 0; + border-bottom: 0; } .debug-nav { background-color: rgba(34, 34, 34, 0.125); @@ -914,10 +925,7 @@ button { overflow: hidden; } .token { - user-select: none; display: flex; } - .token.-header { - padding: 0 0 0.5rem; } .token .token_icon { margin: -0.5rem 0 -0.5rem -0.425rem; width: 2.3rem; @@ -945,12 +953,10 @@ button { content: ' '; } .account { - user-select: none; display: flex; } .account .account_avatar { - margin: -0.5rem 0 -0.5rem -0.425rem; - width: 3.3rem; - height: 3.3rem; + width: 2.3rem; + height: 2.3rem; display: flex; flex-direction: column; flex-wrap: nowrap; @@ -958,6 +964,7 @@ button { align-items: center; align-content: center; } .account .account_avatar canvas { + display: block; height: 1.3rem !important; width: auto !important; } .account .account_information { @@ -998,14 +1005,11 @@ button { position: relative; } .header-nav .header-nav_left, .header-nav .header-nav_right { display: flex; - flex-grow: 1; - z-index: 1; } - .header-nav .header-nav_left { - justify-content: flex-start; } - .header-nav .header-nav_right { - justify-content: flex-end; } + flex-direction: column; + justify-content: center; + align-items: center; } .header-nav .header-nav_title { - z-index: 0; + z-index: 2; position: absolute; left: 0; right: 0; @@ -1017,11 +1021,10 @@ button { color: rgba(34, 34, 34, 0.675); font-weight: 500; display: inline-block; } - .header-nav.-modal { - background: #f9f9f9; } .header-nav a, .header-nav a:link, .header-nav a:visited { + z-index: 9; color: rgba(34, 34, 34, 0.675); font-weight: 500; display: block; @@ -1160,3 +1163,17 @@ button { background: rgba(221, 221, 221, 0.25); word-wrap: break-word; padding: 0.5rem; } + +.progress-indicator { + display: flex; + width: 2.5rem; + height: 0.25rem; + overflow: hidden; + border-radius: 0.25rem; } + +.progress-indicator_step { + flex: 1; + background: #ddd; + height: 0.25rem; } + .progress-indicator_step.-complete { + background: #3ec28f; } diff --git a/src/App/App.sass b/src/App/App.sass index 4ddda06b..6591a71b 100644 --- a/src/App/App.sass +++ b/src/App/App.sass @@ -28,4 +28,5 @@ @import '../assets/sass/components/footer-nav' @import '../assets/sass/components/send-form' @import '../assets/sass/components/address' +@import '../assets/sass/components/progress-indicator' diff --git a/src/Receive/Receive.js b/src/Receive/Receive.js index 7fb54d36..2c68e80f 100644 --- a/src/Receive/Receive.js +++ b/src/Receive/Receive.js @@ -17,10 +17,10 @@ class Receive extends PureComponent { const { me } = this.props; return (

      -
      • )} -
    • - Add/Remove Token -
diff --git a/src/assets/img/icons/reload.svg b/src/assets/img/icons/reload.svg index efd0c937..81650678 100644 --- a/src/assets/img/icons/reload.svg +++ b/src/assets/img/icons/reload.svg @@ -1,18 +1,18 @@ - + - Untitled 6 + Untitled 13 Created with Sketch. - + - - + + - - + + diff --git a/src/assets/img/icons/tiny-reload.svg b/src/assets/img/icons/tiny-reload.svg new file mode 100644 index 00000000..d4cf5a7f --- /dev/null +++ b/src/assets/img/icons/tiny-reload.svg @@ -0,0 +1,20 @@ + + + + Untitled 14 + 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 index e8c93070..b37d0b23 100644 --- a/src/assets/sass/components/_account.scss +++ b/src/assets/sass/components/_account.scss @@ -1,11 +1,9 @@ .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; + width: (ms(0) * 1.3) + 1rem; + height: (ms(0) * 1.3) + 1rem; display: flex; flex-direction: column; flex-wrap: nowrap; @@ -14,6 +12,7 @@ align-content: center; canvas { + display: block; height: (ms(0) * 1.3) !important; width: auto !important; } diff --git a/src/assets/sass/components/_form-nav.scss b/src/assets/sass/components/_form-nav.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/assets/sass/components/_header-nav.scss b/src/assets/sass/components/_header-nav.scss index 37331e3a..fdc028f3 100644 --- a/src/assets/sass/components/_header-nav.scss +++ b/src/assets/sass/components/_header-nav.scss @@ -6,20 +6,13 @@ .header-nav_left, .header-nav_right { display: flex; - flex-grow: 1; - z-index: 1; - } - - .header-nav_left { - justify-content: flex-start; - } - - .header-nav_right { - justify-content: flex-end; + flex-direction: column; + justify-content: center; + align-items: center; } .header-nav_title { - z-index: 0; + z-index: 2; position: absolute; left: 0; right: 0; @@ -35,13 +28,10 @@ } } - &.-modal { - background: $white; - } - a, a:link, a:visited { + z-index: 9; color: rgba($black, 0.675); font-weight: 500; display: block; diff --git a/src/assets/sass/components/_progress-indicator.scss b/src/assets/sass/components/_progress-indicator.scss new file mode 100644 index 00000000..c5e55fea --- /dev/null +++ b/src/assets/sass/components/_progress-indicator.scss @@ -0,0 +1,17 @@ +.progress-indicator { + display: flex; + width: 2.5rem; + height: 0.25rem; + overflow: hidden; + border-radius: 0.25rem; +} + +.progress-indicator_step { + flex: 1; + background: $faint; + height: 0.25rem; + + &.-complete { + background: $green; + } +} diff --git a/src/assets/sass/components/_token.scss b/src/assets/sass/components/_token.scss index 8b0aa435..ddde4273 100644 --- a/src/assets/sass/components/_token.scss +++ b/src/assets/sass/components/_token.scss @@ -1,11 +1,6 @@ .token { - user-select: none; display: flex; - &.-header { - padding: 0 0 0.5rem; - } - .token_icon { margin: -0.5rem 0 -0.5rem -0.425rem; width: (ms(0) * 1.3) + 1rem; @@ -16,6 +11,7 @@ justify-content: center; align-items: center; align-content: center; + img { height: (ms(0) * 1.3); width: auto; diff --git a/src/assets/sass/layouts/_wrapper.scss b/src/assets/sass/layouts/_wrapper.scss index b3295253..42261950 100644 --- a/src/assets/sass/layouts/_wrapper.scss +++ b/src/assets/sass/layouts/_wrapper.scss @@ -32,9 +32,6 @@ 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; diff --git a/src/assets/sass/modules/_variables.scss b/src/assets/sass/modules/_variables.scss index de99b0e8..ada25468 100644 --- a/src/assets/sass/modules/_variables.scss +++ b/src/assets/sass/modules/_variables.scss @@ -12,7 +12,7 @@ $grey: #888; $purple: #330044; -$blue: #3E4DC2; +$blue: #160DF6; $green: #3ec28f; $yellow: #DFCA29; $red: #C2473E; diff --git a/src/assets/sass/shared/_basics.scss b/src/assets/sass/shared/_basics.scss index ed6ca476..dac04efd 100644 --- a/src/assets/sass/shared/_basics.scss +++ b/src/assets/sass/shared/_basics.scss @@ -1,12 +1,10 @@ html { - font-size: 17px; + font-size: 16px; height: 100%; - @media screen and (min-width: $large) { - font-size: 1.4vw; - } } body { + user-select: none; background-color: #A5BFDA; background-image: linear-gradient(#A5BFDA, #BFCDDC); background-repeat: no-repeat; diff --git a/src/assets/sass/shared/_box.scss b/src/assets/sass/shared/_box.scss index ea18f740..99660072 100644 --- a/src/assets/sass/shared/_box.scss +++ b/src/assets/sass/shared/_box.scss @@ -2,21 +2,24 @@ display: block; &.-card { - padding: 0.75rem; - background: $white; - border-radius: 2px; - box-shadow: 0 1px 2px rgba($black,0.125); + padding: 1rem; + border-radius: 0.25rem; + background-color: $eggshell; + box-shadow: 0 0.125rem 0.5rem rgba($black,0.125); &.-clickable { - transition: box-shadow 0.125s ease; + transition: box-shadow ease 0.125s; &:hover { + box-shadow: 0 0.125rem 0.675rem rgba($black,0.175); + cursor: default; + } + &:active { + box-shadow: 0 0.125rem 0.325rem rgba($black,0.175); cursor: default; - box-shadow: 0 1px 2px rgba($black,0.225), 0 1px 2px rgba($black,0.125); } } } &.-well { - padding: 0.325rem; } &.-scroller { @@ -26,11 +29,10 @@ } &.-padded { - padding: 1rem; + padding: 0.5rem; } &.-modal { - background: $white; } &.-stacked { diff --git a/src/assets/sass/shared/_button.scss b/src/assets/sass/shared/_button.scss index a3958be3..1b2002d6 100644 --- a/src/assets/sass/shared/_button.scss +++ b/src/assets/sass/shared/_button.scss @@ -1,23 +1,43 @@ -button { - color: $white; - background-color: $green; - border-radius: 0.25rem; - border: none; - font-size: ms(0); +.button { + color: $blue; + background-color: transparent; + border-radius: 1rem; + border: 2px solid $blue; + font-size: ms(-2); + font-weight: 600; line-height: 1.3; - padding: 0.25rem 0.675rem 0.325rem; + padding: 0.325rem 0.675rem 0.325rem; + text-transform: uppercase; &:active { - background-color: darken($green,2.5%) + background-color: $blue; + color: $white; } - &.-small { - font-weight: 500; + &.-tiny { font-size: ms(-2); - padding: 0.125rem 0.25rem 0.175rem; - background-color: $faint; - color: rgba($black,0.75); + text-transform: none; + border: 0; + border-radius: 2px; + color: $black; + background-size: auto 0.675rem; + background-position: left center; + background-repeat: no-repeat; + background-color: transparent; + padding: 0 0 0 0.925rem; + opacity: 0.5; + + &:hover { + opacity: 0.625; + background-color: transparent; + } + &:active { - background-color: darken($faint,2.5%) + opacity: 0.75; + background-color: transparent; + } + + &.-reload { + background-image: url('../assets/img/icons/reload.svg'); } } } diff --git a/src/assets/sass/shared/_list.scss b/src/assets/sass/shared/_list.scss index b6037a59..635d8ca5 100644 --- a/src/assets/sass/shared/_list.scss +++ b/src/assets/sass/shared/_list.scss @@ -1,11 +1,9 @@ .list { - &.-padded { - padding: 0.325rem; - & > li { - margin-bottom: 0.325rem; - &:last-child { - margin-bottom: 0; - } + padding: 0.5rem; + & > li { + margin-bottom: 0.5rem; + &:last-child { + margin-bottom: 0; } } } diff --git a/src/assets/sass/shared/_text.scss b/src/assets/sass/shared/_text.scss index 15800109..dd290fd0 100644 --- a/src/assets/sass/shared/_text.scss +++ b/src/assets/sass/shared/_text.scss @@ -27,3 +27,8 @@ } } +.span { + &.-placeholder { + color: $faint; + } +} -- GitLab From 0feeab66c9591f183cb743fbf32051977ad6d7aa Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Thu, 31 May 2018 17:33:37 +0100 Subject: [PATCH 3/4] rough stab at account creation flow --- src/Accounts/Accounts.js | 2 +- src/Accounts/CreateAccount/CreateAccount.js | 2 +- .../CreateAccountStep1/CreateAccountStep1.js | 64 +++++++------ .../CreateAccountStep2/CreateAccountStep2.js | 42 ++++++-- .../CreateAccountStep3/CreateAccountStep3.js | 51 ++++++++-- .../CreateAccountStep4/CreateAccountStep4.js | 96 +++++++++++++------ .../CreateAccountStep5/CreateAccountStep5.js | 40 ++++++-- src/App/App.css | 67 ++++++++++++- src/App/App.sass | 1 + src/assets/img/icons/reload.svg | 10 +- src/assets/sass/components/_form-nav.scss | 5 + src/assets/sass/shared/_box.scss | 26 ++++- src/assets/sass/shared/_button.scss | 10 +- src/assets/sass/shared/_form.scss | 28 ++++++ src/assets/sass/shared/_text.scss | 11 +++ 15 files changed, 359 insertions(+), 96 deletions(-) diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js index 8ddeb542..1e0eaea5 100644 --- a/src/Accounts/Accounts.js +++ b/src/Accounts/Accounts.js @@ -49,7 +49,7 @@ class Accounts extends Component {
- + New account
diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js index 7229bec4..252cf2ce 100644 --- a/src/Accounts/CreateAccount/CreateAccount.js +++ b/src/Accounts/CreateAccount/CreateAccount.js @@ -39,7 +39,7 @@ class CreateAccount extends PureComponent {
- + diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js index 7e7e7b0c..31c074dd 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js +++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js @@ -25,42 +25,48 @@ class CreateAccountStep1 extends Component { } = this.props; return ( -
+
{address &&
-
-
- +
+
+
+ +
+
+
+ {name + ? name + : Account} +
+
+ {address} +
+
-
-
- {name - ? name - : Account name} +
+
+ {pathname === '/accounts/new/step1' && + }
-
- {address} +
+ +
+
-
- {pathname === '/accounts/new' && - } -
- - -
}
); diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js index 9838bbe2..55f67371 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js +++ b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js @@ -4,6 +4,7 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import Blockie from 'react-blockies'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; @@ -11,17 +12,42 @@ import { Link } from 'react-router-dom'; @observer class CreateAccountStep2 extends Component { render () { - const { createAccountStore: { phrase } } = this.props; + const { createAccountStore: { address, name, phrase } } = this.props; return ( -
-
- Please write your secret phrase on a piece of paper:
- 
{phrase}
+
+
+
+
+
+ +
+
+
+ {name + ? name + : Account} +
+
+ {address} +
+
+
+
+
+

Please write your secret phrase on a piece of paper:

+
+
+ {phrase} +
+ +
+
- - -
); } diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js index 319fd627..092c3deb 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js +++ b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js @@ -4,6 +4,7 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import Blockie from 'react-blockies'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; @@ -17,19 +18,51 @@ class CreateAccountStep3 extends Component { handleChange = ({ target: { value } }) => this.setState({ value }); render () { - const { createAccountStore: { phrase } } = this.props; + const { createAccountStore: { address, name, phrase } } = this.props; const { value } = this.state; return ( -
-
- Please rewrite your whole phrase here
- +
+
+
+
+
+ +
+
+
+ {name + ? name + : Account} +
+
+ {address} +
+
+
+
+
+

Please write your recovery phrase here:

+
+
+ + +
+ + +
+
- {value === phrase && - - - }
); } diff --git a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js index f9304ad5..b9e8168c 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js +++ b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js @@ -4,11 +4,12 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import Blockie from 'react-blockies'; import { inject, observer } from 'mobx-react'; @inject('createAccountStore') @observer -class CreateAccountStep3 extends Component { +class CreateAccountStep4 extends Component { state = { confirm: '', hint: '', @@ -36,40 +37,75 @@ class CreateAccountStep3 extends Component { }; render () { + const { createAccountStore: { address, name } } = this.props; const { confirm, hint, password } = this.state; return ( -
-
- -
- -
- - {password && confirm === password && } -
+
+
+
+
+
+ +
+
+
+ {name + ? name + : Account} +
+
+ {address} +
+
+
+
+
+
+

Secure your account with a password:

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
); } } -export default CreateAccountStep3; +export default CreateAccountStep4; diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js index 8a304c6b..38a99186 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js +++ b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js @@ -4,6 +4,7 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; +import Blockie from 'react-blockies'; import { inject, observer } from 'mobx-react'; @inject('createAccountStore') @@ -15,15 +16,40 @@ class CreateAccountStep5 extends Component { }; render () { - const { createAccountStore: { hint } } = this.props; + const { createAccountStore: { address, name, hint } } = this.props; return ( -
-

Confirm account creation?

-

- Password Hint: {hint} -

- +
+
+
+
+
+ +
+
+
+ {name + ? name + : Account} +
+
+ {address} +
+
+
+
+
+

Ready to create account?

+
+
+ {hint} +
+ +
+
+
); } diff --git a/src/App/App.css b/src/App/App.css index a1e7b27a..8ecd93ed 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -768,11 +768,14 @@ a, a:link, a:visited { cursor: default; } .box { - display: block; } + display: block; + position: relative; } .box.-card { + z-index: 1; padding: 1rem; border-radius: 0.25rem; background-color: #fff; + overflow: hidden; box-shadow: 0 0.125rem 0.5rem rgba(34, 34, 34, 0.125); } .box.-card.-clickable { transition: box-shadow ease 0.125s; } @@ -782,12 +785,28 @@ a, a:link, a:visited { .box.-card.-clickable:active { box-shadow: 0 0.125rem 0.325rem rgba(34, 34, 34, 0.175); cursor: default; } + .box.-card-drawer { + margin: 1rem -2rem -2rem; + padding: 1rem 2rem 2rem; + border-top: 1px solid #e0e0e0; + box-shadow: 0 0.125rem 0.325rem rgba(34, 34, 34, 0.075) inset; + background-color: #fdfdfd; } .box.-scroller { max-height: 22rem; overflow-x: hidden; overflow-y: auto; } .box.-padded { padding: 0.5rem; } + .box.-apart { + margin-top: 1rem; + margin-bottom: 1rem; } + .box.-apart:first-child { + margin-top: 0; } + .box.-apart:last-child { + margin-bottom: 0; } + .box.-pull-up { + margin-top: -1rem; + margin-bottom: 1rem; } .box.-stacked { margin-bottom: 0.5rem; } .box.-stacked:last-child { @@ -803,9 +822,12 @@ a, a:link, a:visited { line-height: 1.3; padding: 0.325rem 0.675rem 0.325rem; text-transform: uppercase; } - .button:active { + .button:hover { background-color: #160DF6; color: #f9f9f9; } + .button:active { + background-color: #1209ed; + color: #f9f9f9; } .button.-tiny { font-size: 0.69444rem; text-transform: none; @@ -817,7 +839,7 @@ a, a:link, a:visited { background-repeat: no-repeat; background-color: transparent; padding: 0 0 0 0.925rem; - opacity: 0.5; } + opacity: 0.425; } .button.-tiny:hover { opacity: 0.625; background-color: transparent; } @@ -827,6 +849,30 @@ a, a:link, a:visited { .button.-tiny.-reload { background-image: url("../assets/img/icons/reload.svg"); } +.form_field { + margin: 0.5rem 0; + border-radius: 0.25rem; + background: rgba(221, 221, 221, 0.25); } + .form_field label { + font-size: 0.5787rem; + font-weight: 600; + color: #222; + opacity: 0.75; + padding: 0.5rem 0.5rem 0; } + .form_field input { + border: 0; + background: transparent; + font-size: 1rem; + font-weight: 400; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + line-height: 1.3rem; + width: 100%; + opacity: 0.75; + padding: 0.5rem; + margin-top: -0.25rem; } + .form_field input:focus { + opacity: 1; } + .list { padding: 0.5rem; } .list > li { @@ -854,6 +900,16 @@ a, a:link, a:visited { .text strong { font-weight: 500; } +.text.-code { + user-select: text; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + padding: 0.5rem; + background: rgba(221, 221, 221, 0.25); + color: #222; + margin: 0.5rem 0; + font-size: 0.83333rem; + border-radius: 0.25rem; } + .span.-placeholder { color: #ddd; } @@ -1177,3 +1233,8 @@ a, a:link, a:visited { height: 0.25rem; } .progress-indicator_step.-complete { background: #3ec28f; } + +.form-nav { + padding-top: 0.5rem; + display: flex; + justify-content: center; } diff --git a/src/App/App.sass b/src/App/App.sass index 6591a71b..6e6bbf58 100644 --- a/src/App/App.sass +++ b/src/App/App.sass @@ -29,4 +29,5 @@ @import '../assets/sass/components/send-form' @import '../assets/sass/components/address' @import '../assets/sass/components/progress-indicator' +@import '../assets/sass/components/form-nav' diff --git a/src/assets/img/icons/reload.svg b/src/assets/img/icons/reload.svg index 81650678..e128a020 100644 --- a/src/assets/img/icons/reload.svg +++ b/src/assets/img/icons/reload.svg @@ -5,14 +5,14 @@ Created with Sketch. - - + + - + - + - + diff --git a/src/assets/sass/components/_form-nav.scss b/src/assets/sass/components/_form-nav.scss index e69de29b..361d4411 100644 --- a/src/assets/sass/components/_form-nav.scss +++ b/src/assets/sass/components/_form-nav.scss @@ -0,0 +1,5 @@ +.form-nav { + padding-top: 0.5rem; + display: flex; + justify-content: center; +} diff --git a/src/assets/sass/shared/_box.scss b/src/assets/sass/shared/_box.scss index 99660072..4416de41 100644 --- a/src/assets/sass/shared/_box.scss +++ b/src/assets/sass/shared/_box.scss @@ -1,10 +1,13 @@ .box { display: block; + position: relative; &.-card { + z-index: 1; padding: 1rem; border-radius: 0.25rem; background-color: $eggshell; + overflow: hidden; box-shadow: 0 0.125rem 0.5rem rgba($black,0.125); &.-clickable { transition: box-shadow ease 0.125s; @@ -19,6 +22,14 @@ } } + &.-card-drawer { + margin: 1rem -2rem -2rem; + padding: 1rem 2rem 2rem; + border-top: 1px solid lighten($faint,1.25%); + box-shadow: 0 0.125rem 0.325rem rgba($black,0.075) inset; + background-color: darken($eggshell,0.75%); + } + &.-well { } @@ -32,7 +43,20 @@ padding: 0.5rem; } - &.-modal { + &.-apart { + margin-top: 1rem; + margin-bottom: 1rem; + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } + } + + &.-pull-up { + margin-top: -1rem; + margin-bottom: 1rem; } &.-stacked { diff --git a/src/assets/sass/shared/_button.scss b/src/assets/sass/shared/_button.scss index 1b2002d6..e5507598 100644 --- a/src/assets/sass/shared/_button.scss +++ b/src/assets/sass/shared/_button.scss @@ -8,11 +8,17 @@ line-height: 1.3; padding: 0.325rem 0.675rem 0.325rem; text-transform: uppercase; - &:active { + + &:hover { background-color: $blue; color: $white; } + &:active { + background-color: darken($blue,2.5%); + color: $white; + } + &.-tiny { font-size: ms(-2); text-transform: none; @@ -24,7 +30,7 @@ background-repeat: no-repeat; background-color: transparent; padding: 0 0 0 0.925rem; - opacity: 0.5; + opacity: 0.425; &:hover { opacity: 0.625; diff --git a/src/assets/sass/shared/_form.scss b/src/assets/sass/shared/_form.scss index 8b137891..15e62df6 100644 --- a/src/assets/sass/shared/_form.scss +++ b/src/assets/sass/shared/_form.scss @@ -1 +1,29 @@ +.form_field { + margin: 0.5rem 0; + border-radius: 0.25rem; + background: rgba($faint,0.25); + label { + font-size: ms(-3); + font-weight: 600; + color: $black; + opacity: 0.75; + padding: 0.5rem 0.5rem 0; + } + + input { + border: 0; + background: transparent; + font-size: ms(0); + font-weight: 400; + font-family: $sans; + line-height: ms(0) * 1.3; + width: 100%; + opacity: 0.75; + padding: 0.5rem; + margin-top: -0.25rem; + &:focus { + opacity: 1; + } + } +} diff --git a/src/assets/sass/shared/_text.scss b/src/assets/sass/shared/_text.scss index dd290fd0..8d9b902b 100644 --- a/src/assets/sass/shared/_text.scss +++ b/src/assets/sass/shared/_text.scss @@ -25,6 +25,17 @@ strong { font-weight: 500; } + + &.-code { + user-select: text; + font-family: $mono; + padding: 0.5rem; + background: rgba($faint,0.25); + color: $black; + margin: 0.5rem 0; + font-size: ms(-1); + border-radius: 0.25rem; + } } .span { -- GitLab From af669d2d9c67f7fe74ea1f1c3bf179db1f35135b Mon Sep 17 00:00:00 2001 From: Brian Flanagan Date: Thu, 31 May 2018 17:42:46 +0100 Subject: [PATCH 4/4] fix lint issues --- .../CreateAccountStep1/CreateAccountStep1.js | 6 ++---- .../CreateAccountStep2/CreateAccountStep2.js | 4 +--- .../CreateAccountStep3/CreateAccountStep3.js | 8 +++----- .../CreateAccountStep4/CreateAccountStep4.js | 4 +--- .../CreateAccountStep5/CreateAccountStep5.js | 6 ++---- 5 files changed, 9 insertions(+), 19 deletions(-) diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js index 31c074dd..6ef1fd7e 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js +++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js @@ -35,9 +35,7 @@ class CreateAccountStep1 extends Component {
- {name - ? name - : Account} + {name || Account}
{address} @@ -59,7 +57,7 @@ class CreateAccountStep1 extends Component { />
- {name - ? name - : Account} + {name || Account}
{address} diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js index 092c3deb..71296efa 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js +++ b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js @@ -31,9 +31,7 @@ class CreateAccountStep3 extends Component {
- {name - ? name - : Account} + {name || Account}
{address} @@ -56,8 +54,8 @@ class CreateAccountStep3 extends Component {
diff --git a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js index b9e8168c..65f98fcf 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js +++ b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js @@ -50,9 +50,7 @@ class CreateAccountStep4 extends Component {
- {name - ? name - : Account} + {name || Account}
{address} diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js index 38a99186..99de3bc2 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js +++ b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js @@ -16,7 +16,7 @@ class CreateAccountStep5 extends Component { }; render () { - const { createAccountStore: { address, name, hint } } = this.props; + const { createAccountStore: { address, name, hint } } = this.props; return (
@@ -28,9 +28,7 @@ class CreateAccountStep5 extends Component {
- {name - ? name - : Account} + {name || Account}
{address} -- GitLab