From b4ad551d8dc69a57a1c34a9823689e5ab85a9671 Mon Sep 17 00:00:00 2001
From: Brian Flanagan <brian@elbow.ie>
Date: Fri, 1 Jun 2018 14:24:25 +0100
Subject: [PATCH 1/7] bring acct styles over to send form

---
 src/Accounts/CreateAccount/CreateAccount.js |   2 +-
 src/Send/Send.js                            | 107 +++++++++++---------
 2 files changed, 58 insertions(+), 51 deletions(-)

diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js
index 252cf2ce..9d7fa38c 100644
--- a/src/Accounts/CreateAccount/CreateAccount.js
+++ b/src/Accounts/CreateAccount/CreateAccount.js
@@ -16,7 +16,7 @@ class CreateAccount extends PureComponent {
   render () {
     return (
       <div>
-        <nav className='header-nav -modal'>
+        <nav className='header-nav'>
           <div className='header-nav_left'>
             <Link to='/accounts' className='icon -close'>
               Close
diff --git a/src/Send/Send.js b/src/Send/Send.js
index 2a8899a0..1d8a08f7 100644
--- a/src/Send/Send.js
+++ b/src/Send/Send.js
@@ -49,61 +49,68 @@ class Send extends PureComponent {
 
     return (
       <div>
-        <nav className='header-nav -modal'>
-          <Link to='/tokens' className='icon -close'>
-            x
-          </Link>
-          <p className='header_title'>Sending Ethereum</p>
-          <p>&nbsp;</p>
+        <nav className='header-nav'>
+          <div className='header-nav_left'>
+            <Link to='/tokens' className='icon -close'>
+              x
+            </Link>
+          </div>
+          <div className='header-nav_title'>
+            <h1>Sending Ethereum</h1>
+          </div>
+          <div className='header-nav_right' />
         </nav>
 
-        <div className='window_content -modal'>
-          <div className='box -modal -padded'>
-            <header className='token -header'>
-              <div className='token_icon'>
-                <img src={ethereumIcon} alt='ethereum' />
-              </div>
-              <div className='token_name'>Ethereum</div>
-              <div className='token_balance'>
-                {balance}
-                <span className='token_symbol'>ETH</span>
-              </div>
-            </header>
-
-            <form className='send-form' onSubmit={this.handleSubmit}>
-              <fieldset className='send-form_fields'>
-                <div className='send-form_field'>
-                  <label>Address</label>
-                  <input
-                    onChange={this.handleChangeTo}
-                    required
-                    type='text'
-                    value={to}
-                  />
-                </div>
-                <div className='send-form_field'>
-                  <label>Amount</label>
-                  <input
-                    onChange={this.handleChangeAmount}
-                    required
-                    type='number'
-                    value={amount}
-                  />
+        <div className='window_content'>
+          <div className='box -padded'>
+            <div className='box -card'>
+              <div className='token'>
+                <div className='token_icon'>
+                  <img src={ethereumIcon} alt='ethereum' />
                 </div>
-                <div className='send-form_field'>
-                  <label>Gas</label>
-                  <input
-                    onChange={this.handleChangeGas}
-                    required
-                    type='number'
-                    value={gas}
-                  />
+                <div className='token_name'>Ethereum</div>
+                <div className='token_balance'>
+                  {balance}
+                  <span className='token_symbol'>ETH</span>
                 </div>
-              </fieldset>
-              <div className='send-form_action'>
-                <button className='button'>Send</button>
               </div>
-            </form>
+              <div className='box -card-drawer'>
+                <form className='send-form' onSubmit={this.handleSubmit}>
+                  <fieldset className='form_fields'>
+                    <div className='form_field'>
+                      <label>Address</label>
+                      <input
+                        onChange={this.handleChangeTo}
+                        required
+                        type='text'
+                        value={to}
+                      />
+                    </div>
+                    <div className='form_field'>
+                      <label>Amount</label>
+                      <input
+                        onChange={this.handleChangeAmount}
+                        required
+                        type='number'
+                        value={amount}
+                      />
+                    </div>
+                    <div className='form_field'>
+                      <label>Gas</label>
+                      <input
+                        onChange={this.handleChangeGas}
+                        required
+                        type='number'
+                        value={gas}
+                      />
+                    </div>
+                  </fieldset>
+                  <nav className='form-nav'>
+                    <button className='button'>Send</button>
+                  </nav>
+                </form>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-- 
GitLab


From b09cea10015c1f464e226642986e6e7d708d06ca Mon Sep 17 00:00:00 2001
From: Brian Flanagan <brian@elbow.ie>
Date: Fri, 1 Jun 2018 14:25:12 +0100
Subject: [PATCH 2/7] ibid

---
 src/App/App.css                            | 39 -----------------
 src/App/App.sass                           |  1 -
 src/assets/sass/components/_send-form.scss | 50 ----------------------
 3 files changed, 90 deletions(-)
 delete mode 100644 src/assets/sass/components/_send-form.scss

diff --git a/src/App/App.css b/src/App/App.css
index 8ecd93ed..f0489eda 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -1171,45 +1171,6 @@ a, a:link, a:visited {
       .footer-nav a:visited.icon.-settings {
         background-image: url("../assets/img/icons/gear.svg"); }
 
-.send-form_fields {
-  border-top: 1px solid rgba(221, 221, 221, 0.5); }
-
-.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='text'], .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='text']:focus, .send-form_field input[type='number']:focus {
-      background-color: #fff;
-      border-color: #d7d7d7;
-      box-shadow: 0 0 0; }
-
-.send-form_action {
-  padding-top: 0.5rem;
-  display: flex;
-  justify-content: flex-end; }
-  .send-form_action button {
-    display: block; }
-
 .address {
   font-size: 0.83333rem;
   line-height: 1.3rem;
diff --git a/src/App/App.sass b/src/App/App.sass
index 6e6bbf58..4bd169d0 100644
--- a/src/App/App.sass
+++ b/src/App/App.sass
@@ -26,7 +26,6 @@
 @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'
 @import '../assets/sass/components/progress-indicator'
 @import '../assets/sass/components/form-nav'
diff --git a/src/assets/sass/components/_send-form.scss b/src/assets/sass/components/_send-form.scss
deleted file mode 100644
index ed500996..00000000
--- a/src/assets/sass/components/_send-form.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.send-form {
-}
-
-.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='text'], input[type='number'] {
-    display: block;
-    width: 100%;
-    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 {
-      background-color: $eggshell;
-      border-color: darken($faint,2.5%);
-      box-shadow: 0 0 0;
-    }
-  }
-}
-
-.send-form_action {
-  padding-top: 0.5rem;
-  display: flex;
-  justify-content: flex-end;
-  button {
-    display: block;
-  }
-}
-- 
GitLab


From 53b2566f07646de85319be9086705211a74d005b Mon Sep 17 00:00:00 2001
From: Brian Flanagan <brian@elbow.ie>
Date: Mon, 4 Jun 2018 10:03:02 +0100
Subject: [PATCH 3/7] unstyled slider for gas

---
 .../CreateAccountStep3/CreateAccountStep3.js  |  3 +-
 src/App/App.css                               | 41 ++++++++++++++--
 src/Send/Send.js                              | 27 ++++++----
 src/assets/sass/shared/_form.scss             | 49 ++++++++++++++++++-
 4 files changed, 103 insertions(+), 17 deletions(-)

diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
index 71296efa..26b22a18 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
@@ -44,7 +44,8 @@ class CreateAccountStep3 extends Component {
               </div>
               <div className='form_field'>
                 <label>Recovery phrase</label>
-                <input
+                <textarea
+                  className='-md'
                   onChange={this.handleChange}
                   required
                   value={value}
diff --git a/src/App/App.css b/src/App/App.css
index f0489eda..0c16d9b0 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -852,14 +852,15 @@ a, a:link, a:visited {
 .form_field {
   margin: 0.5rem 0;
   border-radius: 0.25rem;
-  background: rgba(221, 221, 221, 0.25); }
+  background: rgba(221, 221, 221, 0.25);
+  position: relative; }
   .form_field label {
-    font-size: 0.5787rem;
+    font-size: 0.69444rem;
     font-weight: 600;
     color: #222;
     opacity: 0.75;
     padding: 0.5rem 0.5rem 0; }
-  .form_field input {
+  .form_field input[type="text"], .form_field input[type="number"], .form_field input[type="tel"], .form_field input[type="email"], .form_field input[type="password"], .form_field textarea {
     border: 0;
     background: transparent;
     font-size: 1rem;
@@ -870,8 +871,40 @@ a, a:link, a:visited {
     opacity: 0.75;
     padding: 0.5rem;
     margin-top: -0.25rem; }
-    .form_field input:focus {
+    .form_field input[type="text"]:focus, .form_field input[type="number"]:focus, .form_field input[type="tel"]:focus, .form_field input[type="email"]:focus, .form_field input[type="password"]:focus, .form_field textarea:focus {
       opacity: 1; }
+  .form_field textarea {
+    resize: none;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 0.83333rem; }
+    .form_field textarea.-sm {
+      height: 3.5rem; }
+    .form_field textarea.-md {
+      height: 4.75rem; }
+    .form_field textarea.-lg {
+      height: 8rem; }
+
+input.form_field_amount[type='number'] {
+  font-size: 4.29982rem;
+  line-height: 4.7298rem;
+  font-weight: 200;
+  text-align: center;
+  -webkit-appearance: none; }
+  input.form_field_amount[type='number']::-webkit-inner-spin-button, input.form_field_amount[type='number']::-webkit-outer-spin-button {
+    opacity: 1;
+    -webkit-appearance: none; }
+
+span.form_field_symbol {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  color: #888;
+  padding: 0.5rem;
+  text-align: right;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 0.83333rem;
+  text-transform: uppercase; }
 
 .list {
   padding: 0.5rem; }
diff --git a/src/Send/Send.js b/src/Send/Send.js
index 1d8a08f7..8dd0740b 100644
--- a/src/Send/Send.js
+++ b/src/Send/Send.js
@@ -77,32 +77,39 @@ class Send extends PureComponent {
               <div className='box -card-drawer'>
                 <form className='send-form' onSubmit={this.handleSubmit}>
                   <fieldset className='form_fields'>
-                    <div className='form_field'>
-                      <label>Address</label>
-                      <input
-                        onChange={this.handleChangeTo}
-                        required
-                        type='text'
-                        value={to}
-                      />
-                    </div>
                     <div className='form_field'>
                       <label>Amount</label>
                       <input
+                        className='form_field_amount'
                         onChange={this.handleChangeAmount}
                         required
                         type='number'
                         value={amount}
                       />
+                      <span className='form_field_symbol'>ETH</span>
+                    </div>
+                    <div className='form_field'>
+                      <label>To</label>
+                      <textarea
+                        className='-sm'
+                        onChange={this.handleChangeTo}
+                        required
+                        type='text'
+                        placeholder='Recipient address'
+                        value={to}
+                      />
                     </div>
                     <div className='form_field'>
                       <label>Gas</label>
                       <input
                         onChange={this.handleChangeGas}
                         required
-                        type='number'
+                        min='1'
+                        max='44000'
+                        type='range'
                         value={gas}
                       />
+                      <span className='form_field_gas'>{gas}</span>
                     </div>
                   </fieldset>
                   <nav className='form-nav'>
diff --git a/src/assets/sass/shared/_form.scss b/src/assets/sass/shared/_form.scss
index 15e62df6..1f3c80d2 100644
--- a/src/assets/sass/shared/_form.scss
+++ b/src/assets/sass/shared/_form.scss
@@ -2,16 +2,17 @@
   margin: 0.5rem 0;
   border-radius: 0.25rem;
   background: rgba($faint,0.25);
+  position: relative;
 
   label {
-    font-size: ms(-3);
+    font-size: ms(-2);
     font-weight: 600;
     color: $black;
     opacity: 0.75;
     padding: 0.5rem 0.5rem 0;
   }
 
-  input {
+  input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], textarea {
     border: 0;
     background: transparent;
     font-size: ms(0);
@@ -26,4 +27,48 @@
       opacity: 1;
     }
   }
+
+  textarea {
+    resize: none;
+    font-family: $mono;
+    font-size: ms(-1);
+
+    &.-sm {
+      height: 3.5rem;
+    }
+
+    &.-md {
+      height: 4.75rem;
+    }
+
+    &.-lg {
+      height: 8rem;
+    }
+  }
+}
+
+input.form_field_amount[type='number'] {
+  font-size: ms(8);
+  line-height: ms(8) * 1.1;
+  font-weight: 200;
+  text-align: center;
+  -webkit-appearance: none;
+
+  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+    opacity: 1;
+    -webkit-appearance: none;
+  }
+}
+
+span.form_field_symbol {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  color: $grey;
+  padding: 0.5rem;
+  text-align: right;
+  font-family: $mono;
+  font-size: ms(-1);
+  text-transform: uppercase;
 }
-- 
GitLab


From 4c6c35011809c38b85cfe26b967810387fa6f780 Mon Sep 17 00:00:00 2001
From: Brian Flanagan <brian@elbow.ie>
Date: Mon, 4 Jun 2018 15:22:41 +0100
Subject: [PATCH 4/7] range display and labels

---
 .../AccountConfirm/AccountConfirm.js          |  3 -
 .../CreateAccount/AccountName/AccountName.js  |  1 +
 .../AccountWritePhrase/AccountWritePhrase.js  |  2 +-
 src/App/App.css                               | 74 ++++++++++++++++---
 src/Send/Send.js                              | 12 ++-
 src/assets/sass/components/_account.scss      |  4 +-
 src/assets/sass/shared/_button.scss           | 18 +++++
 src/assets/sass/shared/_form.scss             | 71 +++++++++++++++---
 8 files changed, 155 insertions(+), 30 deletions(-)

diff --git a/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js
index 5695c32b..536eb914 100644
--- a/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js
+++ b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js
@@ -28,9 +28,6 @@ class AccountConfirm extends Component {
               <div className='text'>
                 <p>Ready to create account?</p>
               </div>
-              <div className='text -code'>
-                {hint}
-              </div>
               <nav className='form-nav'>
                 <button onClick={this.handleSubmit} className='button'>
                   Next
diff --git a/src/Accounts/CreateAccount/AccountName/AccountName.js b/src/Accounts/CreateAccount/AccountName/AccountName.js
index 6be8ee8c..5d9171a9 100644
--- a/src/Accounts/CreateAccount/AccountName/AccountName.js
+++ b/src/Accounts/CreateAccount/AccountName/AccountName.js
@@ -45,6 +45,7 @@ class AccountName extends Component {
                 <div className='form_field'>
                   <label>Name</label>
                   <input
+                    type='text'
                     onChange={this.handleChangeName}
                     required
                     placeholder='Enter a name for this account'
diff --git a/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js b/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
index 8c770b8f..d0596aac 100644
--- a/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
+++ b/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
@@ -45,7 +45,7 @@ class AccountWritePhrase extends Component {
               </div>
               <div className='form_field'>
                 <label>Recovery phrase</label>
-                <input onChange={this.handleChange} required value={value} />
+                <textarea onChange={this.handleChange} required value={value} />
               </div>
 
               <nav className='form-nav'>
diff --git a/src/App/App.css b/src/App/App.css
index 3e972e4d..c3d3814e 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -851,6 +851,18 @@ a, a:link, a:visited {
       background-color: transparent; }
     .button.-tiny.-reload {
       background-image: url("../assets/img/icons/reload.svg"); }
+  .button.-utility {
+    font-size: 0.5787rem;
+    border-width: 0;
+    background-color: #ddd;
+    color: rgba(34, 34, 34, 0.75);
+    padding: 0.175rem 0.325rem 0.125rem;
+    opacity: 0.8;
+    border-radius: 1rem; }
+    .button.-utility:hover {
+      opacity: 0.9; }
+    .button.-utility:active {
+      opacity: 1.0; }
   .button.-footer {
     font-size: 0.69444rem;
     border-width: 0;
@@ -874,7 +886,8 @@ a, a:link, a:visited {
     font-weight: 600;
     color: #222;
     opacity: 0.75;
-    padding: 0.5rem 0.5rem 0; }
+    padding: 0.5rem 0.5rem 0;
+    display: block; }
   .form_field input[type="text"], .form_field input[type="number"], .form_field input[type="tel"], .form_field input[type="email"], .form_field input[type="password"], .form_field textarea {
     border: 0;
     background: transparent;
@@ -888,6 +901,27 @@ a, a:link, a:visited {
     margin-top: -0.25rem; }
     .form_field input[type="text"]:focus, .form_field input[type="number"]:focus, .form_field input[type="tel"]:focus, .form_field input[type="email"]:focus, .form_field input[type="password"]:focus, .form_field textarea:focus {
       opacity: 1; }
+  .form_field input[type="range"] {
+    -webkit-appearance: none;
+    width: calc(100% - 1rem);
+    height: 0.5rem;
+    border-radius: 0.5rem;
+    background: rgba(221, 221, 221, 0.5);
+    outline: none;
+    padding: 0;
+    margin: 0.5rem; }
+    .form_field input[type="range"]::-webkit-slider-thumb {
+      appearance: none;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      background: #888;
+      cursor: pointer;
+      transition: background .15s ease; }
+      .form_field input[type="range"]::-webkit-slider-thumb:hover {
+        background: #222; }
+    .form_field input[type="range"]:active::-webkit-slider-thumb {
+      background-color: #160DF6; }
   .form_field textarea {
     resize: none;
     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@@ -909,17 +943,31 @@ input.form_field_amount[type='number'] {
     opacity: 1;
     -webkit-appearance: none; }
 
-span.form_field_symbol {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  color: #888;
-  padding: 0.5rem;
-  text-align: right;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 0.83333rem;
+nav.form-field_nav {
+  padding: 0 0.5rem 0.5rem;
+  display: flex;
+  justify-content: flex-end; }
+  nav.form-field_nav button {
+    margin-left: 0.5rem; }
+
+nav.range-nav {
+  width: 100%;
+  padding: 0 0.5rem 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.69444rem;
+  font-weight: 600;
   text-transform: uppercase; }
+  nav.range-nav .range-nav_label {
+    width: 4rem;
+    color: #888; }
+    nav.range-nav .range-nav_label:last-child {
+      text-align: right; }
+  nav.range-nav .range-nav_value {
+    display: block;
+    width: 8rem;
+    text-align: center;
+    color: #222; }
 
 .list {
   padding: 0.5rem; }
@@ -1069,10 +1117,12 @@ span.form_field_symbol {
     align-content: center; }
     .account .account_avatar canvas {
       display: block;
-      height: 1.3rem !important;
+      width: 2.3rem !important;
+      height: 2.3rem !important;
       width: auto !important; }
   .account .account_information {
     padding-left: 0.325rem;
+    overflow: hidden;
     flex-grow: 1; }
   .account .account_name {
     color: #222;
diff --git a/src/Send/Send.js b/src/Send/Send.js
index 8dd0740b..a65a2111 100644
--- a/src/Send/Send.js
+++ b/src/Send/Send.js
@@ -86,7 +86,9 @@ class Send extends PureComponent {
                         type='number'
                         value={amount}
                       />
-                      <span className='form_field_symbol'>ETH</span>
+                      <nav className='form-field_nav'>
+                        <button className='button -utility'>Max</button>
+                      </nav>
                     </div>
                     <div className='form_field'>
                       <label>To</label>
@@ -99,7 +101,7 @@ class Send extends PureComponent {
                         value={to}
                       />
                     </div>
-                    <div className='form_field'>
+                    <div className='form_field -range'>
                       <label>Gas</label>
                       <input
                         onChange={this.handleChangeGas}
@@ -109,7 +111,11 @@ class Send extends PureComponent {
                         type='range'
                         value={gas}
                       />
-                      <span className='form_field_gas'>{gas}</span>
+                      <nav className='range-nav'>
+                        <span className='range-nav_label'>Cheap</span>
+                        <span className='range-nav_value'>{gas}</span>
+                        <span className='range-nav_label'>Fast</span>
+                      </nav>
                     </div>
                   </fieldset>
                   <nav className='form-nav'>
diff --git a/src/assets/sass/components/_account.scss b/src/assets/sass/components/_account.scss
index d3c5d310..32c2c5a3 100644
--- a/src/assets/sass/components/_account.scss
+++ b/src/assets/sass/components/_account.scss
@@ -13,13 +13,15 @@
 
     canvas {
       display: block;
-      height: (ms(0) * 1.3) !important;
+      width: (ms(0) * 1.3) + 1rem  !important;
+      height: (ms(0) * 1.3) + 1rem  !important;
       width: auto !important;
     }
   }
 
   .account_information {
     padding-left: 0.325rem;
+    overflow: hidden;
     flex-grow: 1;
   }
 
diff --git a/src/assets/sass/shared/_button.scss b/src/assets/sass/shared/_button.scss
index 70753e32..2d4cfaa9 100644
--- a/src/assets/sass/shared/_button.scss
+++ b/src/assets/sass/shared/_button.scss
@@ -47,6 +47,24 @@
     }
   }
 
+  &.-utility {
+    font-size: ms(-3);
+    border-width: 0;
+    background-color: $faint;
+    color: rgba($black,0.75);
+    padding: 0.175rem 0.325rem 0.125rem;
+    opacity: 0.8;
+    border-radius: 1rem;
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &:active {
+      opacity: 1.0;
+    }
+  }
+
   &.-footer {
     font-size: ms(-2);
     border-width: 0;
diff --git a/src/assets/sass/shared/_form.scss b/src/assets/sass/shared/_form.scss
index 1f3c80d2..4fc245a4 100644
--- a/src/assets/sass/shared/_form.scss
+++ b/src/assets/sass/shared/_form.scss
@@ -10,6 +10,7 @@
     color: $black;
     opacity: 0.75;
     padding: 0.5rem 0.5rem 0;
+    display: block
   }
 
   input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], textarea {
@@ -28,6 +29,35 @@
     }
   }
 
+  input[type="range"] {
+    -webkit-appearance: none;
+    width: calc(100% - 1rem);
+    height: 0.5rem;
+    border-radius: 0.5rem;
+    background: rgba($faint,0.5);
+    outline: none;
+    padding: 0;
+    margin: 0.5rem;
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      background: $grey;
+      cursor: pointer;
+      transition: background .15s ease;
+
+      &:hover {
+        background: $black;
+      }
+    }
+
+    &:active::-webkit-slider-thumb {
+      background-color: $blue;
+    }
+  }
+
   textarea {
     resize: none;
     font-family: $mono;
@@ -60,15 +90,36 @@ input.form_field_amount[type='number'] {
   }
 }
 
-span.form_field_symbol {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: block;
-  color: $grey;
-  padding: 0.5rem;
-  text-align: right;
-  font-family: $mono;
-  font-size: ms(-1);
+nav.form-field_nav {
+  padding: 0 0.5rem 0.5rem;
+  display: flex;
+  justify-content: flex-end;
+  button {
+    margin-left: 0.5rem;
+  }
+}
+
+nav.range-nav {
+  width: 100%;
+  padding: 0 0.5rem 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  font-size: ms(-2);
+  font-weight: 600;
   text-transform: uppercase;
+
+  .range-nav_label {
+    width: 4rem;
+    color: $grey;
+    &:last-child {
+      text-align: right;
+    }
+  }
+
+  .range-nav_value {
+    display: block;
+    width: 8rem;
+    text-align: center;
+    color: $black
+  }
 }
-- 
GitLab


From fbfee456a4ab642445e831d75e6b8734c00d8d04 Mon Sep 17 00:00:00 2001
From: Brian Flanagan <brian@elbow.ie>
Date: Mon, 4 Jun 2018 15:23:31 +0100
Subject: [PATCH 5/7] ibid

---
 src/App/App.css                   | 3 ++-
 src/assets/sass/shared/_form.scss | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App/App.css b/src/App/App.css
index c3d3814e..d22830bf 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -960,7 +960,8 @@ nav.range-nav {
   text-transform: uppercase; }
   nav.range-nav .range-nav_label {
     width: 4rem;
-    color: #888; }
+    color: #888;
+    font-size: 0.5787rem; }
     nav.range-nav .range-nav_label:last-child {
       text-align: right; }
   nav.range-nav .range-nav_value {
diff --git a/src/assets/sass/shared/_form.scss b/src/assets/sass/shared/_form.scss
index 4fc245a4..4725a58e 100644
--- a/src/assets/sass/shared/_form.scss
+++ b/src/assets/sass/shared/_form.scss
@@ -111,6 +111,7 @@ nav.range-nav {
   .range-nav_label {
     width: 4rem;
     color: $grey;
+    font-size: ms(-3);
     &:last-child {
       text-align: right;
     }
-- 
GitLab


From cf9b33ae8f97a767343c68e773c6b0588572b992 Mon Sep 17 00:00:00 2001
From: Brian Flanagan <brian@elbow.ie>
Date: Mon, 4 Jun 2018 18:20:36 +0100
Subject: [PATCH 6/7] tweaks across account/send screens

---
 src/Accounts/Accounts.js                      | 23 ++---
 .../AccountConfirm/AccountConfirm.js          | 24 +++---
 .../AccountCopyPhrase/AccountCopyPhrase.js    | 30 +++----
 .../CreateAccount/AccountName/AccountName.js  |  6 +-
 .../AccountPassword/AccountPassword.js        | 86 +++++++++----------
 .../AccountWritePhrase/AccountWritePhrase.js  | 30 +++----
 src/Accounts/CreateAccount/CreateAccount.js   | 32 ++++++-
 src/App/App.css                               | 36 ++++----
 src/App/App.sass                              |  1 -
 src/Receive/Receive.js                        | 54 +++++++++---
 src/Tokens/Tokens.js                          |  4 +-
 src/assets/sass/components/_address.scss      | 10 ---
 src/assets/sass/components/_footer-nav.scss   | 11 ++-
 src/assets/sass/components/_header-nav.scss   |  6 +-
 src/assets/sass/shared/_text.scss             |  1 +
 15 files changed, 196 insertions(+), 158 deletions(-)
 delete mode 100644 src/assets/sass/components/_address.scss

diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js
index 1b8b1326..0f27b380 100644
--- a/src/Accounts/Accounts.js
+++ b/src/Accounts/Accounts.js
@@ -7,8 +7,9 @@ import React, { Component } from 'react';
 import { accountsInfo$ } from '@parity/light.js';
 import Blockies from 'react-blockies';
 import { inject, observer } from 'mobx-react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Redirect, Route, Switch, Link } from 'react-router-dom';
 
+import Health from '../Health';
 import CreateAccount from './CreateAccount/CreateAccount';
 import light from '../hoc';
 
@@ -31,11 +32,6 @@ class Accounts extends Component {
     this.props.history.push('/accounts/new');
   };
 
-  handleImportAccount = () => {
-    this.props.createAccountStore.setIsImporting(true);
-    this.props.history.push('/accounts/new');
-  };
-
   render () {
     return (
       <Switch>
@@ -57,7 +53,11 @@ class Accounts extends Component {
           <div className='header-nav_title'>
             <h1>Accounts</h1>
           </div>
-          <div className='header-nav_right' />
+          <div className='header-nav_right'>
+            <a className='icon -new' onClick={this.handleCreateAccount}>
+              New account
+            </a>
+          </div>
         </nav>
 
         <div className='window_content'>
@@ -93,13 +93,8 @@ class Accounts extends Component {
         </div>
 
         <nav className='footer-nav'>
-          <div className='footer-nav_buttons'>
-            <button className='button -footer' onClick={this.handleCreateAccount}>
-              New account
-            </button>
-            <button className='button -footer' onClick={this.handleImportAccount}>
-              Import account
-            </button>
+          <div className='footer-nav_status'>
+            <Health />
           </div>
         </nav>
       </div>
diff --git a/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js
index 536eb914..351ad2ff 100644
--- a/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js
+++ b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js
@@ -20,20 +20,18 @@ class AccountConfirm extends Component {
     const { createAccountStore: { hint } } = this.props;
 
     return (
-      <div className='window_content'>
-        <div className='box -padded'>
-          <div className='box -card'>
-            <CreateAccountHeader />
-            <div className='box -card-drawer'>
-              <div className='text'>
-                <p>Ready to create account?</p>
-              </div>
-              <nav className='form-nav'>
-                <button onClick={this.handleSubmit} className='button'>
-                  Next
-                </button>
-              </nav>
+      <div className='box -padded'>
+        <div className='box -card'>
+          <CreateAccountHeader />
+          <div className='box -card-drawer'>
+            <div className='text'>
+              <p>Ready to create account?</p>
             </div>
+            <nav className='form-nav'>
+              <button onClick={this.handleSubmit} className='button'>
+                Next
+              </button>
+            </nav>
           </div>
         </div>
       </div>
diff --git a/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js b/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js
index 646977fa..22401a5c 100644
--- a/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js
+++ b/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js
@@ -20,23 +20,21 @@ class AccountCopyPhrase extends Component {
     const currentStep = pathname.slice(-1);
 
     return (
-      <div className='window_content'>
-        <div className='box -padded'>
-          <div className='box -card'>
-            <CreateAccountHeader />
-            <div className='box -card-drawer'>
-              <div className='text'>
-                <p>Please write your secret phrase on a piece of paper:</p>
-              </div>
-              <div className='text -code'>
-                {phrase}
-              </div>
-              <nav className='form-nav'>
-                <Link to={`/accounts/new/${+currentStep + 1}`}>
-                  <button className='button'>Next</button>
-                </Link>
-              </nav>
+      <div className='box -padded'>
+        <div className='box -card'>
+          <CreateAccountHeader />
+          <div className='box -card-drawer'>
+            <div className='text'>
+              <p>Please write your secret phrase on a piece of paper:</p>
             </div>
+            <div className='text -code'>
+              {phrase}
+            </div>
+            <nav className='form-nav'>
+              <Link to={`/accounts/new/${+currentStep + 1}`}>
+                <button className='button'>Next</button>
+              </Link>
+            </nav>
           </div>
         </div>
       </div>
diff --git a/src/Accounts/CreateAccount/AccountName/AccountName.js b/src/Accounts/CreateAccount/AccountName/AccountName.js
index 5d9171a9..6d9b7fde 100644
--- a/src/Accounts/CreateAccount/AccountName/AccountName.js
+++ b/src/Accounts/CreateAccount/AccountName/AccountName.js
@@ -27,7 +27,7 @@ class AccountName extends Component {
     const currentStep = pathname.slice(-1);
 
     return (
-      <div className='window_content'>
+      <div>
         {address &&
           <div className='box -padded'>
             <div className='box -card'>
@@ -42,13 +42,15 @@ class AccountName extends Component {
                       Regenerate address
                     </button>
                   </div>}
+                <div className='text'>
+                  <p>Please give this account a name:</p>
+                </div>
                 <div className='form_field'>
                   <label>Name</label>
                   <input
                     type='text'
                     onChange={this.handleChangeName}
                     required
-                    placeholder='Enter a name for this account'
                     value={name}
                   />
                 </div>
diff --git a/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js b/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
index 3afd0d81..836d4a42 100644
--- a/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
+++ b/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
@@ -43,54 +43,52 @@ class AccountPassword extends Component {
     const { confirm, hint, password } = this.state;
 
     return (
-      <div className='window_content'>
-        <div className='box -padded'>
-          <div className='box -card'>
-            <CreateAccountHeader />
-            <div className='box -card-drawer'>
-              <form onSubmit={this.handleSubmit}>
-                <div className='text'>
-                  <p>Secure your account with a password:</p>
-                </div>
+      <div className='box -padded'>
+        <div className='box -card'>
+          <CreateAccountHeader />
+          <div className='box -card-drawer'>
+            <form onSubmit={this.handleSubmit}>
+              <div className='text'>
+                <p>Secure your account with a password:</p>
+              </div>
 
-                <div className='form_field'>
-                  <label>Password </label>
-                  <input
-                    onChange={this.handlePasswordChange}
-                    required
-                    type='password'
-                    value={password}
-                  />
-                </div>
+              <div className='form_field'>
+                <label>Password </label>
+                <input
+                  onChange={this.handlePasswordChange}
+                  required
+                  type='password'
+                  value={password}
+                />
+              </div>
 
-                <div className='form_field'>
-                  <label>Confirm </label>
-                  <input
-                    onChange={this.handleConfirmChange}
-                    required
-                    type='password'
-                    value={confirm}
-                  />
-                </div>
+              <div className='form_field'>
+                <label>Confirm </label>
+                <input
+                  onChange={this.handleConfirmChange}
+                  required
+                  type='password'
+                  value={confirm}
+                />
+              </div>
 
-                <div className='form_field'>
-                  <label>Password Hint (optional) </label>
-                  <input
-                    onChange={this.handleHintChange}
-                    type='text'
-                    value={hint}
-                  />
-                </div>
+              <div className='form_field'>
+                <label>Password Hint (optional) </label>
+                <input
+                  onChange={this.handleHintChange}
+                  type='text'
+                  value={hint}
+                />
+              </div>
 
-                <nav className='form-nav'>
-                  {password && confirm === password
-                    ? <button className='button'>Next</button>
-                    : <button className='button' disabled>
-                        Next
-                    </button>}
-                </nav>
-              </form>
-            </div>
+              <nav className='form-nav'>
+                {password && confirm === password
+                  ? <button className='button'>Next</button>
+                  : <button className='button' disabled>
+                      Next
+                  </button>}
+              </nav>
+            </form>
           </div>
         </div>
       </div>
diff --git a/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js b/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
index d0596aac..bffd03e5 100644
--- a/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
+++ b/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
@@ -35,23 +35,21 @@ class AccountWritePhrase extends Component {
     const { value } = this.state;
 
     return (
-      <div className='window_content'>
-        <div className='box -padded'>
-          <div className='box -card'>
-            {isImport ? <AccountPlaceholder /> : <CreateAccountHeader />}
-            <div className='box -card-drawer'>
-              <div className='text'>
-                <p>Please write your recovery phrase here:</p>
-              </div>
-              <div className='form_field'>
-                <label>Recovery phrase</label>
-                <textarea onChange={this.handleChange} required value={value} />
-              </div>
-
-              <nav className='form-nav'>
-                {this.renderButton()}
-              </nav>
+      <div className='box -padded'>
+        <div className='box -card'>
+          {isImport ? <AccountPlaceholder /> : <CreateAccountHeader />}
+          <div className='box -card-drawer'>
+            <div className='text'>
+              <p>Please write your recovery phrase:</p>
+            </div>
+            <div className='form_field'>
+              <label>Recovery phrase</label>
+              <textarea onChange={this.handleChange} required value={value} />
             </div>
+
+            <nav className='form-nav'>
+              {this.renderButton()}
+            </nav>
           </div>
         </div>
       </div>
diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js
index 547c7708..19771f43 100644
--- a/src/Accounts/CreateAccount/CreateAccount.js
+++ b/src/Accounts/CreateAccount/CreateAccount.js
@@ -33,6 +33,16 @@ class CreateAccount extends Component {
       ];
   });
 
+  handleImportAccount = () => {
+    this.props.createAccountStore.setIsImporting(true);
+    this.props.history.push('/accounts/new');
+  };
+
+  handleCreateAccount = () => {
+    this.props.createAccountStore.setIsImporting(false);
+    this.props.history.push('/accounts/new');
+  };
+
   render () {
     const {
       createAccountStore: { isImport },
@@ -70,7 +80,7 @@ class CreateAccount extends Component {
           </div>
         </nav>
 
-        <div className='window_content -modal'>
+        <div className='window_content'>
           {Steps.map((StepComponent, index) =>
             <Route
               component={StepComponent}
@@ -79,6 +89,26 @@ class CreateAccount extends Component {
             />
           )}
         </div>
+
+        <nav className='footer-nav'>
+          <div className='footer-nav_option'>
+            { isImport ?
+              <p>
+                Need to create an account?
+                <button className='button -footer' onClick={this.handleCreateAccount}>
+                  New account
+                </button>
+              </p>
+            :
+              <p>
+                Already have an account?
+                <button className='button -footer' onClick={this.handleImportAccount}>
+                  Import account
+                </button>
+              </p>
+            }
+          </div>
+        </nav>
       </div>
     );
   }
diff --git a/src/App/App.css b/src/App/App.css
index d22830bf..b37fda16 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -1005,7 +1005,8 @@ nav.range-nav {
   color: #222;
   margin: 0.5rem 0;
   font-size: 0.83333rem;
-  border-radius: 0.25rem; }
+  border-radius: 0.25rem;
+  word-wrap: break-word; }
 
 .span.-placeholder {
   color: #ddd; }
@@ -1187,9 +1188,13 @@ nav.range-nav {
     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 {
+      margin: -0.175rem 0 -0.175rem;
+      padding: 0.25rem 0.5rem 0.175rem;
+      display: inline-block;
+      font-size: 1rem;
+      line-height: 1.3rem;
       color: rgba(34, 34, 34, 0.675);
-      font-weight: 500;
-      display: inline-block; }
+      font-weight: 500; }
   .header-nav a,
   .header-nav a:link,
   .header-nav a:visited {
@@ -1249,13 +1254,16 @@ nav.range-nav {
     color: #888; }
   .footer-nav .footer-nav_icons {
     padding: 1rem; }
-  .footer-nav .footer-nav_buttons {
+  .footer-nav .footer-nav_option {
+    padding: 1rem;
     width: 100%;
-    padding: 0.5rem;
-    display: flex;
-    justify-content: center; }
-    .footer-nav .footer-nav_buttons button {
-      margin-left: 0.5rem; }
+    text-align: center;
+    font-size: 0.83333rem;
+    color: #888; }
+    .footer-nav .footer-nav_option button {
+      margin-left: 0.5rem;
+      display: inline-block;
+      padding: 0.125rem 0.5rem; }
   .footer-nav a,
   .footer-nav a:link,
   .footer-nav a:visited {
@@ -1291,16 +1299,6 @@ nav.range-nav {
       .footer-nav a:visited.icon.-settings {
         background-image: url("../assets/img/icons/gear.svg"); }
 
-.address {
-  font-size: 0.83333rem;
-  line-height: 1.3rem;
-  border-width: 1px 0;
-  border-style: solid;
-  border-color: #ddd;
-  background: rgba(221, 221, 221, 0.25);
-  word-wrap: break-word;
-  padding: 0.5rem; }
-
 .progress-indicator {
   display: flex;
   width: 2.5rem;
diff --git a/src/App/App.sass b/src/App/App.sass
index 4bd169d0..fce8707a 100644
--- a/src/App/App.sass
+++ b/src/App/App.sass
@@ -26,7 +26,6 @@
 @import '../assets/sass/components/status'
 @import '../assets/sass/components/header-nav'
 @import '../assets/sass/components/footer-nav'
-@import '../assets/sass/components/address'
 @import '../assets/sass/components/progress-indicator'
 @import '../assets/sass/components/form-nav'
 
diff --git a/src/Receive/Receive.js b/src/Receive/Receive.js
index 2c68e80f..fc0b6504 100644
--- a/src/Receive/Receive.js
+++ b/src/Receive/Receive.js
@@ -4,40 +4,66 @@
 // SPDX-License-Identifier: MIT
 
 import React, { PureComponent } from 'react';
-import { defaultAccount$ } from '@parity/light.js';
+import { accountsInfo$, defaultAccount$ } from '@parity/light.js';
+import Blockie from 'react-blockies';
 import { Link } from 'react-router-dom';
 
 import light from '../hoc';
 
 @light({
-  me: defaultAccount$
+  accountsInfo: accountsInfo$,
+  defaultAccount: defaultAccount$
 })
 class Receive extends PureComponent {
   render () {
-    const { me } = this.props;
+    const { accountsInfo, defaultAccount } = this.props;
     return (
       <div>
-        <nav className='header-nav -modal'>
+        <nav className='header-nav'>
           <div className='header-nav_left'>
             <Link to='/tokens' className='icon -close'>
               Close
             </Link>
           </div>
           <div className='header-nav_title'>
-            <h1>Address</h1>
-          </div>
-          <div className='header-nav_right'>
-            &nbsp;
+            <h1>
+              {accountsInfo && defaultAccount && accountsInfo[defaultAccount]
+                ? accountsInfo[defaultAccount].name
+                : 'Loading...'}
+            </h1>
           </div>
+          <div className='header-nav_right' />
         </nav>
         <div className='window_content'>
-          <div className='box -padded address'>
-            <code>
-              {me}
-            </code>
-          </div>
           <div className='box -padded'>
-            <button className='-small'>Copy to clipboard</button>
+            <div className='box -card'>
+              <div className='account'>
+                <div className='account_avatar'>
+                  <Blockie seed={defaultAccount} />
+                </div>
+                <div className='account_information'>
+                  <div className='account_name'>
+                    {accountsInfo && defaultAccount && accountsInfo[defaultAccount]
+                      ? accountsInfo[defaultAccount].name
+                      : 'Loading...'}
+                  </div>
+                  <div className='account_address'>
+                    {defaultAccount}
+                  </div>
+                </div>
+              </div>
+              <div className='box -card-drawer'>
+                <div className='text'>
+                  <p>Your address is:</p>
+                </div>
+                <div className='text -code'>
+                  {defaultAccount}
+                </div>
+                <div className='box text -right'>
+                  <button className='button -tiny -copy'>Copy address to clipboard</button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js
index 78623408..5b07fb1e 100644
--- a/src/Tokens/Tokens.js
+++ b/src/Tokens/Tokens.js
@@ -35,9 +35,7 @@ class Tokens extends PureComponent {
                 : 'Loading...'}
             </Link>
           </div>
-          <div className='header-nav_right'>
-            &nbsp;
-          </div>
+          <div className='header-nav_right' />
         </nav>
 
         <Switch>
diff --git a/src/assets/sass/components/_address.scss b/src/assets/sass/components/_address.scss
deleted file mode 100644
index 22d06c90..00000000
--- a/src/assets/sass/components/_address.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.address {
-  font-size: ms(-1);
-  line-height: ms(0) * 1.3;
-  border-width: 1px 0;
-  border-style: solid;
-  border-color: $faint;
-  background: rgba($faint,0.25);
-  word-wrap: break-word;
-  padding: 0.5rem;
-}
diff --git a/src/assets/sass/components/_footer-nav.scss b/src/assets/sass/components/_footer-nav.scss
index 59429b7d..676146af 100644
--- a/src/assets/sass/components/_footer-nav.scss
+++ b/src/assets/sass/components/_footer-nav.scss
@@ -12,14 +12,17 @@
     padding: 1rem;
   }
 
-  .footer-nav_buttons {
+  .footer-nav_option {
+    padding: 1rem;
     width: 100%;
-    padding: 0.5rem;
-    display: flex;
-    justify-content: center;
+    text-align: center;
+    font-size: ms(-1);
+    color: $grey;
 
     button {
       margin-left: 0.5rem;
+      display: inline-block;
+      padding: 0.125rem 0.5rem;
     }
   }
 
diff --git a/src/assets/sass/components/_header-nav.scss b/src/assets/sass/components/_header-nav.scss
index 8a15ef8e..f9a013ad 100644
--- a/src/assets/sass/components/_header-nav.scss
+++ b/src/assets/sass/components/_header-nav.scss
@@ -24,9 +24,13 @@
     text-align: center;
 
     a, a:link, a:visited, h1 {
+      margin: -0.175rem 0 -0.175rem;
+      padding: 0.25rem 0.5rem 0.175rem;
+      display: inline-block;
+      font-size: ms(0);
+      line-height: ms(0) * 1.3;
       color: rgba($black, 0.675);
       font-weight: 500;
-      display: inline-block;
     }
   }
 
diff --git a/src/assets/sass/shared/_text.scss b/src/assets/sass/shared/_text.scss
index 8d9b902b..a39b6915 100644
--- a/src/assets/sass/shared/_text.scss
+++ b/src/assets/sass/shared/_text.scss
@@ -35,6 +35,7 @@
     margin: 0.5rem 0;
     font-size: ms(-1);
     border-radius: 0.25rem;
+    word-wrap: break-word;
   }
 }
 
-- 
GitLab


From 5b8b3d1562f4717618acc857c34723cf7b72137a Mon Sep 17 00:00:00 2001
From: Brian Flanagan <brian@elbow.ie>
Date: Mon, 4 Jun 2018 19:20:58 +0100
Subject: [PATCH 7/7] fix lint problems

---
 src/Accounts/Accounts.js                                   | 2 +-
 .../CreateAccount/AccountConfirm/AccountConfirm.js         | 2 --
 src/Accounts/CreateAccount/CreateAccount.js                | 7 +++----
 src/Receive/Receive.js                                     | 2 +-
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js
index 0f27b380..6decf0d6 100644
--- a/src/Accounts/Accounts.js
+++ b/src/Accounts/Accounts.js
@@ -7,7 +7,7 @@ import React, { Component } from 'react';
 import { accountsInfo$ } from '@parity/light.js';
 import Blockies from 'react-blockies';
 import { inject, observer } from 'mobx-react';
-import { Redirect, Route, Switch, Link } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 
 import Health from '../Health';
 import CreateAccount from './CreateAccount/CreateAccount';
diff --git a/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js
index 351ad2ff..cb5f350f 100644
--- a/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js
+++ b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js
@@ -17,8 +17,6 @@ class AccountConfirm extends Component {
   };
 
   render () {
-    const { createAccountStore: { hint } } = this.props;
-
     return (
       <div className='box -padded'>
         <div className='box -card'>
diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js
index 19771f43..88e4d835 100644
--- a/src/Accounts/CreateAccount/CreateAccount.js
+++ b/src/Accounts/CreateAccount/CreateAccount.js
@@ -92,15 +92,14 @@ class CreateAccount extends Component {
 
         <nav className='footer-nav'>
           <div className='footer-nav_option'>
-            { isImport ?
-              <p>
+            { isImport
+              ? <p>
                 Need to create an account?
                 <button className='button -footer' onClick={this.handleCreateAccount}>
                   New account
                 </button>
               </p>
-            :
-              <p>
+              : <p>
                 Already have an account?
                 <button className='button -footer' onClick={this.handleImportAccount}>
                   Import account
diff --git a/src/Receive/Receive.js b/src/Receive/Receive.js
index fc0b6504..9d1c2f39 100644
--- a/src/Receive/Receive.js
+++ b/src/Receive/Receive.js
@@ -60,7 +60,7 @@ class Receive extends PureComponent {
                   {defaultAccount}
                 </div>
                 <div className='box text -right'>
-                  <button className='button -tiny -copy'>Copy address to clipboard</button>
+                  <button className='button -utility'>Copy address to clipboard</button>
                 </div>
               </div>
             </div>
-- 
GitLab