Refactor first time flow, remove seed phrase from state (#5994)

* Refactor and fix styling for first time flow. Remove seed phrase from persisted metamask state

* Fix linting and tests

* Fix translations, initialization notice routing

* Fix drizzle tests

* Fix e2e tests

* Fix integration tests

* Fix styling

* Fix migration naming from 030 to 031

* Open extension in browser when user has not completed onboarding

7 files changed, 25 insertions, 77 deletions

diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss
index c068028f8..ffccbd64f 100644
--- a/ui/app/css/index.scss
+++ b/ui/app/css/index.scss
@@ -11,8 +11,6 @@
 
 @import './itcss/generic/index.scss';
 
-@import './itcss/base/index.scss';
-
 @import './itcss/objects/index.scss';
 
 @import './itcss/components/index.scss';
diff --git a/ui/app/css/itcss/base/index.scss b/ui/app/css/itcss/base/index.scss
deleted file mode 100644
index 1475e8bb5..000000000
--- a/ui/app/css/itcss/base/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// Base
-
-.mouse-user-styles {
-  button:focus {
-    outline: 0;
-  }
-}
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 5826a8b49..3e99d0ac6 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -87,6 +87,18 @@
   min-width: initial;
 }
 
+.btn--first-time {
+  height: 54px;
+  width: 198px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
+  color: $white;
+  font-size: 1.25rem;
+  font-weight: 500;
+  transition: 200ms ease-in-out;
+  background-color: rgba(247, 134, 28, .9);
+  border-radius: 0;
+}
+
 .btn--large {
   min-height: 54px;
 }
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index b11b76f35..7eaf60ce8 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -52,6 +52,4 @@
 
 @import './tooltip.scss';
 
-@import './welcome-screen.scss';
-
 @import '../../../components/index';
diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
index d7ff0b8ed..a99c58a23 100644
--- a/ui/app/css/itcss/components/loading-overlay.scss
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -1,7 +1,7 @@
 .loading-overlay {
   left: 0;
   z-index: 51;
-  position: absolute;
+  position: fixed;
   flex-direction: column;
   display: flex;
   justify-content: center;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index a016fdce3..9a0b81aed 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -8,6 +8,15 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
 // Component Colors
 $wallet-view-bg: $alabaster;
 
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-x: hidden;
+  position: relative;
+  align-items: center;
+}
+
 // Main container
 .main-container {
   // position: absolute;
@@ -24,8 +33,10 @@ $wallet-view-bg: $alabaster;
 
 .main-container-wrapper {
   display: flex;
-  width: 100vw;
   justify-content: center;
+  flex: 1 0 auto;
+  min-height: 0;
+  width: 100%;
 }
 
 //Account and transaction details
@@ -207,8 +218,6 @@ $wallet-view-bg: $alabaster;
   }
 
   .main-container {
-    // margin-top: 41px;
-    height: 100%;
     width: 100%;
     overflow-y: auto;
     background-color: $white;
@@ -216,8 +225,6 @@ $wallet-view-bg: $alabaster;
 
   .main-container-wrapper {
     flex: 1;
-    min-height: 0;
-    width: 100%;
   }
 }
 
diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss
deleted file mode 100644
index af1d67398..000000000
--- a/ui/app/css/itcss/components/welcome-screen.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-.welcome-screen {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-  font-family: Roboto;
-  font-weight: 400;
-  width: 100%;
-  flex: 1 0 auto;
-  padding: 70px 0;
-  background: $white;
-
-  @media screen and (max-width: 575px) {
-    padding: 0;
-  }
-
-  &__info {
-    display: flex;
-    flex-flow: column;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-
-    &__header {
-      font-size: 1.65em;
-      margin-bottom: 14px;
-
-      @media screen and (max-width: 575px) {
-        font-size: 1.5em;
-      }
-    }
-
-    &__copy {
-      font-size: 1em;
-      width: 400px;
-      max-width: 90vw;
-      text-align: center;
-
-      @media screen and (max-width: 575px) {
-        font-size: .9em;
-      }
-    }
-  }
-
-  &__button {
-    height: 54px;
-    width: 198px;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
-    color: #fff;
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 26px;
-    text-align: center;
-    text-transform: uppercase;
-    margin: 35px 0 14px;
-    transition: 200ms ease-in-out;
-    background-color: rgba(247, 134, 28, .9);
-  }
-}