Patch 3 new account modal (#1962)

* Account details modal styling changes.

* Tweaking styles.

* New account modal re-styling.

* Tweaks to paddings, margins, font sizes, colors and modal dimensions.

* Replace colour codes with variables.

2 files changed, 16 insertions, 13 deletions

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 06a3efd34..fdff4c99e 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -66,8 +66,14 @@ const MODALS = {
     contents: [
       h(NewAccountModal, {}, []),
     ],
-    mobileModalStyle: {},
-    laptopModalStyle: {}
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
   },
 
   DEFAULT: {
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 90a3b7c99..c44b79a2e 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -33,34 +33,31 @@ NewAccountModal.prototype.render = function () {
   return h('div', {}, [
     h('div.new-account-modal-wrapper', {
     }, [
-      h('div', {}, [
+      h('div.new-account-modal-header', {}, [
         'New Account',
       ]),
 
-      h('div', {}, [
-        h('i.fa.fa-times', {}, [
-        ]),
-      ]),
+      h('div.modal-close-x', {}),
       
-      h('div', {}, [
+      h('div.new-account-modal-content', {}, [
         'Account Name',
       ]),
 
-      h('div', {}, [
-        h('input', {
+      h('div.new-account-input-wrapper', {}, [
+        h('input.new-account-input', {
           placeholder: 'E.g. My new account'
         }, []),
       ]),
 
-      h('div', {}, [
+      h('div.new-account-modal-content', {}, [
         'or',
       ]),
 
-      h('div', {}, [
+      h('div.new-account-modal-content.import', {}, [
         'Import an account',
       ]),
 
-      h('div', {}, [
+      h('div.new-account-modal-content.button', {}, [
         h('button.btn-clear', {}, [
           'SAVE',
         ]),