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.

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: {

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',
         ]),

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

@@ -194,8 +194,8 @@
 .account-details-modal-wrapper .btn-clear {
   min-height: 28px;
   font-size: 1em;
-  border-color: #2f9ae0;
-  color: #2f9ae0;
+  border-color: $curious-blue;
+  color: $curious-blue;
   padding: 0px;
   border-radius: 2px;
   flex-basis: 100%;
@@ -232,5 +232,89 @@
   justify-content: flex-start;
   align-items: center;
   position: relative;
-  border: 1px solid #d8d8d8;
+  border: 1px solid $alto;
+  box-shadow: 0 0 2px 2px $alto;
+}
+
+.new-account-modal-header {
+  background: $wild-sand;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 30px;
+  font-size: 22px;
+  color: $nile-blue;
+}
+
+.modal-close-x:after {
+    content: '\00D7';
+    font-size: 2em;
+    color: $dusty-gray;
+    position: absolute;
+    top: 25px;
+    right: 17.5px;
+    font-family: sans-serif;
+}
+
+.new-account-modal-content {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 13px;
+  font-size: 18px;
+  color: $nile-blue;
+}
+
+.new-account-modal-content.import {
+  padding-top: 2px;
+}
+
+.new-account-input-wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding-bottom: 2px;
+}
+
+.new-account-input {
+  padding: 15px;
+  padding-bottom: 20px;
+  border-radius: 8px;
+  border: 1px solid $alto;
+  width: 70%;
+  font-size: 1em;
+  font-color: $alto;
+}
+
+// For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css
+.new-account-input::-webkit-input-placeholder {
+    color: $dusty-gray;
+}
+.new-account-input:-moz-placeholder {
+   color: $dusty-gray;
+   opacity: 1;
+}
+.new-account-input::-moz-placeholder {
+   color: $dusty-gray;
+   opacity: 1;
+}
+.new-account-input:-ms-input-placeholder {
+   color: $dusty-gray;
+}
+.new-account-input::-ms-input-placeholder {
+   color: $dusty-gray;
+}
+
+.new-account-modal-content.button {
+  padding-top: 9px;
+}
+
+.new-account-modal-wrapper .btn-clear {
+  font-size: 14px;
+  font-weight: bold;
+  background: $white;
+  border: 1px solid;
+  border-radius: 2px;
+  width: 30%;
+  color: $tundora;
 }

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

@@ -27,6 +27,8 @@ $alabaster: #fafafa;
 $silver-chalice: #aeaeae;
 $curious-blue: #2f9ae0;
 $concrete: #f3f3f3;
+$tundora: #4d4d4d;
+$nile-blue: #1b344d;
 
 /*
   Z-Indicies