From b8dec6827127ebd5a1fba19a389a361ebc3a9a4d Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 7 Mar 2018 12:47:33 -0330 Subject: Make new-ui create password screen responsive. --- ui/app/css/itcss/components/newui-sections.scss | 24 ------------------------ 1 file changed, 24 deletions(-) (limited to 'ui') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index ecf5e1036..73faebe8b 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -290,27 +290,3 @@ $wallet-view-bg: $alabaster; .token-balance__amount { padding-right: 6px; } - - -// first time -.first-view-main { - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - - @media screen and (max-width: 575px) { - height: 100%; - } - - @media screen and (min-width: 576px) { - width: 85vw; - } - - @media screen and (min-width: 769px) { - width: 80vw; - } - - @media screen and (min-width: 1281px) { - width: 62vw; - } -} \ No newline at end of file -- cgit v1.2.3 From 91c890041c685db8ff7f7ac87009225fa31b3042 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 8 Mar 2018 14:01:21 -0330 Subject: Add welcome screen to new-ui browser first time flow. --- ui/app/actions.js | 8 ++++ ui/app/app.js | 21 +++++++-- ui/app/css/itcss/components/index.scss | 3 ++ ui/app/css/itcss/components/welcome-screen.scss | 47 ++++++++++++++++++++ ui/app/reducers/metamask.js | 6 +++ ui/app/welcome-screen.js | 57 +++++++++++++++++++++++++ 6 files changed, 139 insertions(+), 3 deletions(-) create mode 100644 ui/app/css/itcss/components/welcome-screen.scss create mode 100644 ui/app/welcome-screen.js (limited to 'ui') diff --git a/ui/app/actions.js b/ui/app/actions.js index 8b1480a79..e1d000f72 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -75,6 +75,8 @@ var actions = { resetAccount, showNewVaultSeed: showNewVaultSeed, showInfoPage: showInfoPage, + CLOSE_WELCOME_SCREEN: 'CLOSE_WELCOME_SCREEN', + closeWelcomeScreen, // seed recovery actions REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION', revealSeedConfirmation: revealSeedConfirmation, @@ -905,6 +907,12 @@ function showNewVaultSeed (seed) { } } +function closeWelcomeScreen () { + return { + type: actions.CLOSE_WELCOME_SCREEN, + } +} + function backToUnlockView () { return { type: actions.BACK_TO_UNLOCK_VIEW, diff --git a/ui/app/app.js b/ui/app/app.js index 4e6da24c3..11b761639 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -12,6 +12,8 @@ const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ethe const OldUIInitializeMenuScreen = require('./first-time/init-menu') const InitializeMenuScreen = MascaraFirstTime const NewKeyChainScreen = require('./new-keychain') +const WelcomeScreen = require('./welcome-screen').default + // accounts const MainContainer = require('./main-container') const SendTransactionScreen2 = require('./components/send/send-v2-container') @@ -91,6 +93,7 @@ function mapStateToProps (state) { betaUI: state.metamask.featureFlags.betaUI, isRevealingSeedWords: state.metamask.isRevealingSeedWords, Qr: state.appState.Qr, + welcomeScreenSeen: state.metamask.welcomeScreenSeen, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -244,6 +247,7 @@ App.prototype.renderAppBar = function () { isInitialized, betaUI, isPopup, + welcomeScreenSeen, } = this.props if (window.METAMASK_UI_TYPE === 'notification') { @@ -269,7 +273,7 @@ App.prototype.renderAppBar = function () { style: {}, }, [ - h('.app-header.flex-row.flex-space-between', { + (isInitialized || welcomeScreenSeen || isPopup || !betaUI) && h('.app-header.flex-row.flex-space-between', { className: classnames({ 'app-header--initialized': !isOnboarding, }), @@ -324,8 +328,12 @@ App.prototype.renderAppBar = function () { ]), ]), - !isInitialized && !isPopup && betaUI && h('h2.alpha-warning', - 'Please be aware that this version is still under development'), + !isInitialized && !isPopup && betaUI && h('h2', { + className: classnames({ + 'alpha-warning': welcomeScreenSeen, + 'alpha-warning-welcome-screen': !welcomeScreenSeen, + }), + }, 'Please be aware that this version is still under development'), ]) ) @@ -369,11 +377,18 @@ App.prototype.renderPrimary = function () { isOnboarding, betaUI, isRevealingSeedWords, + welcomeScreenSeen, Qr, + isInitialized, + isUnlocked, } = props const isMascaraOnboarding = isMascara && isOnboarding const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords + if (!welcomeScreenSeen && isBetaUIOnboarding && !isInitialized && !isUnlocked) { + return h(WelcomeScreen) + } + if (isMascaraOnboarding || isBetaUIOnboarding) { return h(MascaraFirstTime) } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 0219f9fb2..f107b7aca 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -55,3 +55,6 @@ @import './new-account.scss'; @import './tooltip.scss'; + +@import './welcome-screen.scss'; + diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss new file mode 100644 index 000000000..dc8b38399 --- /dev/null +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -0,0 +1,47 @@ +.welcome-screen { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + font-family: Roboto; + font-weight: 400; + width: 100%; + height: 100%; + padding: 70px 0; + background: $white; + + &__info { + display: flex; + flex-flow: column; + width: 100%; + height: 100%; + align-items: center; + + &__header { + font-size: 1.65em; + margin-bottom: 14px; + } + + &__copy { + font-size: 1em; + width: 400px; + max-width: 90vw; + text-align: center; + } + } + + &__button { + height: 54px; + width: 198px; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); + color: #FFFFFF; + font-size: 20px; + font-weight: 500; + line-height: 26px; + text-align: center; + text-transform: uppercase; + margin: 35px 0 14px; + transition: 200ms ease-in-out; + background-color: rgba(247, 134, 28, 0.9); + } +} \ No newline at end of file diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index cddcd0c1f..246d8839b 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -44,6 +44,7 @@ function reduceMetamask (state, action) { featureFlags: {}, networkEndpointType: OLD_UI_NETWORK_TYPE, isRevealingSeedWords: false, + welcomeScreenSeen: false, }, state.metamask) switch (action.type) { @@ -349,6 +350,11 @@ function reduceMetamask (state, action) { networkEndpointType: action.value, }) + case actions.CLOSE_WELCOME_SCREEN: + return extend(metamaskState, { + welcomeScreenSeen: true, + }) + default: return metamaskState diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js new file mode 100644 index 000000000..0c1aced8c --- /dev/null +++ b/ui/app/welcome-screen.js @@ -0,0 +1,57 @@ +import EventEmitter from 'events' +import h from 'react-hyperscript' +import { Component } from 'react' +import PropTypes from 'prop-types' +import {connect} from 'react-redux' +import {closeWelcomeScreen} from './actions' +import Mascot from './components/mascot' + +class WelcomeScreen extends Component { + static propTypes = { + closeWelcomeScreen: PropTypes.func.isRequired, + } + + constructor () { + super() + this.animationEventEmitter = new EventEmitter() + } + + initiateAccountCreation = () => { + this.props.closeWelcomeScreen() + } + + render () { + // t + return h('div.welcome-screen', [ + + h('div.welcome-screen__info', [ + + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + width: '225', + height: '225', + }), + + h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta.'), + + h('div.welcome-screen__info__copy', 'MetaMask is a secure identity vault for Ethereum.'), + + h('div.welcome-screen__info__copy', `It allows you to hold ether & tokens, + and serves as your bridge to decentralized applications.`), + + h('button.welcome-screen__button', { + onClick: this.initiateAccountCreation, + }, 'Continue'), + + ]), + + ]) + } +} + +export default connect( + null, + dispatch => ({ + closeWelcomeScreen: () => dispatch(closeWelcomeScreen()), + }) +)(WelcomeScreen) -- cgit v1.2.3 From 0dad6db9736f2b90000c489b0b452c8d2fa02bb3 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 12 Mar 2018 14:29:26 -0230 Subject: Styling fixes to welcome; hide network component on create password; shown welcoem in popup. --- ui/app/app.js | 4 ++-- ui/app/css/itcss/components/welcome-screen.scss | 4 ++-- ui/app/welcome-screen.js | 7 +++---- 3 files changed, 7 insertions(+), 8 deletions(-) (limited to 'ui') diff --git a/ui/app/app.js b/ui/app/app.js index 11b761639..50514bd3b 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -298,7 +298,7 @@ App.prototype.renderAppBar = function () { ]), ]), - h('div.header__right-actions', [ + betaUI && isInitialized && h('div.header__right-actions', [ h('div.network-component-wrapper', { style: {}, }, [ @@ -385,7 +385,7 @@ App.prototype.renderPrimary = function () { const isMascaraOnboarding = isMascara && isOnboarding const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords - if (!welcomeScreenSeen && isBetaUIOnboarding && !isInitialized && !isUnlocked) { + if (!welcomeScreenSeen && betaUI && !isInitialized && !isUnlocked) { return h(WelcomeScreen) } diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index dc8b38399..86fc7d04d 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -6,7 +6,7 @@ font-family: Roboto; font-weight: 400; width: 100%; - height: 100%; + flex: 1 0 auto; padding: 70px 0; background: $white; @@ -44,4 +44,4 @@ transition: 200ms ease-in-out; background-color: rgba(247, 134, 28, 0.9); } -} \ No newline at end of file +} diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js index 0c1aced8c..cdbb6dba8 100644 --- a/ui/app/welcome-screen.js +++ b/ui/app/welcome-screen.js @@ -11,8 +11,8 @@ class WelcomeScreen extends Component { closeWelcomeScreen: PropTypes.func.isRequired, } - constructor () { - super() + constructor(props) { + super(props) this.animationEventEmitter = new EventEmitter() } @@ -21,7 +21,6 @@ class WelcomeScreen extends Component { } render () { - // t return h('div.welcome-screen', [ h('div.welcome-screen__info', [ @@ -32,7 +31,7 @@ class WelcomeScreen extends Component { height: '225', }), - h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta.'), + h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta'), h('div.welcome-screen__info__copy', 'MetaMask is a secure identity vault for Ethereum.'), -- cgit v1.2.3 From 70f33d47472863e3fce41eff60c1fe078efef7de Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 12 Mar 2018 20:17:44 -0230 Subject: Left align create password. --- ui/app/css/itcss/components/welcome-screen.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'ui') diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index 86fc7d04d..bfd174ad9 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -10,6 +10,10 @@ padding: 70px 0; background: $white; + @media screen and (max-width: 575px) { + padding: 0; + } + &__info { display: flex; flex-flow: column; @@ -20,6 +24,10 @@ &__header { font-size: 1.65em; margin-bottom: 14px; + + @media screen and (max-width: 575px) { + font-size: 1.5em; + } } &__copy { @@ -27,6 +35,10 @@ width: 400px; max-width: 90vw; text-align: center; + + @media screen and (max-width: 575px) { + font-size: 0.9em; + } } } -- cgit v1.2.3