From 8b90b1d1b12bdae4f1fa06caec5cd5619dc83437 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 6 Feb 2018 22:03:37 -0800
Subject: Remove accessing PropTypes from main React package

---
 mascara/src/app/buy-ether-widget/index.js          |  3 ++-
 mascara/src/app/first-time/backup-phrase-screen.js |  7 ++---
 mascara/src/app/first-time/breadcrumbs.js          |  5 ++--
 mascara/src/app/first-time/buy-ether-screen.js     |  3 ++-
 .../src/app/first-time/create-password-screen.js   | 31 +++++++++++-----------
 .../src/app/first-time/import-account-screen.js    |  3 ++-
 .../app/first-time/import-seed-phrase-screen.js    |  3 ++-
 mascara/src/app/first-time/index.js                |  3 ++-
 mascara/src/app/first-time/loading-screen.js       | 10 +++++--
 mascara/src/app/first-time/notice-screen.js        | 28 ++++++++++---------
 mascara/src/app/first-time/unique-image-screen.js  |  3 ++-
 mascara/src/app/shapeshift-form/index.js           |  3 ++-
 12 files changed, 60 insertions(+), 42 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/buy-ether-widget/index.js b/mascara/src/app/buy-ether-widget/index.js
index 9fe659daa..c60221a0a 100644
--- a/mascara/src/app/buy-ether-widget/index.js
+++ b/mascara/src/app/buy-ether-widget/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index c68dacea2..9db61f3ab 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
 import classnames from 'classnames'
 import shuffle from 'lodash.shuffle'
 import {compose, onlyUpdateForPropTypes} from 'recompose'
@@ -194,7 +195,7 @@ class BackupPhraseScreen extends Component {
           </button>
         </div>
       </div>
-    ) 
+    )
   }
 
   renderBack () {
diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js
index f8460d200..b81a9fb9b 100644
--- a/mascara/src/app/first-time/breadcrumbs.js
+++ b/mascara/src/app/first-time/breadcrumbs.js
@@ -1,10 +1,11 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export default class Breadcrumbs extends Component {
 
   static propTypes = {
     total: PropTypes.number,
-    currentIndex: PropTypes.number
+    currentIndex: PropTypes.number,
   };
 
   render() {
diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 45b2df1c8..c5a560638 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 0b36c6815..d1a2ec70f 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,6 +1,7 @@
 import EventEmitter from 'events'
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
 import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
 import LoadingScreen from './loading-screen'
 import Breadcrumbs from './breadcrumbs'
@@ -12,12 +13,12 @@ class CreatePasswordScreen extends Component {
     createAccount: PropTypes.func.isRequired,
     goToImportWithSeedPhrase: PropTypes.func.isRequired,
     goToImportAccount: PropTypes.func.isRequired,
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
   }
 
   state = {
     password: '',
-    confirmPassword: ''
+    confirmPassword: '',
   }
 
   constructor () {
@@ -25,34 +26,34 @@ class CreatePasswordScreen extends Component {
     this.animationEventEmitter = new EventEmitter()
   }
 
-  isValid() {
-    const {password, confirmPassword} = this.state;
+  isValid () {
+    const {password, confirmPassword} = this.state
 
     if (!password || !confirmPassword) {
-      return false;
+      return false
     }
 
     if (password.length < 8) {
-      return false;
+      return false
     }
 
-    return password === confirmPassword;
+    return password === confirmPassword
   }
 
   createAccount = () => {
     if (!this.isValid()) {
-      return;
+      return
     }
 
-    const {password} = this.state;
-    const {createAccount, next} = this.props;
+    const {password} = this.state
+    const {createAccount, next} = this.props
 
     createAccount(password)
-      .then(next);
+      .then(next)
   }
 
-  render() {
-    const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
+  render () {
+    const { isLoading, goToImportWithSeedPhrase } = this.props
 
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
index bf8e209e4..ab0aca0f0 100644
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import classnames from 'classnames'
 import LoadingScreen from './loading-screen'
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index 2b01fa75d..181151ca9 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import LoadingScreen from './loading-screen'
 import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 66b591bd8..b06f2ba9d 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
diff --git a/mascara/src/app/first-time/loading-screen.js b/mascara/src/app/first-time/loading-screen.js
index 732b7f2d7..01e1c1998 100644
--- a/mascara/src/app/first-time/loading-screen.js
+++ b/mascara/src/app/first-time/loading-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import Spinner from './spinner'
 
 export default function LoadingScreen({ className = '', loadingMessage }) {
@@ -7,5 +8,10 @@ export default function LoadingScreen({ className = '', loadingMessage }) {
       <Spinner color="#1B344D" />
       <div className="loading-screen__message">{loadingMessage}</div>
     </div>
-  );
+  )
+}
+
+LoadingScreen.propTypes = {
+  className: PropTypes.string,
+  loadingMessage: PropTypes.string,
 }
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index d09070a95..e691a2f47 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import Markdown from 'react-markdown'
 import {connect} from 'react-redux'
 import debounce from 'lodash.debounce'
@@ -12,25 +13,26 @@ class NoticeScreen extends Component {
     lastUnreadNotice: PropTypes.shape({
       title: PropTypes.string,
       date: PropTypes.string,
-      body: PropTypes.string
+      body: PropTypes.string,
     }),
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
+    markNoticeRead: PropTypes.func,
   };
 
   static defaultProps = {
-    lastUnreadNotice: {}
+    lastUnreadNotice: {},
   };
 
   state = {
     atBottom: false,
   }
 
-  componentDidMount() {
+  componentDidMount () {
     this.onScroll()
   }
 
   acceptTerms = () => {
-    const { markNoticeRead, lastUnreadNotice, next } = this.props;
+    const { markNoticeRead, lastUnreadNotice, next } = this.props
     const defer = markNoticeRead(lastUnreadNotice)
       .then(() => this.setState({ atBottom: false }))
 
@@ -43,17 +45,17 @@ class NoticeScreen extends Component {
     if (this.state.atBottom) return
 
     const target = document.querySelector('.tou__body')
-    const {scrollTop, offsetHeight, scrollHeight} = target;
-    const atBottom = scrollTop + offsetHeight >= scrollHeight;
+    const {scrollTop, offsetHeight, scrollHeight} = target
+    const atBottom = scrollTop + offsetHeight >= scrollHeight
 
     this.setState({atBottom: atBottom})
   }, 25)
 
-  render() {
+  render () {
     const {
       address,
-      lastUnreadNotice: { title, body }
-    } = this.props;
+      lastUnreadNotice: { title, body },
+    } = this.props
     const { atBottom } = this.state
 
     return (
@@ -84,9 +86,9 @@ class NoticeScreen extends Component {
 export default connect(
   ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
     lastUnreadNotice,
-    address: selectedAddress
+    address: selectedAddress,
   }),
   dispatch => ({
-    markNoticeRead: notice => dispatch(markNoticeRead(notice))
+    markNoticeRead: notice => dispatch(markNoticeRead(notice)),
   })
 )(NoticeScreen)
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index ef6bd28ab..46448aacf 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
diff --git a/mascara/src/app/shapeshift-form/index.js b/mascara/src/app/shapeshift-form/index.js
index 15c7e95e1..53a63403a 100644
--- a/mascara/src/app/shapeshift-form/index.js
+++ b/mascara/src/app/shapeshift-form/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {qrcode} from 'qrcode-npm'
 import {connect} from 'react-redux'
-- 
cgit v1.2.3


From c26e0d555b7cb89e88713041714206abd8f4275e Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 19 Feb 2018 22:46:18 -0330
Subject: Fix Import Existing DEN in popup New UI first time flow.

---
 .../app/first-time/import-seed-phrase-screen.js    | 14 ++++++-
 mascara/src/app/first-time/index.js                | 49 +++++++++++++++++++---
 2 files changed, 56 insertions(+), 7 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index 181151ca9..a03a16329 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -2,7 +2,13 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import LoadingScreen from './loading-screen'
-import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
+import {
+  createNewVaultAndRestore,
+  hideWarning,
+  displayWarning,
+  unMarkPasswordForgotten,
+  clearNotices,
+} from '../../../../ui/app/actions'
 
 class ImportSeedPhraseScreen extends Component {
   static propTypes = {
@@ -23,7 +29,7 @@ class ImportSeedPhraseScreen extends Component {
 
   onClick = () => {
     const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning } = this.props
+    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedSreenState } = this.props
 
     if (seedPhrase.split(' ').length !== 12) {
       this.warning = 'Seed Phrases are 12 words long'
@@ -43,6 +49,7 @@ class ImportSeedPhraseScreen extends Component {
       return
     }
     this.warning = null
+    leaveImportSeedSreenState()
     createNewVaultAndRestore(password, seedPhrase)
       .then(next)
   }
@@ -113,6 +120,9 @@ class ImportSeedPhraseScreen extends Component {
 export default connect(
   ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
   dispatch => ({
+    leaveImportSeedSreenState: () => {
+      dispatch(unMarkPasswordForgotten())
+    },
     createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
     displayWarning: (warning) => dispatch(displayWarning(warning)),
     hideWarning: () => dispatch(hideWarning()),
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index b06f2ba9d..883342d16 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -7,7 +7,11 @@ import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import ImportSeedPhraseScreen from './import-seed-phrase-screen'
-import {onboardingBuyEthView} from '../../../../ui/app/actions'
+const Loading = require('../../../../ui/app//components/loading')
+import {
+  onboardingBuyEthView,
+  unMarkPasswordForgotten,
+} from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
 
@@ -33,6 +37,7 @@ class FirstTimeFlow extends Component {
     NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
     CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
+    LOADING: 'loading',
   };
 
   constructor (props) {
@@ -51,11 +56,15 @@ class FirstTimeFlow extends Component {
       isInitialized,
       seedWords,
       noActiveNotices,
+      forgottenPassword,
     } = this.props
     const {SCREEN_TYPE} = FirstTimeFlow
 
     // return SCREEN_TYPE.NOTICE
 
+    if (forgottenPassword) {
+      return SCREEN_TYPE.IMPORT_SEED_PHRASE
+    }
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
     }
@@ -71,7 +80,17 @@ class FirstTimeFlow extends Component {
 
   renderScreen () {
     const {SCREEN_TYPE} = FirstTimeFlow
-    const {goToBuyEtherView, address} = this.props
+    const {
+      goToBuyEtherView,
+      address,
+      restoreCreatePasswordScreen,
+      forgottenPassword,
+      isLoading,
+    } = this.props
+
+    if (isLoading) {
+      return h(Loading)
+    }
 
     switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
@@ -92,8 +111,14 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.IMPORT_SEED_PHRASE:
         return (
           <ImportSeedPhraseScreen
-            back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)}
-            next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
+            back={() => {
+              leaveImportSeedSreenState()
+              this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)
+            }}
+            next={() => {
+              const newScreenType = forgottenPassword ? null : SCREEN_TYPE.NOTICE
+              this.setScreenType(newScreenType)
+            }}
           />
         )
       case SCREEN_TYPE.UNIQUE_IMAGE:
@@ -130,13 +155,27 @@ class FirstTimeFlow extends Component {
 }
 
 export default connect(
-  ({ metamask: { isInitialized, seedWords, noActiveNotices, selectedAddress } }) => ({
+  ({
+    metamask: {
+      isInitialized,
+      seedWords,
+      noActiveNotices,
+      selectedAddress,
+      forgottenPassword,
+    },
+    appState: {
+      isLoading,
+    }
+  }) => ({
     isInitialized,
     seedWords,
     noActiveNotices,
     address: selectedAddress,
+    forgottenPassword,
+    isLoading,
   }),
   dispatch => ({
+    leaveImportSeedSreenState: () => dispatch(unMarkPasswordForgotten()),
     goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
   })
 )(FirstTimeFlow)
-- 
cgit v1.2.3


From 00c5dd2736cd389c6658778bb5238eefb2d2f926 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 20 Feb 2018 14:00:35 -0330
Subject: Fix variable spelling error.

---
 mascara/src/app/first-time/import-seed-phrase-screen.js | 6 +++---
 mascara/src/app/first-time/index.js                     | 9 +++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index a03a16329..93c3f9203 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -29,7 +29,7 @@ class ImportSeedPhraseScreen extends Component {
 
   onClick = () => {
     const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedSreenState } = this.props
+    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedScreenState } = this.props
 
     if (seedPhrase.split(' ').length !== 12) {
       this.warning = 'Seed Phrases are 12 words long'
@@ -49,7 +49,7 @@ class ImportSeedPhraseScreen extends Component {
       return
     }
     this.warning = null
-    leaveImportSeedSreenState()
+    leaveImportSeedScreenState()
     createNewVaultAndRestore(password, seedPhrase)
       .then(next)
   }
@@ -120,7 +120,7 @@ class ImportSeedPhraseScreen extends Component {
 export default connect(
   ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
   dispatch => ({
-    leaveImportSeedSreenState: () => {
+    leaveImportSeedScreenState: () => {
       dispatch(unMarkPasswordForgotten())
     },
     createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 883342d16..a05e0aa96 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -7,7 +7,7 @@ import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import ImportSeedPhraseScreen from './import-seed-phrase-screen'
-const Loading = require('../../../../ui/app//components/loading')
+const Loading = require('../../../../ui/app/components/loading')
 import {
   onboardingBuyEthView,
   unMarkPasswordForgotten,
@@ -86,10 +86,11 @@ class FirstTimeFlow extends Component {
       restoreCreatePasswordScreen,
       forgottenPassword,
       isLoading,
+      leaveImportSeedScreenState,
     } = this.props
 
     if (isLoading) {
-      return h(Loading)
+      return (<Loading />)
     }
 
     switch (this.state.screenType) {
@@ -112,7 +113,7 @@ class FirstTimeFlow extends Component {
         return (
           <ImportSeedPhraseScreen
             back={() => {
-              leaveImportSeedSreenState()
+              leaveImportSeedScreenState()
               this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)
             }}
             next={() => {
@@ -175,7 +176,7 @@ export default connect(
     isLoading,
   }),
   dispatch => ({
-    leaveImportSeedSreenState: () => dispatch(unMarkPasswordForgotten()),
+    leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
     goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
   })
 )(FirstTimeFlow)
-- 
cgit v1.2.3


From 6740be109be1b545e1efa327901c6ac4a46b8bf0 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 20 Feb 2018 16:17:30 -0330
Subject: Temporarily disable loading indicator.

---
 mascara/src/app/first-time/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index a05e0aa96..46b821c8b 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -89,9 +89,10 @@ class FirstTimeFlow extends Component {
       leaveImportSeedScreenState,
     } = this.props
 
-    if (isLoading) {
-      return (<Loading />)
-    }
+    // Disable until testing bug resolved
+    // if (isLoading) {
+    //   return (<Loading />)
+    // }
 
     switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
-- 
cgit v1.2.3


From 66f55f954e9f3868396e478fd79c4bbd8f8673e5 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 20 Feb 2018 20:51:45 -0330
Subject: Render loading inside notice screen, and don't set isLoading from
 unMarkPasswordForgotten.

---
 mascara/src/app/first-time/index.js         | 11 --------
 mascara/src/app/first-time/notice-screen.js | 44 ++++++++++++++++-------------
 2 files changed, 24 insertions(+), 31 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 46b821c8b..da2f6bab9 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -7,7 +7,6 @@ import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import ImportSeedPhraseScreen from './import-seed-phrase-screen'
-const Loading = require('../../../../ui/app/components/loading')
 import {
   onboardingBuyEthView,
   unMarkPasswordForgotten,
@@ -85,15 +84,9 @@ class FirstTimeFlow extends Component {
       address,
       restoreCreatePasswordScreen,
       forgottenPassword,
-      isLoading,
       leaveImportSeedScreenState,
     } = this.props
 
-    // Disable until testing bug resolved
-    // if (isLoading) {
-    //   return (<Loading />)
-    // }
-
     switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
         return (
@@ -164,9 +157,6 @@ export default connect(
       noActiveNotices,
       selectedAddress,
       forgottenPassword,
-    },
-    appState: {
-      isLoading,
     }
   }) => ({
     isInitialized,
@@ -174,7 +164,6 @@ export default connect(
     noActiveNotices,
     address: selectedAddress,
     forgottenPassword,
-    isLoading,
   }),
   dispatch => ({
     leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index e691a2f47..0f0a7e95d 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -6,6 +6,7 @@ import debounce from 'lodash.debounce'
 import {markNoticeRead} from '../../../../ui/app/actions'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
+import LoadingScreen from './loading-screen'
 
 class NoticeScreen extends Component {
   static propTypes = {
@@ -55,36 +56,39 @@ class NoticeScreen extends Component {
     const {
       address,
       lastUnreadNotice: { title, body },
+      isLoading,
     } = this.props
     const { atBottom } = this.state
 
     return (
-      <div
-        className="tou"
-        onScroll={this.onScroll}
-      >
-        <Identicon address={address} diameter={70} />
-        <div className="tou__title">{title}</div>
-        <Markdown
-          className="tou__body markdown"
-          source={body}
-          skipHtml
-        />
-        <button
-          className="first-time-flow__button"
-          onClick={atBottom && this.acceptTerms}
-          disabled={!atBottom}
+      isLoading
+        ? <LoadingScreen />
+        : <div
+          className="tou"
+          onScroll={this.onScroll}
         >
-          Accept
-        </button>
-        <Breadcrumbs total={3} currentIndex={2} />
-      </div>
+          <Identicon address={address} diameter={70} />
+          <div className="tou__title">{title}</div>
+          <Markdown
+            className="tou__body markdown"
+            source={body}
+            skipHtml
+          />
+          <button
+            className="first-time-flow__button"
+            onClick={atBottom && this.acceptTerms}
+            disabled={!atBottom}
+          >
+            Accept
+          </button>
+          <Breadcrumbs total={3} currentIndex={2} />
+        </div>
     )
   }
 }
 
 export default connect(
-  ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
+  ({ metamask: { selectedAddress, lastUnreadNotice }, appState: { isLoading } }) => ({
     lastUnreadNotice,
     address: selectedAddress,
   }),
-- 
cgit v1.2.3


From 746c3e5f1803e9b3712d22a4e4dd7ab43e84e060 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 13:34:31 -0330
Subject: Body width container in first time flow is consistent with app bar.

---
 mascara/src/app/first-time/index.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 4314efbe6..4f2400222 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -4,6 +4,8 @@
   width: 100vw;
   background-color: #FFF;
   overflow: auto;
+  display: flex;
+  justify-content: center;
 }
 
 .alpha-warning {
@@ -23,7 +25,6 @@
   display: flex;
   flex-flow: column;
   margin-top: 70px;
-  margin-right: 10vw;
   width: 35vw;
   max-width: 550px;
 }
@@ -48,6 +49,10 @@
   max-width: 35rem;
 }
 
+.create-password {
+  margin: 67px 0 50px 0px;
+}
+
 .import-account {
   max-width: initial;
 }
-- 
cgit v1.2.3


From 07edf3f9ffdee9459f4d0b9d30b8b6821d26dbf0 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 13:35:29 -0330
Subject: NewUI first time flow warning message change.

---
 mascara/src/app/first-time/create-password-screen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index d1a2ec70f..d348eaa1a 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -59,7 +59,7 @@ class CreatePasswordScreen extends Component {
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <h2 className="alpha-warning">Warning: This is Experimental software and is a Developer BETA</h2>
+          <h2 className="alpha-warning">Please be aware that this version is still in under development.</h2>
           <div className="first-view-main">
             <div className="mascara-info">
               <Mascot
-- 
cgit v1.2.3


From def369ba079fb3596c126fe9b622eda46afa54f6 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 13:43:22 -0330
Subject: Move beta warning to app header.

---
 mascara/src/app/first-time/create-password-screen.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index d348eaa1a..450d6a479 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -59,7 +59,6 @@ class CreatePasswordScreen extends Component {
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <h2 className="alpha-warning">Please be aware that this version is still in under development.</h2>
           <div className="first-view-main">
             <div className="mascara-info">
               <Mascot
-- 
cgit v1.2.3


From baab9917ff741dd8e2f7efea63f85bc3de0f89ca Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 14:14:55 -0330
Subject: Padding of alpha warning aligns with app-bar

---
 mascara/src/app/first-time/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 4f2400222..109946e1d 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -12,7 +12,7 @@
   background: #f7861c;
   color: #fff;
   line-height: 2em;
-  padding-left: 2em;
+  padding-left: 10vw;
 }
 
 .first-view-main {
-- 
cgit v1.2.3


From 5f8a632fec0e83b148e4e0b7fc95339fb870d804 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Tue, 6 Mar 2018 09:14:57 -0800
Subject: Fix seed phrase validation clearing form (#3417)

* Fix seed phrase validation clearing form

* Make new ui import seed error feedback live, and allow newlines with and without carriage returns.
---
 .../app/first-time/import-seed-phrase-screen.js    | 191 ++++++++++++---------
 mascara/src/app/first-time/index.css               |  16 +-
 2 files changed, 123 insertions(+), 84 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index 93c3f9203..de8d675e1 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -1,13 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
-import LoadingScreen from './loading-screen'
+import classnames from 'classnames'
 import {
   createNewVaultAndRestore,
   hideWarning,
   displayWarning,
   unMarkPasswordForgotten,
-  clearNotices,
 } from '../../../../ui/app/actions'
 
 class ImportSeedPhraseScreen extends Component {
@@ -17,8 +16,8 @@ class ImportSeedPhraseScreen extends Component {
     next: PropTypes.func.isRequired,
     createNewVaultAndRestore: PropTypes.func.isRequired,
     hideWarning: PropTypes.func.isRequired,
-    isLoading: PropTypes.bool.isRequired,
     displayWarning: PropTypes.func,
+    leaveImportSeedScreenState: PropTypes.func,
   };
 
   state = {
@@ -27,98 +26,130 @@ class ImportSeedPhraseScreen extends Component {
     confirmPassword: '',
   }
 
-  onClick = () => {
-    const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedScreenState } = this.props
+  parseSeedPhrase = (seedPhrase) => {
+    return seedPhrase
+      .match(/\w+/g)
+      .join(' ')
+  }
 
-    if (seedPhrase.split(' ').length !== 12) {
-      this.warning = 'Seed Phrases are 12 words long'
-      displayWarning(this.warning)
-      return
-    }
+  onChange = ({ seedPhrase, password, confirmPassword }) => {
+    const {
+      password: prevPassword,
+      confirmPassword: prevConfirmPassword,
+    } = this.state
+    const { displayWarning, hideWarning } = this.props
+
+    let warning = null
 
-    if (password.length < 8) {
-      this.warning = 'Passwords require a mimimum length of 8'
-      displayWarning(this.warning)
-      return
+    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
+      warning = 'Seed Phrases are 12 words long'
+    } else if (password && password.length < 8) {
+      warning = 'Passwords require a mimimum length of 8'
+    } else if ((password || prevPassword) !== (confirmPassword || prevConfirmPassword)) {
+      warning = 'Confirmed password does not match'
     }
 
-    if (password !== confirmPassword) {
-      this.warning = 'Confirmed password does not match'
-      displayWarning(this.warning)
-      return
+    if (warning) {
+      displayWarning(warning)
+    } else {
+      hideWarning()
     }
-    this.warning = null
+
+    seedPhrase && this.setState({ seedPhrase })
+    password && this.setState({ password })
+    confirmPassword && this.setState({ confirmPassword })
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const {
+      createNewVaultAndRestore,
+      next,
+      displayWarning,
+      leaveImportSeedScreenState,
+    } = this.props
+
     leaveImportSeedScreenState()
-    createNewVaultAndRestore(password, seedPhrase)
+    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
       .then(next)
   }
 
   render () {
-    return this.props.isLoading
-      ? <LoadingScreen loadingMessage="Creating your new account" />
-      : (
-        <div className="import-account">
-          <a
-            className="import-account__back-button"
-            onClick={e => {
-              e.preventDefault()
-              this.props.back()
-            }}
-            href="#"
-          >
-            {`< Back`}
-          </a>
-          <div className="import-account__title">
-            Import an Account with Seed Phrase
-          </div>
-          <div className="import-account__selector-label">
-            Enter your secret twelve word phrase here to restore your vault.
-          </div>
-          <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">Wallet Seed</label>
-            <textarea
-              className="import-account__secret-phrase"
-              onChange={e => this.setState({seedPhrase: e.target.value})}
-              placeholder="Separate each word with a single space"
-            />
-          </div>
-          <span
-            className="error"
-          >
-            {this.props.warning}
-          </span>
-          <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">New Password</label>
-            <input
-              className="first-time-flow__input"
-              type="password"
-              placeholder="New Password (min 8 characters)"
-              onChange={e => this.setState({password: e.target.value})}
-            />
-          </div>
-          <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">Confirm Password</label>
-            <input
-              className="first-time-flow__input"
-              type="password"
-              placeholder="Confirm Password"
-              onChange={e => this.setState({confirmPassword: e.target.value})}
-            />
-          </div>
-          <button
-            className="first-time-flow__button"
-            onClick={this.onClick}
-          >
-            Import
-          </button>
+    const { seedPhrase, password, confirmPassword } = this.state
+    const { warning } = this.props
+    const importDisabled = warning || !seedPhrase || !password || !confirmPassword
+    return (
+      <div className="import-account">
+        <a
+          className="import-account__back-button"
+          onClick={e => {
+            e.preventDefault()
+            this.props.back()
+          }}
+          href="#"
+        >
+          {`< Back`}
+        </a>
+        <div className="import-account__title">
+          Import an Account with Seed Phrase
+        </div>
+        <div className="import-account__selector-label">
+          Enter your secret twelve word phrase here to restore your vault.
+        </div>
+        <div className="import-account__input-wrapper">
+          <label className="import-account__input-label">Wallet Seed</label>
+          <textarea
+            className="import-account__secret-phrase"
+            onChange={e => this.onChange({seedPhrase: e.target.value})}
+            value={this.state.seedPhrase}
+            placeholder="Separate each word with a single space"
+          />
+        </div>
+        <span
+          className="error"
+        >
+          {this.props.warning}
+        </span>
+        <div className="import-account__input-wrapper">
+          <label className="import-account__input-label">New Password</label>
+          <input
+            className="first-time-flow__input"
+            type="password"
+            placeholder="New Password (min 8 characters)"
+            onChange={e => this.onChange({password: e.target.value})}
+          />
+        </div>
+        <div className="import-account__input-wrapper">
+          <label
+            className="import-account__input-label"
+            className={classnames('import-account__input-label', {
+              'import-account__input-label__disabled': password.length < 8,
+            })}
+          >Confirm Password</label>
+          <input
+            className={classnames('first-time-flow__input', {
+              'first-time-flow__input__disabled': password.length < 8,
+            })}
+            type="password"
+            placeholder="Confirm Password"
+            onChange={e => this.onChange({confirmPassword: e.target.value})}
+            disabled={password.length < 8}
+          />
         </div>
-      )
+        <button
+          className="first-time-flow__button"
+          onClick={() => !importDisabled && this.onClick()}
+          disabled={importDisabled}
+        >
+          Import
+        </button>
+      </div>
+    )
   }
 }
 
 export default connect(
-  ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+  ({ appState: { warning } }) => ({ warning }),
   dispatch => ({
     leaveImportSeedScreenState: () => {
       dispatch(unMarkPasswordForgotten())
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 109946e1d..f59eb4ce1 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -1,11 +1,11 @@
 
 .first-time-flow {
-  height: 100vh;
   width: 100vw;
-  background-color: #FFF;
+  background-color: #fff;
   overflow: auto;
   display: flex;
   justify-content: center;
+  flex: 1 0 auto;
 }
 
 .alpha-warning {
@@ -45,12 +45,12 @@
 .buy-ether {
   display: flex;
   flex-flow: column nowrap;
-  margin: 67px 0 50px 146px;
+  margin: 67px 0 50px;
   max-width: 35rem;
 }
 
 .create-password {
-  margin: 67px 0 50px 0px;
+  margin: 67px 0 50px;
 }
 
 .import-account {
@@ -418,6 +418,10 @@ button.backup-phrase__confirm-seed-option:hover {
   line-height: 23px;
 }
 
+.import-account__input-label__disabled {
+  opacity: 0.5;
+}
+
 .import-account__input {
   width: 325px !important;
 }
@@ -564,6 +568,10 @@ button.backup-phrase__confirm-seed-option:hover {
   background-color: #FFFFFF;
 }
 
+.first-time-flow__input__disabled {
+  opacity: 0.5;
+}
+
 .first-time-flow__input::placeholder {
   color: #9B9B9B;
   font-weight: 200;
-- 
cgit v1.2.3


From b8dec6827127ebd5a1fba19a389a361ebc3a9a4d Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 7 Mar 2018 12:47:33 -0330
Subject: Make new-ui create password screen responsive.

---
 .../src/app/first-time/create-password-screen.js   |  2 +-
 mascara/src/app/first-time/index.css               | 56 ++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 450d6a479..ff56542d7 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component {
       : (
         <div>
           <div className="first-view-main">
-            <div className="mascara-info">
+            <div className="mascara-info first-view-phone-invisible">
               <Mascot
                 animationEventEmitter={this.animationEventEmitter}
                 width="225"
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index f59eb4ce1..a1e1a8200 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -21,6 +21,24 @@
   justify-content: space-between;
 }
 
+@media screen and (min-width: 576px) {
+  .first-view-main {
+    width: 85vw;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .first-view-main {
+    width: 80vw;
+  }
+}
+
+@media screen and (min-width: 1281px) {
+  .first-view-main {
+    width: 62vw;
+  }
+}
+
 .mascara-info {
   display: flex;
   flex-flow: column;
@@ -81,6 +99,44 @@
     width: initial !important;
   }
 
+  .alpha-warning {
+    line-height: 1em;
+    padding: 8px 12px;
+  }
+
+  .first-view-main {
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-top: 12px;
+  }
+
+  .first-view-main .create-password {
+    margin-top: 0px;
+  }
+
+  .mascara-info {
+    margin-top: 0px;
+    width: 100%;
+    align-items: center;
+  }
+
+  .mascara-info .info {
+    text-align: center;
+    font-size: 16px;
+    margin: 0 10px;
+    padding-left: 0px;
+  }
+
+  .mascara-info :first-child {
+    align-self: center;
+  }
+
+  .first-view-phone-invisible {
+    display: none;
+  }
+
   .first-time-flow__input {
     width: initial !important;
     font-size: 14px !important;
-- 
cgit v1.2.3


From e290d70086d8101f82b025a95dd1c198b641725c Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 7 Mar 2018 14:50:23 -0330
Subject: Change fonts in new-ui onboarding to Roboto, with weight 400.

---
 mascara/src/app/first-time/index.css | 54 +++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 23 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index f59eb4ce1..e8a50d988 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
 
 .first-time-flow {
   width: 100vw;
@@ -6,6 +13,7 @@
   display: flex;
   justify-content: center;
   flex: 1 0 auto;
+  font-weight: 400;
 }
 
 .alpha-warning {
@@ -180,11 +188,11 @@
   color: #1B344D;
   font-size: 16px;
   line-height: 23px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .buy-ether__small-body-text {
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
   height: 14px;
   color: #757575;
   font-size: 12px;
@@ -212,7 +220,7 @@
   height: 334px;
   overflow-y: auto;
   color: #757575;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
   font-size: 12px;
   line-height: 15px;
   text-align: justify;
@@ -237,7 +245,7 @@
   color: #5B5D67;
   font-size: 16px;
   line-height: 23px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .backup-phrase__secret {
@@ -255,7 +263,7 @@
 .backup-phrase__secret-words {
   width: 310px;
   color: #5B5D67;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 20px;
   line-height: 26px;
   text-align: center;
@@ -284,7 +292,7 @@
   background: none;
   box-shadow: none;
   color: #FFFFFF;
-  font-family: Montserrat Regular;
+  font-family: Roboto;
   font-size: 12px;
   font-weight: bold;
   line-height: 15px;
@@ -338,7 +346,7 @@ button.backup-phrase__reveal-button:hover {
 
 .backup-phrase__confirm-seed-option {
   color: #5B5D67;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 16px;
   line-height: 21px;
   background-color: #E7E7E7;
@@ -360,7 +368,7 @@ button.backup-phrase__confirm-seed-option:hover {
 .import-account__faq-link {
   font-size: 18px;
   line-height: 23px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
 }
 
 .import-account__selector-label {
@@ -375,7 +383,7 @@ button.backup-phrase__confirm-seed-option:hover {
   background-color: #FFFFFF;
   margin-top: 14px;
   color: #5B5D67;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   line-height: 23px;
   padding: 14px 21px;
@@ -390,7 +398,7 @@ button.backup-phrase__confirm-seed-option:hover {
   font-size: 18px;
   line-height: 23px;
   margin-top: 21px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .import-account__input-wrapper {
@@ -436,7 +444,7 @@ button.backup-phrase__confirm-seed-option:hover {
   border: 1px solid #1B344D;
   border-radius: 4px;
   color: #1B344D;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   display: flex;
   flex-flow: column nowrap;
@@ -453,7 +461,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .import-account__file-name {
   color: #000000;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   line-height: 23px;
   margin-left: 22px;
@@ -474,7 +482,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .buy-ether__content-headline {
   color: #1B344D;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   line-height: 23px;
 }
@@ -503,7 +511,7 @@ button.backup-phrase__confirm-seed-option:hover {
   align-items: center;
   padding: 20px 0;
   color: #9B9B9B;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 14px;
   line-height: 18px;
   cursor: pointer;
@@ -538,7 +546,7 @@ button.backup-phrase__confirm-seed-option:hover {
 .buy-ether__button-separator-text {
   font-size: 20px;
   line-height: 26px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   margin: 35px 0 14px 30px;
   display: flex;
   flex-flow: column nowrap;
@@ -550,7 +558,7 @@ button.backup-phrase__confirm-seed-option:hover {
   color: #1B344D !important;
   font-size: 14px !important;
   line-height: 18px !important;
-  font-family: Montserrat UltraLight !important;
+  font-family: Roboto;
 }
 
 .buy-ether__action-content-wrapper {
@@ -608,7 +616,7 @@ button.first-time-flow__button:hover {
   color: #1B344D;
   font-size: 20px;
   line-height: 26px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   text-align: center;
   margin: 35px 0 14px;
   background-color: transparent;
@@ -660,7 +668,7 @@ button.first-time-flow__button--tertiary:hover {
   font-size: 20px;
   line-height: 26px;
   text-align: center;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .icon {
@@ -708,7 +716,7 @@ button.first-time-flow__button--tertiary:hover {
 .shapeshift-form__deposit-instruction {
   color: #757575;
   color: rgba(0, 0, 0, 0.45);
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-weight: 300;
   line-height: 19px;
   padding-bottom: 6px;
@@ -725,7 +733,7 @@ button.first-time-flow__button--tertiary:hover {
   width: 100%;
   height: 45px;
   line-height: 44px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
 }
 
 .shapeshift-form__address-input-label {
@@ -734,7 +742,7 @@ button.first-time-flow__button--tertiary:hover {
   font-weight: 500;
   line-height: 18px;
   padding-bottom: 6px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
 }
 
 .shapeshift-form__address-input {
@@ -753,7 +761,7 @@ button.first-time-flow__button--tertiary:hover {
 
 .shapeshift-form__address-input-error-message {
   color: #FF001F;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 12px;
   height: 24px;
   line-height: 18px;
@@ -763,7 +771,7 @@ button.first-time-flow__button--tertiary:hover {
   display: flex;
   flex-flow: row wrap;
   color: #9B9B9B;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 10px;
   line-height: 16px;
 }
-- 
cgit v1.2.3


From 6c400c2e925053784befa199f734b08f14e3b404 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 7 Mar 2018 22:37:53 -0330
Subject: Update first time flow button fonts, and first-time-flow default
 font, to Roboto.

---
 mascara/src/app/first-time/index.css | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index e8a50d988..9f4ad0c83 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -14,6 +14,7 @@
   justify-content: center;
   flex: 1 0 auto;
   font-weight: 400;
+  font-family: Roboto;
 }
 
 .alpha-warning {
@@ -592,6 +593,7 @@ button.backup-phrase__confirm-seed-option:hover {
   color: #FFFFFF;
   font-size: 20px;
   font-weight: 500;
+  font-family: Roboto;
   line-height: 26px;
   text-align: center;
   text-transform: uppercase;
-- 
cgit v1.2.3


From 91c890041c685db8ff7f7ac87009225fa31b3042 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 8 Mar 2018 14:01:21 -0330
Subject: Add welcome screen to new-ui browser first time flow.

---
 mascara/src/app/first-time/create-password-screen.js | 17 +++++++++++------
 mascara/src/app/first-time/index.css                 | 18 +++++++++++++++---
 2 files changed, 26 insertions(+), 9 deletions(-)

(limited to 'mascara')

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;
   }
-- 
cgit v1.2.3


From 0dad6db9736f2b90000c489b0b452c8d2fa02bb3 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 12 Mar 2018 14:29:26 -0230
Subject: Styling fixes to welcome; hide network component on create password;
 shown welcoem in popup.

---
 mascara/src/app/first-time/create-password-screen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index b56c183e6..37294b9b5 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -56,7 +56,7 @@ class CreatePasswordScreen extends Component {
 
   render () {
     const { isLoading, goToImportWithSeedPhrase, isMascara } = this.props
-    //
+
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-- 
cgit v1.2.3


From 70f33d47472863e3fce41eff60c1fe078efef7de Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 12 Mar 2018 20:17:44 -0230
Subject: Left align create password.

---
 mascara/src/app/first-time/create-password-screen.js |  2 +-
 mascara/src/app/first-time/index.css                 | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 37294b9b5..192da3399 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component {
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-        <div>
+        <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
           <div className={classnames({
             'first-view-main': !isMascara,
             'first-view-main__mascara': isMascara,
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 9cc9faeb3..b49dd9d45 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -21,6 +21,12 @@
   text-align: center;
 }
 
+.first-view-main-wrapper {
+  display: flex;
+  width: 100%;
+  padding-left: 10vw;
+}
+
 .first-view-main,
 .first-view-main__mascara {
   display: flex;
@@ -32,15 +38,9 @@
   justify-content: space-between;
 }
 
-@media screen and (min-width: 576px) {
-  .first-view-main {
-    width: 85vw;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  .first-view-main {
-    width: 80vw;
+@media screen and (max-width: 575px) {
+  .first-view-main-wrapper {
+    padding: 0;
   }
 }
 
-- 
cgit v1.2.3


From 7fb27cf0c7a5c8eb2aa492ced603873996537c81 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 16 Mar 2018 08:50:21 -0700
Subject: Update margins for consistency in first time flow (#3588)

---
 mascara/src/app/first-time/backup-phrase-screen.js |  42 ++++---
 .../app/first-time/import-seed-phrase-screen.js    | 129 +++++++++++----------
 mascara/src/app/first-time/index.css               |  99 +++++++++++-----
 mascara/src/app/first-time/notice-screen.js        |  46 ++++----
 mascara/src/app/first-time/unique-image-screen.js  |  34 +++---
 5 files changed, 206 insertions(+), 144 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index 9db61f3ab..c8cc56c6c 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -89,15 +89,15 @@ class BackupPhraseScreen extends Component {
           </div>
         )}
       </div>
-    );
+    )
   }
 
-  renderSecretScreen() {
+  renderSecretScreen () {
     const { isShowingSecret } = this.state
 
     return (
       <div className="backup-phrase__content-wrapper">
-        <div>
+        <div className="backup-phrase__phrase">
           <div className="backup-phrase__title">Secret Backup Phrase</div>
           <div className="backup-phrase__body-text">
             Your secret backup phrase makes it easy to back up and restore your account.
@@ -106,17 +106,6 @@ class BackupPhraseScreen extends Component {
             WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever.
           </div>
           {this.renderSecretWordsContainer()}
-          <button
-            className="first-time-flow__button"
-            onClick={() => isShowingSecret && this.setState({
-              isShowingSecret: false,
-              page: BackupPhraseScreen.PAGE.CONFIRM
-            })}
-            disabled={!isShowingSecret}
-          >
-            Next
-          </button>
-          <Breadcrumbs total={3} currentIndex={1} />
         </div>
         <div className="backup-phrase__tips">
           <div className="backup-phrase__tips-text">Tips:</div>
@@ -130,6 +119,19 @@ class BackupPhraseScreen extends Component {
             Memorize this phrase.
           </div>
         </div>
+        <div className="backup-phrase__next-button">
+          <button
+            className="first-time-flow__button"
+            onClick={() => isShowingSecret && this.setState({
+              isShowingSecret: false,
+              page: BackupPhraseScreen.PAGE.CONFIRM,
+            })}
+            disabled={!isShowingSecret}
+          >
+            Next
+          </button>
+          <Breadcrumbs total={3} currentIndex={1} />
+        </div>
       </div>
     )
   }
@@ -231,10 +233,14 @@ class BackupPhraseScreen extends Component {
     return this.props.isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-        <div className="backup-phrase">
-          {this.renderBack()}
-          <Identicon address={this.props.address} diameter={70} />
-          {this.renderContent()}
+        <div className="first-view-main-wrapper">
+          <div className="first-view-main">
+            <div className="backup-phrase">
+              {this.renderBack()}
+              <Identicon address={this.props.address} diameter={70} />
+              {this.renderContent()}
+            </div>
+          </div>
         </div>
       )
   }
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index de8d675e1..86f02ceac 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -79,70 +79,73 @@ class ImportSeedPhraseScreen extends Component {
     const { warning } = this.props
     const importDisabled = warning || !seedPhrase || !password || !confirmPassword
     return (
-      <div className="import-account">
-        <a
-          className="import-account__back-button"
-          onClick={e => {
-            e.preventDefault()
-            this.props.back()
-          }}
-          href="#"
-        >
-          {`< Back`}
-        </a>
-        <div className="import-account__title">
-          Import an Account with Seed Phrase
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="import-account">
+            <a
+              className="import-account__back-button"
+              onClick={e => {
+                e.preventDefault()
+                this.props.back()
+              }}
+              href="#"
+            >
+              {`< Back`}
+            </a>
+            <div className="import-account__title">
+              Import an Account with Seed Phrase
+            </div>
+            <div className="import-account__selector-label">
+              Enter your secret twelve word phrase here to restore your vault.
+            </div>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">Wallet Seed</label>
+              <textarea
+                className="import-account__secret-phrase"
+                onChange={e => this.onChange({seedPhrase: e.target.value})}
+                value={this.state.seedPhrase}
+                placeholder="Separate each word with a single space"
+              />
+            </div>
+            <span
+              className="error"
+            >
+              {this.props.warning}
+            </span>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">New Password</label>
+              <input
+                className="first-time-flow__input"
+                type="password"
+                placeholder="New Password (min 8 characters)"
+                onChange={e => this.onChange({password: e.target.value})}
+              />
+            </div>
+            <div className="import-account__input-wrapper">
+              <label
+                className={classnames('import-account__input-label', {
+                  'import-account__input-label__disabled': password.length < 8,
+                })}
+              >Confirm Password</label>
+              <input
+                className={classnames('first-time-flow__input', {
+                  'first-time-flow__input__disabled': password.length < 8,
+                })}
+                type="password"
+                placeholder="Confirm Password"
+                onChange={e => this.onChange({confirmPassword: e.target.value})}
+                disabled={password.length < 8}
+              />
+            </div>
+            <button
+              className="first-time-flow__button"
+              onClick={() => !importDisabled && this.onClick()}
+              disabled={importDisabled}
+            >
+              Import
+            </button>
+          </div>
         </div>
-        <div className="import-account__selector-label">
-          Enter your secret twelve word phrase here to restore your vault.
-        </div>
-        <div className="import-account__input-wrapper">
-          <label className="import-account__input-label">Wallet Seed</label>
-          <textarea
-            className="import-account__secret-phrase"
-            onChange={e => this.onChange({seedPhrase: e.target.value})}
-            value={this.state.seedPhrase}
-            placeholder="Separate each word with a single space"
-          />
-        </div>
-        <span
-          className="error"
-        >
-          {this.props.warning}
-        </span>
-        <div className="import-account__input-wrapper">
-          <label className="import-account__input-label">New Password</label>
-          <input
-            className="first-time-flow__input"
-            type="password"
-            placeholder="New Password (min 8 characters)"
-            onChange={e => this.onChange({password: e.target.value})}
-          />
-        </div>
-        <div className="import-account__input-wrapper">
-          <label
-            className="import-account__input-label"
-            className={classnames('import-account__input-label', {
-              'import-account__input-label__disabled': password.length < 8,
-            })}
-          >Confirm Password</label>
-          <input
-            className={classnames('first-time-flow__input', {
-              'first-time-flow__input__disabled': password.length < 8,
-            })}
-            type="password"
-            placeholder="Confirm Password"
-            onChange={e => this.onChange({confirmPassword: e.target.value})}
-            disabled={password.length < 8}
-          />
-        </div>
-        <button
-          className="first-time-flow__button"
-          onClick={() => !importDisabled && this.onClick()}
-          disabled={importDisabled}
-        >
-          Import
-        </button>
       </div>
     )
   }
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 6c45816bd..d7b146e51 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -17,12 +17,34 @@
   font-family: Roboto;
 }
 
+.alpha-warning__container {
+  display: flex;
+  justify-content: center;
+  background: #f7861c;
+}
+
 .alpha-warning,
 .alpha-warning-welcome-screen {
-  background: #f7861c;
   color: #fff;
   line-height: 2em;
-  padding-left: 10vw;
+}
+
+@media screen and (min-width: 576px) {
+  .alpha-warning {
+    width: 85vw;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .alpha-warning {
+    width: 80vw;
+  }
+}
+
+@media screen and (min-width: 1281px) {
+  .alpha-warning {
+    width: 62vw;
+  }
 }
 
 .alpha-warning-welcome-screen {
@@ -33,26 +55,22 @@
 .first-view-main-wrapper {
   display: flex;
   width: 100%;
-  padding-left: 10vw;
+  height: 100%;
+  justify-content: center;
+  padding: 0 10px;
 }
 
 .first-view-main,
 .first-view-main__mascara {
   display: flex;
-  flex-direction: row-reverse;
-  justify-content: center;
+  flex-direction: row;
+  justify-content: flex-start;
 }
 
 .first-view-main__mascara {
   justify-content: space-between;
 }
 
-@media screen and (max-width: 575px) {
-  .first-view-main-wrapper {
-    padding: 0;
-  }
-}
-
 @media screen and (min-width: 1281px) {
   .first-view-main {
     width: 62vw;
@@ -83,12 +101,8 @@
 .buy-ether {
   display: flex;
   flex-flow: column nowrap;
-  margin: 67px 0 50px;
-  max-width: 35rem;
-}
-
-.create-password {
-  margin: 67px 0 50px;
+  margin: 60px 0 30px 0;
+  position: relative;
 }
 
 .import-account {
@@ -133,10 +147,6 @@
     margin-top: 12px;
   }
 
-  .first-view-main .create-password {
-    margin-top: 0px;
-  }
-
   .mascara-info {
     margin-top: 0px;
     width: 100%;
@@ -212,7 +222,7 @@
 }
 
 .backup-phrase {
-  max-width: 100%;
+  width: 100%;
 }
 
 .create-password__title,
@@ -298,7 +308,18 @@
 
 .backup-phrase__content-wrapper {
   display: flex;
-  flex: row nowrap;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+
+.backup-phrase__phrase {
+  flex-grow: .5;
+  min-width: 0;
+}
+
+.backup-phrase__next-button {
+  flex-grow: 1;
+  width: 100%;
 }
 
 .backup-phrase__body-text {
@@ -306,8 +327,10 @@
 }
 
 .backup-phrase__tips {
-  margin: 40px 85px;
+  margin-top: 40px;
   width: 285px;
+  flex-grow: .5;
+  min-width: 0;
 }
 
 .backup-phrase__tips-text {
@@ -315,6 +338,22 @@
   font-size: 16px;
   line-height: 23px;
   font-family: Roboto;
+  min-width: 0;
+}
+
+@media only screen and (max-width: 768px) {
+  .backup-phrase__content-wrapper {
+    flex-direction: column;
+  }
+
+  .backup-phrase__phrase {
+    flex: 1 0 auto;
+  }
+
+  .backup-phrase__tips {
+    width: 100%;
+    flex: 1 0 auto;
+  }
 }
 
 .backup-phrase__secret {
@@ -371,13 +410,17 @@
 }
 
 .backup-phrase__back-button,
-.backup-phrase__back-button:hover,
-.import-account__back-button,
-.import-account__back-button:hover {
+.import-account__back-button {
   margin-bottom: 18px;
-  color: #22232C;
+  color: #22232c;
   font-size: 16px;
   line-height: 21px;
+  position: absolute;
+  top: -25px;
+}
+
+.backup-phrase__back-button {
+  top: -30px;
 }
 
 button.backup-phrase__reveal-button:hover {
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index 0f0a7e95d..cbd8f9f5b 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -63,26 +63,32 @@ class NoticeScreen extends Component {
     return (
       isLoading
         ? <LoadingScreen />
-        : <div
-          className="tou"
-          onScroll={this.onScroll}
-        >
-          <Identicon address={address} diameter={70} />
-          <div className="tou__title">{title}</div>
-          <Markdown
-            className="tou__body markdown"
-            source={body}
-            skipHtml
-          />
-          <button
-            className="first-time-flow__button"
-            onClick={atBottom && this.acceptTerms}
-            disabled={!atBottom}
-          >
-            Accept
-          </button>
-          <Breadcrumbs total={3} currentIndex={2} />
-        </div>
+        : (
+          <div className="first-view-main-wrapper">
+            <div className="first-view-main">
+              <div
+                className="tou"
+                onScroll={this.onScroll}
+              >
+                <Identicon address={address} diameter={70} />
+                <div className="tou__title">{title}</div>
+                <Markdown
+                  className="tou__body markdown"
+                  source={body}
+                  skipHtml
+                />
+                <button
+                  className="first-time-flow__button"
+                  onClick={atBottom && this.acceptTerms}
+                  disabled={!atBottom}
+                >
+                  Accept
+                </button>
+                <Breadcrumbs total={3} currentIndex={2} />
+              </div>
+            </div>
+          </div>
+        )
     )
   }
 }
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index 46448aacf..ede17ee3d 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -12,22 +12,26 @@ class UniqueImageScreen extends Component {
 
   render () {
     return (
-      <div className="unique-image">
-        <Identicon address={this.props.address} diameter={70} />
-        <div className="unique-image__title">Your unique account image</div>
-        <div className="unique-image__body-text">
-          This image was programmatically generated for you by your new account number.
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="unique-image">
+            <Identicon address={this.props.address} diameter={70} />
+            <div className="unique-image__title">Your unique account image</div>
+            <div className="unique-image__body-text">
+              This image was programmatically generated for you by your new account number.
+            </div>
+            <div className="unique-image__body-text">
+              You’ll see this image everytime you need to confirm a transaction.
+            </div>
+            <button
+              className="first-time-flow__button"
+              onClick={this.props.next}
+            >
+              Next
+            </button>
+            <Breadcrumbs total={3} currentIndex={1} />
+          </div>
         </div>
-        <div className="unique-image__body-text">
-          You’ll see this image everytime you need to confirm a transaction.
-        </div>
-        <button
-          className="first-time-flow__button"
-          onClick={this.props.next}
-        >
-          Next
-        </button>
-        <Breadcrumbs total={3} currentIndex={1} />
       </div>
     )
   }
-- 
cgit v1.2.3


From 9b38a77f460a5ada0948182b97419119a495d476 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Mon, 19 Mar 2018 12:38:16 -0230
Subject: Make entire gray container of 'reveal seed phrase' a clickable area.
 (#3596)

---
 mascara/src/app/first-time/backup-phrase-screen.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index c8cc56c6c..6819abcf3 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -78,14 +78,16 @@ class BackupPhraseScreen extends Component {
           {this.props.seedWords}
         </div>
         {!isShowingSecret && (
-          <div className="backup-phrase__secret-blocker">
+          <div
+            className="backup-phrase__secret-blocker"
+            onClick={() => this.setState({ isShowingSecret: true })}
+          >
             <LockIcon width="28px" height="35px" fill="#FFFFFF" />
-            <button
+            <div
               className="backup-phrase__reveal-button"
-              onClick={() => this.setState({ isShowingSecret: true })}
             >
               Click here to reveal secret words
-            </button>
+            </div>
           </div>
         )}
       </div>
-- 
cgit v1.2.3


From 6393c381173e854e280025e8b89d7e0f105984fc Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 22 Mar 2018 14:29:18 -0230
Subject: Pop uses new ui onboarding when in beta.

---
 mascara/src/app/first-time/index.css | 5 -----
 mascara/src/app/first-time/index.js  | 4 ++--
 2 files changed, 2 insertions(+), 7 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index d7b146e51..2c5439cec 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -221,10 +221,6 @@
   max-width: 46rem;
 }
 
-.backup-phrase {
-  width: 100%;
-}
-
 .create-password__title,
 .unique-image__title,
 .tou__title,
@@ -674,7 +670,6 @@ button.backup-phrase__confirm-seed-option:hover {
 }
 
 .buy-ether__action-content-wrapper {
-  width: 360px;
   display: flex;
   flex-flow: column nowrap;
 }
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index da2f6bab9..d2f444fe7 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -131,7 +131,7 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.BACK_UP_PHRASE:
         return (
           <BackupPhraseScreen
-            next={() => goToBuyEtherView(address)}
+            next={() => openBuyEtherModal()}
           />
         )
       default:
@@ -167,7 +167,7 @@ export default connect(
   }),
   dispatch => ({
     leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
-    goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
+    openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
   })
 )(FirstTimeFlow)
 
-- 
cgit v1.2.3


From d4da7c984f222a255a149425ca29e4fd8ebf297b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 22 Mar 2018 14:49:46 -0230
Subject: Improve responsivensss of unique image screen.

---
 mascara/src/app/first-time/index.css | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 2c5439cec..5f8bbd4be 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -122,6 +122,10 @@
     width: calc(100vw - 80px);
   }
 
+  .unique-image {
+    width: auto;
+  }
+
   .create-password__title,
   .unique-image__title,
   .tou__title,
-- 
cgit v1.2.3


From 07dd06424741c5a43de136496d44a6f9089e837b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 26 Mar 2018 16:27:19 -0230
Subject: Fix tests.

---
 mascara/src/app/first-time/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index d2f444fe7..c0bba53d6 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -10,6 +10,7 @@ import ImportSeedPhraseScreen from './import-seed-phrase-screen'
 import {
   onboardingBuyEthView,
   unMarkPasswordForgotten,
+  showModal,
 } from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
@@ -80,7 +81,7 @@ class FirstTimeFlow extends Component {
   renderScreen () {
     const {SCREEN_TYPE} = FirstTimeFlow
     const {
-      goToBuyEtherView,
+      openBuyEtherModal,
       address,
       restoreCreatePasswordScreen,
       forgottenPassword,
-- 
cgit v1.2.3