Patch 2 account details modal (#1957)

* Account details modal styling changes.

* Tweaking styles.

4 files changed, 11 insertions, 19 deletions

diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index c754bc6ba..98d5d40ef 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -20,7 +20,7 @@ IdenticonComponent.prototype.render = function () {
   var props = this.props
   var diameter = props.diameter || this.defaultDiameter
   return (
-    h('div', {
+    h('div.identicon', {
       key: 'identicon-' + this.props.address,
       style: {
         display: 'flex',
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index cbddd0421..3ed702192 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -33,6 +33,9 @@ function AccountDetailsModal () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
 
+// Not yet pixel perfect todos:
+  // fonts of qr-header and close button
+
 AccountDetailsModal.prototype.render = function () {
   const { selectedIdentity, selectedAddress, network } = this.props
 
@@ -42,6 +45,7 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div', {}, [
 
+        // Needs a border; requires changes to svg
         h(
           Identicon,
           {
@@ -53,12 +57,7 @@ AccountDetailsModal.prototype.render = function () {
 
       ]),
 
-      h('div', {}, [
-        'X',
-      ]),
-
-      h('div', {}, [
-      ]),
+      h('div.account-details-modal-close', {}),
 
       h(QrView, {
         Qr: {
@@ -67,10 +66,6 @@ AccountDetailsModal.prototype.render = function () {
         }
       }, []),
 
-      h('div', {}, [
-        'Account Display',
-      ]),
-
       // divider
       h('div.account-details-modal-divider', {
         style: {}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 842c4ed51..06a3efd34 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -52,12 +52,12 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     },
     laptopModalStyle: {
       width: '360px',
-      top: 'calc(30% + 10px)',
+      top: 'calc(33% + 45px)',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     },
   },
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 1de5f7352..6559fcb7a 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -41,16 +41,13 @@ QrCodeView.prototype.render = function () {
     },
     this.props.warning) : null,
 
-    h('.div', {
-      style: {
-        marginTop: '25px',
-        marginBottom: '15px',
-      },
+    h('.div.qr-wrapper', {
+      style: {},
       dangerouslySetInnerHTML: {
         __html: qrImage.createTableTag(4),
       },
     }),
-    h('.div', [
+    h('.div.ellip-address-wrapper', [
       h('span.qr-ellip-address', {
         style: {
           width: '247px',