Style send token screen

7 files changed, 57 insertions, 31 deletions

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 1961a61b5..48354ff94 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -232,6 +232,8 @@ class AccountDropdowns extends Component {
     const dropdownMenuItemStyle = {
       fontFamily: 'DIN OT',
       fontSize: 16,
+      lineHeight: '24px',
+      padding: '8px',
     }
 
     return h(
@@ -347,15 +349,9 @@ class AccountDropdowns extends Component {
       [
         enableAccountsSelector && h(
           'i.fa.fa-angle-down',
-          // 'div.cursor-pointer.color-orange.accounts-selector',
           {
             style: {
-              // fontSize: '135%',
-              // background: 'url(images/switch_acc.svg) white center center no-repeat',
-              // height: '25px',
-              // width: '25px',
-              // transform: 'scale(0.75)',
-              // marginRight: '3px',
+              cursor: 'pointer',
             },
             onClick: (event) => {
               event.stopPropagation()
@@ -372,6 +368,7 @@ class AccountDropdowns extends Component {
           {
             style: {
               fontSize: '135%',
+              cursor: 'pointer',
             },
             onClick: (event) => {
               event.stopPropagation()
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index c4b2c2550..991c89cb8 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -40,7 +40,11 @@ class Dropdown extends Component {
         h(
           'style',
           `
-          li.dropdown-menu-item:hover { color:rgb(225, 225, 225); }
+          li.dropdown-menu-item:hover {
+            color:rgb(225, 225, 225);
+            background-color: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+          }
           li.dropdown-menu-item { color: rgb(185, 185, 185); }
           `
         ),
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
index e3bbaf380..63e841288 100644
--- a/ui/app/components/input-number.js
+++ b/ui/app/components/input-number.js
@@ -49,6 +49,7 @@ InputNumber.prototype.render = function () {
         onClick: () => this.setValue(value + step),
       }),
       h('i.fa.fa-angle-down', {
+        style: { cursor: 'pointer' },
         onClick: () => this.setValue(value - step),
       }),
     ]),
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 838000fed..ec7e4b500 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -39,21 +39,17 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
 AccountDetailsModal.prototype.render = function () {
   const { selectedIdentity, network } = this.props
 
-  return h('div', {}, [
-    h('div.account-details-modal-wrapper', {
-    }, [
+  return h('div', { style: { borderRadius: '4px' }}, [
+    h('div.account-details-modal-wrapper', [
 
-      h('div', {}, [
+      h('div', [
 
         // Needs a border; requires changes to svg
-        h(
-          Identicon,
-          {
-            address: selectedIdentity.address,
-            diameter: 64,
-            style: {},
-          },
-        ),
+        h(Identicon, {
+          address: selectedIdentity.address,
+          diameter: 64,
+          style: {},
+        }),
 
       ]),
 
@@ -66,26 +62,20 @@ AccountDetailsModal.prototype.render = function () {
           message: this.props.selectedIdentity.name,
           data: this.props.selectedIdentity.address,
         },
-      }, []),
+      }),
 
       // divider
-      h('div.account-details-modal-divider', {
-        style: {},
-      }, []),
+      h('div.account-details-modal-divider'),
 
       h('button.btn-clear', {
         onClick: () => {
           const url = genAccountLink(selectedIdentity.address, network)
           global.platform.openWindow({ url })
         },
-      }, [
-        'View account on Etherscan',
-      ]),
+      }, [ 'View account on Etherscan' ]),
 
       // Holding on redesign for Export Private Key functionality
-      h('button.btn-clear', {}, [
-        'Export private key',
-      ]),
+      h('button.btn-clear', [ 'Export private key' ]),
 
     ]),
   ])
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 85bed66e1..477dcbe86 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -62,6 +62,9 @@ const MODALS = {
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
       borderRadius: '4px',
     },
+    contentStyle: {
+      borderRadius: '4px',
+    }
   },
 
   NEW_ACCOUNT: {
@@ -117,6 +120,7 @@ Modal.prototype.render = function () {
 
   const children = modal.contents
   const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
+  const contentStyle = modal.contentStyle || {};
 
   return h(FadeModal,
     {
@@ -127,6 +131,7 @@ Modal.prototype.render = function () {
         this.modalRef = ref
       },
       modalStyle,
+      contentStyle,
       backdropStyle: BACKDROPSTYLE,
     },
     children,
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 46f8b9d84..6d2205164 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -180,6 +180,10 @@
   border: 1px solid $silver;
   border-radius: 4px;
   font-family: 'Montserrat UltraLight';
+
+  button {
+    cursor: pointer;
+  }
 }
 
 .account-details-modal-wrapper .qr-header {
@@ -231,7 +235,12 @@
 }
 
 .account-details-modal-wrapper .identicon {
-  margin-top: -55.5%;
+  position: relative;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  top: -32px;
+  margin-bottom: -32px;
 }
 
 .account-details-modal-close::after {
@@ -241,6 +250,7 @@
   position: absolute;
   top: 10px;
   right: 12px;
+  cursor: pointer;
 }
 
 // New Account Modal
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 86170890c..a2a77f763 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -243,4 +243,23 @@
     line-height: 40px;
     margin-top: 13px;
   }
+
+  .send-screen-input-wrapper {
+    .fa-bolt {
+      padding-right: 4px;
+    }
+
+    .large-input {
+      border: 1px solid $dusty-gray;
+      border-radius: 4px;
+      margin: 4px 0 20px;
+      font-size: 16px;
+      line-height: 22.4px;
+      font-family: "DIN OT";
+    }
+
+    .send-screen-gas-input {
+      border: 1px solid transparent;
+    }
+  }
 }