aboutsummaryrefslogtreecommitdiffstats
path: root/mascara/src/app/first-time
diff options
context:
space:
mode:
Diffstat (limited to 'mascara/src/app/first-time')
-rw-r--r--mascara/src/app/first-time/backup-phrase-screen.js52
-rw-r--r--mascara/src/app/first-time/create-password-screen.js17
-rw-r--r--mascara/src/app/first-time/import-seed-phrase-screen.js129
-rw-r--r--mascara/src/app/first-time/index.css201
-rw-r--r--mascara/src/app/first-time/notice-screen.js46
-rw-r--r--mascara/src/app/first-time/unique-image-screen.js34
6 files changed, 313 insertions, 166 deletions
diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index 9db61f3ab..6819abcf3 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -78,26 +78,28 @@ 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>
- );
+ )
}
- 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 +108,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 +121,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 +235,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/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 450d6a479..192da3399 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">
+ <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
+ <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/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 f59eb4ce1..d7b146e51 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,21 +13,70 @@
display: flex;
justify-content: center;
flex: 1 0 auto;
+ font-weight: 400;
+ font-family: Roboto;
}
-.alpha-warning {
+.alpha-warning__container {
+ display: flex;
+ justify-content: center;
background: #f7861c;
+}
+
+.alpha-warning,
+.alpha-warning-welcome-screen {
color: #fff;
line-height: 2em;
- padding-left: 10vw;
}
-.first-view-main {
+@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 {
+ padding-left: 0;
+ text-align: center;
+}
+
+.first-view-main-wrapper {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ padding: 0 10px;
+}
+
+.first-view-main,
+.first-view-main__mascara {
display: flex;
- flex-direction: row-reverse;
+ flex-direction: row;
+ justify-content: flex-start;
+}
+
+.first-view-main__mascara {
justify-content: space-between;
}
+@media screen and (min-width: 1281px) {
+ .first-view-main {
+ width: 62vw;
+ }
+}
+
.mascara-info {
display: flex;
flex-flow: column;
@@ -45,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 {
@@ -81,6 +133,41 @@
width: initial !important;
}
+ .alpha-warning,
+ .alpha-warning-welcome-screen {
+ line-height: 1em;
+ padding: 8px 12px;
+ }
+
+ .first-view-main {
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-evenly;
+ margin-top: 12px;
+ }
+
+ .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;
@@ -135,7 +222,7 @@
}
.backup-phrase {
- max-width: 100%;
+ width: 100%;
}
.create-password__title,
@@ -180,11 +267,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 +299,7 @@
height: 334px;
overflow-y: auto;
color: #757575;
- font-family: Montserrat UltraLight;
+ font-family: Roboto;
font-size: 12px;
line-height: 15px;
text-align: justify;
@@ -221,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 {
@@ -229,15 +327,33 @@
}
.backup-phrase__tips {
- margin: 40px 85px;
+ margin-top: 40px;
width: 285px;
+ flex-grow: .5;
+ min-width: 0;
}
.backup-phrase__tips-text {
color: #5B5D67;
font-size: 16px;
line-height: 23px;
- font-family: Montserrat UltraLight;
+ 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 {
@@ -255,7 +371,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 +400,7 @@
background: none;
box-shadow: none;
color: #FFFFFF;
- font-family: Montserrat Regular;
+ font-family: Roboto;
font-size: 12px;
font-weight: bold;
line-height: 15px;
@@ -294,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 {
@@ -338,7 +458,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 +480,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 +495,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 +510,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 +556,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 +573,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 +594,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 +623,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 +658,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 +670,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 {
@@ -584,6 +704,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;
@@ -608,7 +729,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 +781,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 +829,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 +846,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 +855,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 +874,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 +884,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;
}
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>
)
}
generated by cgit (git 2.34.1) at 2024-10-20 05:46:38 +0800