Add welcome screen to new-ui browser first time flow.

2 files changed, 26 insertions, 9 deletions

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index ff56542d7..b56c183e6 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -2,6 +2,7 @@ import EventEmitter from 'events'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
+import classnames from 'classnames'
 import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
 import LoadingScreen from './loading-screen'
 import Breadcrumbs from './breadcrumbs'
@@ -14,6 +15,7 @@ class CreatePasswordScreen extends Component {
     goToImportWithSeedPhrase: PropTypes.func.isRequired,
     goToImportAccount: PropTypes.func.isRequired,
     next: PropTypes.func.isRequired,
+    isMascara: PropTypes.bool.isRequired,
   }
 
   state = {
@@ -53,14 +55,17 @@ class CreatePasswordScreen extends Component {
   }
 
   render () {
-    const { isLoading, goToImportWithSeedPhrase } = this.props
-
+    const { isLoading, goToImportWithSeedPhrase, isMascara } = this.props
+    //
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <div className="first-view-main">
-            <div className="mascara-info first-view-phone-invisible">
+          <div className={classnames({
+            'first-view-main': !isMascara,
+            'first-view-main__mascara': isMascara,
+          })}>
+            {isMascara && <div className="mascara-info first-view-phone-invisible">
               <Mascot
                 animationEventEmitter={this.animationEventEmitter}
                 width="225"
@@ -72,7 +77,7 @@ class CreatePasswordScreen extends Component {
               <div className="info">
                 It allows you to hold ether & tokens, and interact with decentralized applications.
               </div>
-            </div>
+            </div>}
             <div className="create-password">
               <div className="create-password__title">
                 Create Password
@@ -127,7 +132,7 @@ class CreatePasswordScreen extends Component {
 }
 
 export default connect(
-  ({ appState: { isLoading } }) => ({ isLoading }),
+  ({ appState: { isLoading }, metamask: { isMascara } }) => ({ isLoading, isMascara }),
   dispatch => ({
     createAccount: password => dispatch(createNewVaultAndKeychain(password)),
   })
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index a1e1a8200..9cc9faeb3 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -8,16 +8,27 @@
   flex: 1 0 auto;
 }
 
-.alpha-warning {
+.alpha-warning,
+.alpha-warning-welcome-screen {
   background: #f7861c;
   color: #fff;
   line-height: 2em;
   padding-left: 10vw;
 }
 
-.first-view-main {
+.alpha-warning-welcome-screen {
+  padding-left: 0;
+  text-align: center;
+}
+
+.first-view-main,
+.first-view-main__mascara {
   display: flex;
   flex-direction: row-reverse;
+  justify-content: center;
+}
+
+.first-view-main__mascara {
   justify-content: space-between;
 }
 
@@ -99,7 +110,8 @@
     width: initial !important;
   }
 
-  .alpha-warning {
+  .alpha-warning,
+  .alpha-warning-welcome-screen {
     line-height: 1em;
     padding: 8px 12px;
   }