New add account page with create and import options.

2 files changed, 183 insertions, 0 deletions

diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index dfb4f23f0..d1b9b6277 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -51,3 +51,5 @@
 @import './account-dropdown-mini.scss';
 
 @import './editable-label.scss';
+
+@import './new-account.scss';
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
new file mode 100644
index 000000000..e14f567e1
--- /dev/null
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -0,0 +1,181 @@
+.new-account {
+  width: 376px;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+  z-index: 25;
+  padding-bottom: 31px;
+
+  &__header {
+    display: flex;
+    flex-flow: column;
+    border-bottom: 1px solid $geyser;
+  }
+
+  &__title {
+    color: $tundora;
+    font-family: Roboto;
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 43px;
+    margin-top: 22px;
+    margin-left: 29px;
+  }
+
+  &__tabs {
+    margin-left: 22px;
+    display: flex;
+    margin-top: 10px;
+
+    &__tab {
+      height: 54px;
+      width: 75px;
+      padding: 15px 10px;
+      color: $dusty-gray;
+      font-family: Roboto;
+      font-size: 18px;
+      line-height: 24px;
+      text-align: center;
+    }
+
+    &__tab:first-of-type {
+      margin-right: 20px;
+    }
+
+    &__unselected:hover {
+      color: $black;
+      border-bottom: none;
+    }
+
+    &__selected {
+      color: $curious-blue;
+      border-bottom: 3px solid $curious-blue;
+    }
+  }
+
+}
+
+.new-account-import-form {
+  &__select-section {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-top: 29px;
+  }
+
+  &__select-label {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+  }
+
+  &__select {
+    height: 54px;
+    width: 210px;
+    border: 1px solid #D2D8DD;
+    border-radius: 4px;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+
+    .Select-control,
+    .Select-control:hover {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  &__instruction {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    align-self: flex-start;
+    margin-left: 30px;
+  }
+
+  &__private-key {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    margin-top: 34px;
+  }
+
+  &__input-password {
+    height: 54px;
+    width: 315px;
+    border: 1px solid $geyser;
+    border-radius: 4px;
+    background-color: $white;
+    margin-top: 16px;
+  }
+
+  &__json {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    margin-top: 29px;
+  }
+}
+
+.new-account-create-form {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+
+  &__input-label {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    margin-top: 29px;
+    align-self: flex-start;
+    margin-left: 30px;
+  }
+
+  &__input {
+    height: 54px;
+    width: 315.84px;
+    border: 1px solid $geyser;
+    border-radius: 4px;
+    background-color: $white;
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    margin-top: 15px;
+  }
+
+  &__buttons {
+    margin-top: 39px;
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+  }
+
+  &__button-cancel,
+  &__button-create {
+    height: 55px;
+    width: 150px;
+    border-radius: 2px;
+    background-color: #FFFFFF;
+  }
+
+  &__button-cancel {
+    border: 1px solid $dusty-gray;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+
+  &__button-create {
+    border: 1px solid $curious-blue;
+    color: $curious-blue;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+}
\ No newline at end of file