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.

1 files changed, 87 insertions, 3 deletions

diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index be6d2a640..231a87d52 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/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;
 }