Add new unlock screen design

2 files changed, 42 insertions, 15 deletions

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 5f8bbd4be..dffc21017 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -21,6 +21,7 @@
   display: flex;
   justify-content: center;
   background: #f7861c;
+  flex: 0 0 auto;
 }
 
 .alpha-warning,
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 01e5d67a6..dc254bb19 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import { withRouter, Switch, Route } from 'react-router-dom'
 import { compose } from 'recompose'
+import classnames from 'classnames'
+
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
@@ -33,6 +35,7 @@ class FirstTimeFlow extends Component {
     isUnlocked: PropTypes.bool,
     history: PropTypes.object,
     welcomeScreenSeen: PropTypes.bool,
+    isPopup: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -41,23 +44,44 @@ class FirstTimeFlow extends Component {
     noActiveNotices: false,
   };
 
+  renderAppBar () {
+    const { welcomeScreenSeen } = this.props
+
+    return (
+      <div className="alpha-warning__container">
+        <h2 className={classnames({
+            'alpha-warning': welcomeScreenSeen,
+            'alpha-warning-welcome-screen': !welcomeScreenSeen,
+          })}
+        >
+          Please be aware that this version is still under development
+        </h2>
+      </div>
+    )
+  }
+
   render () {
+    const { isPopup } = this.props
+
     return (
-      <div className="first-time-flow">
-        <Switch>
-          <Route exact path={INITIALIZE_IMPORT_ACCOUNT_ROUTE} component={ImportAccountScreen} />
-          <Route
-            exact
-            path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE}
-            component={ImportSeedPhraseScreen}
-          />
-          <Route exact path={INITIALIZE_UNIQUE_IMAGE_ROUTE} component={UniqueImageScreen} />
-          <Route exact path={INITIALIZE_NOTICE_ROUTE} component={NoticeScreen} />
-          <Route exact path={INITIALIZE_BACKUP_PHRASE_ROUTE} component={BackupPhraseScreen} />
-          <Route exact path={INITIALIZE_CONFIRM_SEED_ROUTE} component={ConfirmSeed} />
-          <Route exact path={INITIALIZE_CREATE_PASSWORD_ROUTE} component={CreatePasswordScreen} />
-          <Route exact path={INITIALIZE_ROUTE} component={WelcomeScreen} />
-        </Switch>
+      <div className="flex-column flex-grow">
+        { !isPopup && this.renderAppBar() }
+        <div className="first-time-flow">
+          <Switch>
+            <Route exact path={INITIALIZE_IMPORT_ACCOUNT_ROUTE} component={ImportAccountScreen} />
+            <Route
+              exact
+              path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE}
+              component={ImportSeedPhraseScreen}
+            />
+            <Route exact path={INITIALIZE_UNIQUE_IMAGE_ROUTE} component={UniqueImageScreen} />
+            <Route exact path={INITIALIZE_NOTICE_ROUTE} component={NoticeScreen} />
+            <Route exact path={INITIALIZE_BACKUP_PHRASE_ROUTE} component={BackupPhraseScreen} />
+            <Route exact path={INITIALIZE_CONFIRM_SEED_ROUTE} component={ConfirmSeed} />
+            <Route exact path={INITIALIZE_CREATE_PASSWORD_ROUTE} component={CreatePasswordScreen} />
+            <Route exact path={INITIALIZE_ROUTE} component={WelcomeScreen} />
+          </Switch>
+        </div>
       </div>
     )
   }
@@ -73,6 +97,7 @@ const mapStateToProps = ({ metamask }) => {
     isMascara,
     isUnlocked,
     welcomeScreenSeen,
+    isPopup,
   } = metamask
 
   return {
@@ -84,6 +109,7 @@ const mapStateToProps = ({ metamask }) => {
     forgottenPassword,
     isUnlocked,
     welcomeScreenSeen,
+    isPopup,
   }
 }