Update styling for buttons, font weights

ui/app/components/modals/account-details-modal.js

@@ -62,12 +62,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('button.btn-clear', {
+      h('button.btn-clear.account-modal__button', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, 'View account on Etherscan'),
 
       // Holding on redesign for Export Private Key functionality
-      h('button.btn-clear', {
+      h('button.btn-clear.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
       }, 'Export private key'),
 

ui/app/components/modals/export-private-key-modal.js

@@ -79,11 +79,15 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
 
 ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
   return h('div.export-private-key-buttons', {}, [
-    !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'),
+    !privateKey && this.renderButton(
+      'btn-cancel export-private-key__button export-private-key__button--cancel',
+      () => hideModal(),
+      'Cancel'
+    ),
 
     (privateKey
-      ? this.renderButton('btn-clear', () => hideModal(), 'Done')
+      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done')
-      : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show')
+      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm')
     ),
 
   ])

ui/app/components/pending-tx/confirm-send-ether.js

@@ -219,7 +219,7 @@ ConfirmSendEther.prototype.render = function () {
       // Main Send token Card
       h('div.confirm-screen-wrapper.flex-column.flex-grow', [
         h('h3.flex-center.confirm-screen-header', [
-          h('button.confirm-screen-back-button', {
+          h('button.btn-clear.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
           }, 'EDIT'),
           h('div.confirm-screen-title', 'Confirm Transaction'),
@@ -422,7 +422,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
 ConfirmSendEther.prototype.cancel = function (event, txMeta) {
   event.preventDefault()
   const { cancelTransaction } = this.props
-  
+
   cancelTransaction(txMeta)
 }
 

ui/app/components/pending-tx/confirm-send-token.js

@@ -314,7 +314,7 @@ ConfirmSendToken.prototype.render = function () {
       // Main Send token Card
       h('div.confirm-screen-wrapper.flex-column.flex-grow', [
         h('h3.flex-center.confirm-screen-header', [
-          h('button.confirm-screen-back-button', {
+          h('button.btn-clear.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
           }, 'EDIT'),
           h('div.confirm-screen-title', 'Confirm Transaction'),
@@ -415,7 +415,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
 ConfirmSendToken.prototype.cancel = function (event, txMeta) {
   event.preventDefault()
   const { cancelTransaction } = this.props
-  
+
   cancelTransaction(txMeta)
 }
 

ui/app/components/tx-view.js

@@ -68,13 +68,13 @@ TxView.prototype.renderButtons = function () {
   return !selectedToken
     ? (
       h('div.flex-row.flex-center.hero-balance-buttons', [
-        h('button.hero-balance-button', {
+        h('button.btn-clear.hero-balance-button', {
           onClick: () => showModal({
             name: 'BUY',
           }),
         }, 'DEPOSIT'),
 
-        h('button.hero-balance-button', {
+        h('button.btn-clear.hero-balance-button', {
           style: {
             marginLeft: '0.8em',
           },
@@ -84,7 +84,7 @@ TxView.prototype.renderButtons = function () {
     )
     : (
       h('div.flex-row.flex-center.hero-balance-buttons', [
-        h('button.hero-balance-button', {
+        h('button.btn-clear.hero-balance-button', {
           onClick: showSendTokenPage,
         }, 'SEND'),
       ])

ui/app/components/wallet-view.js

@@ -130,7 +130,7 @@ WalletView.prototype.render = function () {
           selectedIdentity.name,
         ]),
 
-        h('button.wallet-view__details-button', 'DETAILS'),
+        h('button.btn-clear.wallet-view__details-button', 'DETAILS'),
       ]),
     ]),
 
@@ -151,7 +151,7 @@ WalletView.prototype.render = function () {
 
     h(TokenList),
 
-    h('button.wallet-view__add-token-button', {
+    h('button.btn-clear.wallet-view__add-token-button', {
       onClick: () => {
         showAddTokenPage()
         hideSidebar()

ui/app/css/itcss/components/buttons.scss

@@ -6,9 +6,43 @@
   background-color: #02c9b1; // TODO: reusable color in colors.css
 }
 
-button.btn-clear {
+.btn-clear {
   background: $white;
-  border: 1px solid;
+  text-align: center;
+  padding: .8rem 1rem;
+  color: $curious-blue;
+  border: 2px solid $spindle;
+  border-radius: 4px;
+  font-size: .85rem;
+  font-weight: 400;
+  transition: border-color .3s ease;
+
+  &:hover {
+    border-color: $curious-blue;
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
+}
+
+.btn-cancel {
+  background: $white;
+  text-align: center;
+  padding: .9rem 1rem;
+  color: $scorpion;
+  border: 2px solid $dusty-gray;
+  border-radius: 4px;
+  font-size: .85rem;
+  font-weight: 400;
+  transition: border-color .3s ease;
+
+  &:hover {
+    border-color: $scorpion;
+  }
 }
 
 // No longer used in flat design, remove when modal buttons done

ui/app/css/itcss/components/confirm.scss

@@ -102,15 +102,10 @@
 
 .confirm-screen-back-button {
   background: transparent;
-  border: 1px solid $curious-blue;
   left: 24px;
   position: absolute;
-  text-align: center;
+  padding: 6px 12px;
-  color: $curious-blue;
+  font-size: .7rem;
-  padding: 6px 13px 7px 12px;
-  border-radius: 2px;
-  height: 30px;
-  width: 54px;
 
   @media screen and (max-width: $break-small) {
     margin-right: 12px;

ui/app/css/itcss/components/hero-balance.scss

@@ -37,6 +37,7 @@
   }
 
   .balance-display {
+    color: $black;
 
     @media screen and (max-width: $break-small) {
       text-align: center;
@@ -44,7 +45,6 @@
       .token-amount {
         font-size: 1.75rem;
         margin-top: 1rem;
-        font-weight: 400;
       }
 
       .fiat-amount {
@@ -61,7 +61,6 @@
 
       .token-amount {
         font-size: 1.5rem;
-        font-weight: 400;
       }
 
       .fiat-amount {
@@ -84,37 +83,9 @@
       flex-grow: 2;
       justify-content: flex-end;
     }
-
-    button.btn-clear {
-      background: $white;
-      border: 1px solid;
-      border-radius: 2px;
-      font-size: 12px;
-
-      @media screen and (max-width: $break-small) {
-        border-color: $curious-blue;
-        color: $curious-blue;
-        height: 36px;
-      }
-
-      @media screen and (min-width: $break-large) {
-        border-color: $curious-blue;
-        color: $curious-blue;
-        padding: 0;
-        width: 85px;
-        height: 34px;
-      }
-    }
   }
 }
 
 .hero-balance-button {
-  text-align: center;
-  padding: .9rem 1rem;
-  color: $white;
-  background: $curious-blue;
-  border-radius: 2px;
-  font-size: .85rem;
   width: 6rem;
-  font-weight: 300;
 }

ui/app/css/itcss/components/modal.scss

@@ -258,19 +258,10 @@
     width: 286px;
   }
 
-  .btn-clear {
+  .account-modal__button {
-    min-height: 28px;
-    font-size: 14px;
-    border-color: $curious-blue;
-    color: $curious-blue;
-    border-radius: 2px;
-    flex-basis: 100%;
-    width: 75%;
     margin-top: 17px;
     padding: 10px 22px;
-    height: 44px;
     width: 235px;
-    font-family: Roboto;
   }
 }
 
@@ -346,17 +337,17 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+}
 
-  .btn-clear {
+.export-private-key__button {
-    width: 141px;
+  margin-top: 17px;
-    height: 54px;
+  padding: 10px 22px;
-  }
+  width: 141px;
+  height: 54px;
+}
 
-  .btn-cancel {
+.export-private-key__button--cancel {
-    margin-right: 15px;
+  margin-right: 15px;
-    border-color: $dusty-gray;
-    color: $scorpion;
-  }
 }
 
 .private-key-password-display-wrapper {

ui/app/css/itcss/components/newui-sections.scss

@@ -79,10 +79,7 @@ $wallet-view-bg: $alabaster;
   }
 
   &__details-button {
-    color: $curious-blue;
     font-size: 10px;
-    text-align: center;
-    border: 1px solid $curious-blue;
     border-radius: 17px;
     background-color: transparent;
     margin: 0 auto;
@@ -120,16 +117,14 @@ $wallet-view-bg: $alabaster;
 
   &__add-token-button {
     flex: 0 0 auto;
-    color: $curious-blue;
-    font-size: 14px;
-    line-height: 19px;
-    text-align: center;
     margin: 36px auto;
-    border: 1px solid $curious-blue;
-    border-radius: 2px;
-    font-weight: 300;
     background: none;
-    padding: 9px 30px;
+    padding: .7rem 2rem;
+    transition: border-color .3s ease;
+
+    &:hover {
+      border-color: $curious-blue;
+    }
   }
 }
 
@@ -238,20 +233,12 @@ $wallet-view-bg: $alabaster;
     overflow-y: auto;
     background-color: $white;
   }
-
-  button.btn-clear {
-    width: 93px;
-    height: 50px;
-    font-size: .7em;
-    background: $white;
-    border: 1px solid;
-  }
 }
 
 // wallet view
 .account-name {
   font-size: 24px;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 20px;
   color: $black;
   margin-top: 8px;

ui/app/css/itcss/components/send.scss

@@ -526,8 +526,9 @@
   }
 
   &__form {
-    margin: 13px 0;
+    padding: 13px 0;
     width: 100%;
+    overflow-y: auto;
 
     @media screen and (max-width: $break-small) {
       padding: 13px 0;
@@ -587,7 +588,7 @@
       width: 100%;
       height: 100%;
     }
-    
+
     &__list {
       z-index: 1050;
       position: absolute;
@@ -677,38 +678,13 @@
     border-top: 1px solid $alto;
     background: $white;
     padding: 0 12px;
+    flex-shrink: 0;
   }
 
   &__next-btn,
-  &__cancel-btn,
-  &__next-btn__disabled {
-    width: 163px;
-    text-align: center;
-    height: 55px;
-    border-radius: 2px;
-    background-color: $white;
-    font-family: Roboto;
-    font-size: 16px;
-    font-weight: 300;
-    line-height: 21px;
-    border: 1px solid;
-    margin: 0 4px;
-  }
-
-  &__next-btn,
-  &__next-btn__disabled {
-    color: $curious-blue;
-    border-color: $curious-blue;
-  }
-
-  &__next-btn__disabled {
-    opacity: .5;
-    cursor: auto;
-  }
-
   &__cancel-btn {
-    color: $dusty-gray;
+    width: 163px;
-    border-color: $dusty-gray;
+    margin: 0 4px;
   }
 
   &__customize-gas {

ui/app/css/itcss/components/token-list.scss

@@ -13,7 +13,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
   &__token-balance {
     font-size: 1.5rem;
-    font-weight: 400;
 
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 105%;

ui/app/css/itcss/components/wallet-balance.scss

@@ -43,7 +43,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
     .token-amount {
       font-size: 1.5rem;
-      font-weight: 400;
     }
 
     .fiat-amount {

ui/app/css/itcss/settings/variables.scss

@@ -43,6 +43,7 @@ $athens-grey: #e9edf0;
 $jaffa: #f28930;
 $geyser: #d2d8dd;
 $manatee: #93949d;
+$spindle: #c7ddec;
 
 /*
   Z-Indicies

ui/app/send-v2.js

@@ -519,13 +519,14 @@ SendTransactionScreen.prototype.renderFooter = function () {
   const errorClass = noErrors ? '' : '__disabled'
 
   return h('div.send-v2__footer', [
-    h('button.send-v2__cancel-btn', {
+    h('button.btn-cancel.send-v2__cancel-btn', {
       onClick: () => {
         clearSend()
         goHome()
       },
     }, 'Cancel'),
-    h(`button.send-v2__next-btn${errorClass}`, {
+    h('button.btn-clear.send-v2__next-btn', {
+      disabled: !noErrors,
       onClick: event => this.onSubmit(event),
     }, 'Next'),
   ])