From 744b78e9c8c032cdd13acf121f891c28f319ed4d Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 24 Aug 2017 21:55:27 -0230
Subject: [PATCH] Patch 2 account details modal (#1957)

* Account details modal styling changes.

* Tweaking styles.
---
 ui/app/components/identicon.js                |  2 +-
 .../modals/account-details-modal.js           | 15 +++----
 ui/app/components/modals/modal.js             |  4 +-
 ui/app/components/qr-code.js                  |  9 ++--
 ui/app/css/itcss/components/modal.scss        | 44 +++++++++++++++++++
 5 files changed, 55 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',
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index c23d6bc21..be6d2a640 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -172,6 +172,37 @@
   justify-content: flex-start;
   align-items: center;
   position: relative;
+  padding: 5px 0px;
+  border-radius: 4px;
+}
+
+.account-details-modal-wrapper .qr-header {
+  margin-top: 15px;
+}
+
+.account-details-modal-wrapper .qr-wrapper {
+  margin-top: 15px;
+}
+
+.account-details-modal-wrapper .ellip-address-wrapper {
+  display: flex;
+  justify-content: center;
+  border: 1px solid $alto;
+  padding: 5px 10px 5px 10px;
+}
+
+.account-details-modal-wrapper .btn-clear {
+  min-height: 28px;
+  font-size: 1em;
+  border-color: #2f9ae0;
+  color: #2f9ae0;
+  padding: 0px;
+  border-radius: 2px;
+  flex-basis: 100%;
+  width: 75%;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 10px;
 }
 
 .account-details-modal-divider {
@@ -181,6 +212,19 @@
   background-color: $alto;
 }
 
+.account-details-modal-wrapper .identicon {
+  margin-top: -55.5%;
+}
+
+.account-details-modal-close:after {
+    content: '\00D7';
+    font-size: 1.5em;
+    color: grey;
+    position: absolute;
+    top: 5px;
+    right: 10px;
+}
+
 // New Account Modal
 .new-account-modal-wrapper {
   display: flex;