mascara:first-time - add alpha warning and a about metamask and mascot

mascara/src/app/first-time/create-password-screen.js

@@ -1,8 +1,10 @@
+import EventEmitter from 'events'
 import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux';
 import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
 import LoadingScreen from './loading-screen'
 import Breadcrumbs from './breadcrumbs'
+import Mascot from '../../../../ui/app/components/mascot'
 
 class CreatePasswordScreen extends Component {
   static propTypes = {
@@ -18,6 +20,11 @@ class CreatePasswordScreen extends Component {
     confirmPassword: ''
   }
 
+  constructor () {
+    super()
+    this.animationEventEmitter = new EventEmitter()
+  }
+
   isValid() {
     const {password, confirmPassword} = this.state;
 
@@ -50,52 +57,74 @@ class CreatePasswordScreen extends Component {
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-        <div className="create-password">
-          <div className="create-password__title">
-            Create Password
+        <div>
+          <h2 className="alpha-warning">Warning This is Experemental software and is a Developer Alapha</h2>
+          <div className="first-view-main">
+            <div className="mascara-info">
+              <Mascot
+                animationEventEmitter={this.animationEventEmitter}
+                width="225"
+                height="225"
+              />
+              <div className="info">
+                MetaMask is a bridge that allows you to visit the distributed web
+                of tomorrow in your browser today. It allows you to run Ethereum dApps right in
+                your browser without running a full Ethereum node but still gives
+                you the option to if you want to bring your own.
+
+                MetaMask includes a secure identity vault stored loacly on your machine,
+                providing a user interface to manage your identities on different sites
+                and sign blockchain transactions
+              </div>
+            </div>
+            <div className="create-password">
+              <div className="create-password__title">
+                Create Password
+              </div>
+              <input
+                className="first-time-flow__input"
+                type="password"
+                placeholder="New Password (min 8 characters)"
+                onChange={e => this.setState({password: e.target.value})}
+              />
+              <input
+                className="first-time-flow__input create-password__confirm-input"
+                type="password"
+                placeholder="Confirm Password"
+                onChange={e => this.setState({confirmPassword: e.target.value})}
+              />
+              <button
+                className="first-time-flow__button"
+                disabled={!this.isValid()}
+                onClick={this.createAccount}
+              >
+                Create
+              </button>
+              <a
+                href=""
+                className="first-time-flow__link create-password__import-link"
+                onClick={e => {
+                  e.preventDefault()
+                  goToImportWithSeedPhrase()
+                }}
+              >
+                Import with seed phrase
+              </a>
+              { /* }
+              <a
+                href=""
+                className="first-time-flow__link create-password__import-link"
+                onClick={e => {
+                  e.preventDefault()
+                  goToImportAccount()
+                }}
+              >
+                Import an account
+              </a>
+              { */ }
+              <Breadcrumbs total={3} currentIndex={0} />
+            </div>
           </div>
-          <input
-            className="first-time-flow__input"
-            type="password"
-            placeholder="New Password (min 8 characters)"
-            onChange={e => this.setState({password: e.target.value})}
-          />
-          <input
-            className="first-time-flow__input create-password__confirm-input"
-            type="password"
-            placeholder="Confirm Password"
-            onChange={e => this.setState({confirmPassword: e.target.value})}
-          />
-          <button
-            className="first-time-flow__button"
-            disabled={!this.isValid()}
-            onClick={this.createAccount}
-          >
-            Create
-          </button>
-          <a
-            href=""
-            className="first-time-flow__link create-password__import-link"
-            onClick={e => {
-              e.preventDefault()
-              goToImportWithSeedPhrase()
-            }}
-          >
-            Import with seed phrase
-          </a>
-          { /* }
-          <a
-            href=""
-            className="first-time-flow__link create-password__import-link"
-            onClick={e => {
-              e.preventDefault()
-              goToImportAccount()
-            }}
-          >
-            Import an account
-          </a>
-          { */ }
-          <Breadcrumbs total={3} currentIndex={0} />
         </div>
       )
   }

mascara/src/app/first-time/index.css

@@ -1,3 +1,4 @@
+
 .first-time-flow {
   height: 100vh;
   width: 100vw;
@@ -5,6 +6,36 @@
   overflow: auto;
 }
 
+.alpha-warning {
+  background: #f7861c;
+  color: #fff;
+  line-height: 2em;
+  padding-left: 2em;
+}
+
+.first-view-main {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+.mascara-info {
+  display: flex;
+  flex-flow: column;
+  margin-top: 70px;
+  margin-right: 10vw;
+  width: 35vw;
+  max-width: 550px;
+}
+
+.mascara-info :first-child {
+  align-self: flex-end;
+}
+
+.info {
+  font-size: 19px;
+}
+
 .create-password,
 .unique-image,
 .tou,
@@ -75,7 +106,7 @@
 
   .backup-phrase__tips {
     margin: 40px 0 !important;
-    width: initial !important; 
+    width: initial !important;
   }
 
   .backup-phrase__confirm-secret,
@@ -337,7 +368,7 @@ button.backup-phrase__confirm-seed-option:hover {
   padding: 14px 21px;
   appearance: none;
   -webkit-appearance: none;
-  -moz-appearance: none; 
+  -moz-appearance: none;
   cursor: pointer;
 }