First time flow updates (#6192)

* Action select step of onboarding flow added.

* Update navigation on create and import password screens.

* Adds terms of service checkbox to create and import account screens.

* Add security warning to jazzicon intro step

* Update and streamline unique image to confirm seed steps of first time flow.

* UI touch ups to welcome screen.

* UI touch up on select action page

* Fix first time import flow.

* Add end of flow screen to first time flow

* Replace unique image screen with updated fishing warning screen.

* Update e2e tests for onboarding flow changes.

* Add required translations to onboarding flow.

* Update design of select action screen to emphasize create new wallet option.

* Clean up onboarding flow code.

* Remove notice related code from first-time-flow directory.

* Use updater function argument in new-account.component

1 files changed, 56 insertions, 3 deletions

diff --git a/ui/app/components/pages/first-time-flow/index.scss b/ui/app/components/pages/first-time-flow/index.scss
index e3aca0694..e14d57f58 100644
--- a/ui/app/components/pages/first-time-flow/index.scss
+++ b/ui/app/components/pages/first-time-flow/index.scss
@@ -1,18 +1,28 @@
 @import './welcome/index';
 
+@import './select-action/index';
+
 @import './seed-phrase/index';
 
+@import './end-of-flow/index';
+
 .first-time-flow {
   width: 100%;
   background-color: $white;
+  display: flex;
+  justify-content: center;
 
   &__wrapper {
     @media screen and (min-width: $break-large) {
-      padding: 60px 275px 0 275px;
+      max-width: 742px;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin-top: 2%;
     }
 
-    @media screen and (max-width: 1100px) {
-      padding: 36px;
+    .app-header__metafox-logo {
+      margin-bottom: 40px;
     }
   }
 
@@ -21,9 +31,14 @@
     flex-direction: column;
   }
 
+  &__create-back {
+    margin-bottom: 16px;
+  }
+
   &__header {
     font-size: 2.5rem;
     margin-bottom: 24px;
+    color: black;
   }
 
   &__subheader {
@@ -86,6 +101,7 @@
 
   &__text-block {
     margin-bottom: 24px;
+    color: black;
 
     @media screen and (max-width: $break-small) {
       margin-bottom: 16px;
@@ -95,5 +111,42 @@
 
   &__button {
     margin: 35px 0 14px;
+    width: 140px;
+    height: 44px;
+  }
+
+  &__checkbox-container {
+    display: flex;
+    align-items: center;
+    margin-top: 24px;
+  }
+
+  &__checkbox {
+    background: #FFFFFF;
+    border: 1px solid #CDCDCD;
+    box-sizing: border-box;
+    height: 34px;
+    width: 34px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      border: 1.5px solid #2f9ae0;
+    }
+
+    .fa-check {
+      color: #2f9ae0
+    }
+  }
+
+  &__checkbox-label {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    line-height: normal;
+    font-size: 18px;
+    color: #939090;
+    margin-left: 18px;
   }
 }