diff options
Diffstat (limited to 'mascara')
-rw-r--r-- | mascara/src/app/first-time/backup-phrase-screen.js | 52 | ||||
-rw-r--r-- | mascara/src/app/first-time/create-password-screen.js | 17 | ||||
-rw-r--r-- | mascara/src/app/first-time/import-seed-phrase-screen.js | 129 | ||||
-rw-r--r-- | mascara/src/app/first-time/index.css | 201 | ||||
-rw-r--r-- | mascara/src/app/first-time/notice-screen.js | 46 | ||||
-rw-r--r-- | mascara/src/app/first-time/unique-image-screen.js | 34 |
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> ) } |