From d16f25fc20c98ac06b2e13be6f2732d60919a862 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 25 Jul 2018 23:49:57 -0230 Subject: Add NewUiAnnouncement component --- old-ui/app/app.js | 29 ++++++++--- old-ui/app/components/app-bar.js | 4 +- old-ui/app/css/index.css | 106 ++++++++++++++++++++++++++++++++++++++- old-ui/app/new-ui-annoucement.js | 86 +++++++++++++++++++++++++++++++ 4 files changed, 216 insertions(+), 9 deletions(-) create mode 100644 old-ui/app/new-ui-annoucement.js (limited to 'old-ui') diff --git a/old-ui/app/app.js b/old-ui/app/app.js index 4921a29fa..a2606c4ed 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -24,6 +24,7 @@ const ConfigScreen = require('./config') const AddTokenScreen = require('./add-token') const Import = require('./accounts/import') const InfoScreen = require('./info') +const NewUiAnnouncement = require('./new-ui-annoucement') const AppBar = require('./components/app-bar') const Loading = require('./components/loading') const BuyView = require('./components/buy-button-subview') @@ -82,13 +83,29 @@ function mapStateToProps (state) { } App.prototype.render = function () { - var props = this.props - const { isLoading, loadingMessage, transForward, network } = props - const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' - const loadMessage = loadingMessage || isLoadingNetwork ? - `Connecting to ${this.getNetworkName()}` : null + const { + currentView, + dispatch, + isLoading, + loadingMessage, + transForward, + network, + featureFlags, + } = this.props + const isLoadingNetwork = network === 'loading' && currentView.name !== 'config' + const loadMessage = loadingMessage || isLoadingNetwork + ? `Connecting to ${this.getNetworkName()}` + : null log.debug('Main ui render function') + if (!featureFlags.skipAnnounceBetaUI) { + return ( + h(NewUiAnnouncement, { + dispatch, + }) + ) + } + return ( h('.flex-column.full-height', { style: { @@ -99,7 +116,7 @@ App.prototype.render = function () { }, }, [ h(AppBar, { - ...props, + ...this.props, }), this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js index 4dfedc633..e65f942ae 100644 --- a/old-ui/app/components/app-bar.js +++ b/old-ui/app/components/app-bar.js @@ -81,8 +81,8 @@ module.exports = class AppBar extends Component { 'Try the New MetaMask', AppBar.renderSpace(), h('span.banner__link', { - onClick () { - dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) + async onClick () { + await dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) }, }, [ 'Now', diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css index 08b3890fd..d209b4754 100644 --- a/old-ui/app/css/index.css +++ b/old-ui/app/css/index.css @@ -720,6 +720,110 @@ div.message-container > div:first-child { transform: scale(1.1); } +.new-ui-announcement { + display: flex; + flex-direction: column; + height: 100%; + background: white; + color: #4D4D4D; + font-family: Roboto, Arial, sans-serif; + padding: 1.5rem; +} + +.new-ui-announcement__announcement-header { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-bottom: 1rem; +} + +.new-ui-announcement__announcement-header a.close { + cursor: pointer; + font-size: 32px; + line-height: 17px; +} + +.new-ui-announcement__announcement-header a.close:hover { + color: inherit; +} + +.new-ui-announcement__announcement-header h1 { + color: #33A4E7; + text-transform: uppercase; + font-size: 18px; + font-weight: 400; +} + +.new-ui-announcement__body { + display: flex; + flex: 1; + flex-direction: column; + font-size: 10.5pt; + font-weight: 300; +} + +.new-ui-announcement__body h1 { + font-size: 22px; + font-weight: 600; + padding-bottom: 1rem; +} + +.new-ui-announcement__body a { + color: #33A4E7; +} + +.new-ui-announcement__body .updates-list { + padding: .5rem 1rem; +} + +.new-ui-announcement__body .updates-list h2 { + font-weight: 600; +} + +.new-ui-announcement__body .updates-list ul { + list-style: disc inside; +} + +.new-ui-announcement__footer { + display: flex; + flex-direction: column; + align-items: center; +} + +.new-ui-announcement__footer h1 { + font-family: inherit; + font-weight: 600; +} + +.new-ui-announcement__footer button:hover { + transform: none; +} + +.new-ui-announcement__footer button.positive { + padding: 1rem; + margin: 1rem; + background: #33A4E7; + color: white; + text-transform: uppercase; + box-shadow: none; + border-radius: 5px; + font-family: inherit; + font-size: 13px; + font-weight: 400; + width: 90%; +} + +.new-ui-announcement__footer button.negative { + margin: 0; + padding: 0; + background: white; + color: #33A4E7; + font-family: inherit; + font-size: 13px; + font-weight: 400; + box-shadow: none; +} + .app-bar { width: 100%; display: flex; @@ -832,4 +936,4 @@ div.message-container > div:first-child { .notification-modal__link { color: #2f9ae0; -} \ No newline at end of file +} diff --git a/old-ui/app/new-ui-annoucement.js b/old-ui/app/new-ui-annoucement.js new file mode 100644 index 000000000..504016b61 --- /dev/null +++ b/old-ui/app/new-ui-annoucement.js @@ -0,0 +1,86 @@ +const PropTypes = require('prop-types') +const {PureComponent} = require('react') +const h = require('react-hyperscript') +const actions = require('../../ui/app/actions') + +module.exports = class NewUiAnnouncement extends PureComponent { + static propTypes = { + dispatch: PropTypes.func.isRequired, + }; + + close = async () => { + await this.props.dispatch(actions.setFeatureFlag('skipAnnounceBetaUI', true)) + } + + switchToNewUi = async () => { + const flag = 'betaUI' + const enabled = true + const notificationType = 'BETA_UI_NOTIFICATION_MODAL' + await this.props.dispatch(actions.setFeatureFlag( + flag, + enabled, + notificationType, + )) + await this.close() + } + + render () { + return ( + h('div.new-ui-announcement', [ + h('section.new-ui-announcement__announcement-header', [ + h('h1', 'Announcement'), + h('a.close', { + onClick: this.close, + }, '×'), + ]), + h('section.new-ui-announcement__body', [ + h('h1', 'A New Version of MetaMask'), + h('p', [ + "We're excited to announce a brand-new version of MetaMask with enhanced features and functionality.", + ]), + h('div.updates-list', [ + h('h2', 'Updates include'), + h('ul', [ + h('li', 'New user interface'), + h('li', 'Full-screen mode'), + h('li', 'Better token support'), + h('li', 'Better gas controls'), + h('li', 'Advanced features for developers'), + h('li', 'New confirmation screens'), + h('li', 'And more!'), + ]), + ]), + h('p', [ + 'You can still use the current version of MetaMask. The new version is still in beta, ' + + 'however we encourage you to try it out as we transition into this exciting new update.', + h('span', { + dangerouslySetInnerHTML: { + __html: ' ', + }, + }), + h('a', { + href: 'https://medium.com/metamask/74dba32cc7f7', + onClick ({target}) { + const url = target.href + global.platform.openWindow({ + url, + }) + }, + }, [ + 'Learn more.', + ]), + ]), + ]), + h('section.new-ui-announcement__footer', [ + h('h1', 'Ready to try the new MetaMask?'), + h('button.positive', { + onClick: this.switchToNewUi, + }, 'Try it now'), + h('button.negative', { + onClick: this.close, + }, 'No thanks, maybe later'), + ]), + ]) + ) + } +} -- cgit v1.2.3