From 9db00fa507c04180f6425cc3b1e3187afa193ab8 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 4 Dec 2017 22:30:11 -0330 Subject: [PATCH] Show user notifications after switch between UIs --- old-ui/app/config.js | 4 +- old-ui/app/css/index.css | 47 +++++++++++++++++ ui/app/actions.js | 4 ++ ui/app/components/modals/modal.js | 37 ++++++++++++++ .../components/modals/notification-modal.js | 51 +++++++++++++++++++ ui/app/css/itcss/components/modal.scss | 36 +++++++++++++ ui/app/css/itcss/components/settings.scss | 5 ++ ui/app/settings.js | 4 +- 8 files changed, 185 insertions(+), 3 deletions(-) create mode 100644 ui/app/components/modals/notification-modal.js diff --git a/old-ui/app/config.js b/old-ui/app/config.js index c698417ba..acd101947 100644 --- a/old-ui/app/config.js +++ b/old-ui/app/config.js @@ -8,7 +8,7 @@ const infuraCurrencies = require('./infura-conversion.json').objects.sort((a, b) }) const validUrl = require('valid-url') const exportAsFile = require('./util').exportAsFile - +const Modal = require('../../ui/app/components/modals/index').Modal module.exports = connect(mapStateToProps)(ConfigScreen) @@ -32,6 +32,8 @@ ConfigScreen.prototype.render = function () { return ( h('.flex-column.flex-grow', [ + h(Modal, {}, []), + // subtitle and nav h('.section-title.flex-row.flex-center', [ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css index 0630c4c12..c2f2b6070 100644 --- a/old-ui/app/css/index.css +++ b/old-ui/app/css/index.css @@ -705,3 +705,50 @@ div.message-container > div:first-child { .pop-hover:hover { transform: scale(1.1); } + +//Notification Modal + +.notification-modal-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; + border: 1px solid #dedede; + box-shadow: 0 0 2px 2px #dedede; + font-family: Roboto; +} + +.notification-modal-header { + background: #f6f6f6; + width: 100%; + display: flex; + justify-content: center; + padding: 30px; + font-size: 22px; + color: #1b344d; + height: 79px; +} + +.notification-modal-message { + padding: 20px; +} + +.notification-modal-message { + width: 100%; + display: flex; + justify-content: center; + font-size: 17px; + color: #1b344d; +} + +.modal-close-x::after { + content: '\00D7'; + font-size: 2em; + color: #9b9b9b; + position: absolute; + top: 25px; + right: 17.5px; + font-family: sans-serif; + cursor: pointer; +} \ No newline at end of file diff --git a/ui/app/actions.js b/ui/app/actions.js index bdacf3092..bba2a014f 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1515,6 +1515,9 @@ function updateTokenExchangeRate (token = '') { } function setFeatureFlag (feature, activated) { + const notificationType = activated + ? 'BETA_UI_NOTIFICATION_MODAL' + : 'OLD_UI_NOTIFICATION_MODAL' return (dispatch) => { dispatch(actions.showLoadingIndication()) return new Promise((resolve, reject) => { @@ -1525,6 +1528,7 @@ function setFeatureFlag (feature, activated) { reject(err) } dispatch(actions.updateFeatureFlags(updatedFeatureFlags)) + dispatch(actions.showModal({ name: notificationType })) resolve(updatedFeatureFlags) }) }) diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index f2909f3c3..2ff6accaa 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -16,6 +16,7 @@ const NewAccountModal = require('./new-account-modal') const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const CustomizeGasModal = require('../customize-gas-modal') +const NotifcationModal = require('./notification-modal') const accountModalStyle = { mobileModalStyle: { @@ -133,6 +134,42 @@ const MODALS = { }, }, + BETA_UI_NOTIFICATION_MODAL: { + contents: [ + h(NotifcationModal, { + header: 'Welcome to the New UI (Beta)', + message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens, + and let us know if you have any issues.`, + }), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '449px', + top: 'calc(33% + 45px)', + }, + }, + + OLD_UI_NOTIFICATION_MODAL: { + contents: [ + h(NotifcationModal, { + header: 'Old UI', + message: `You have returned to the old UI. You can switch back to the New UI through the option in the top + right dropdown menu.`, + }), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '449px', + top: 'calc(33% + 45px)', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js new file mode 100644 index 000000000..239144b0c --- /dev/null +++ b/ui/app/components/modals/notification-modal.js @@ -0,0 +1,51 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const actions = require('../../actions') + +class NotificationModal extends Component { + render () { + const { + header, + message, + } = this.props + + return h('div', [ + h('div.notification-modal-wrapper', { + }, [ + + h('div.notification-modal-header', {}, [ + header, + ]), + + h('div.notification-modal-message-wrapper', {}, [ + h('div.notification-modal-message', {}, [ + message, + ]), + ]), + + h('div.modal-close-x', { + onClick: this.props.hideModal, + }), + + ]), + ]) + } +} + +NotificationModal.propTypes = { + hideModal: PropTypes.func, + header: PropTypes.string, + message: PropTypes.string, +} + +const mapDispatchToProps = dispatch => { + return { + hideModal: () => { + dispatch(actions.hideModal()) + }, + } +} + +module.exports = connect(null, mapDispatchToProps)(NotificationModal) diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index b69bd5c7e..9b64564d6 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -563,3 +563,39 @@ } } } + +//Notification Modal + +.notification-modal-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; + border: 1px solid $alto; + box-shadow: 0 0 2px 2px $alto; + font-family: Roboto; +} + +.notification-modal-header { + background: $wild-sand; + width: 100%; + display: flex; + justify-content: center; + padding: 30px; + font-size: 22px; + color: $nile-blue; + height: 79px; +} + +.notification-modal-message { + padding: 20px; +} + +.notification-modal-message { + width: 100%; + display: flex; + justify-content: center; + font-size: 17px; + color: $nile-blue; +} \ No newline at end of file diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss index 2f29d8017..d60ebd934 100644 --- a/ui/app/css/itcss/components/settings.scss +++ b/ui/app/css/itcss/components/settings.scss @@ -145,6 +145,11 @@ color: $monzo; } +.settings__clear-button--orange { + border: 1px solid rgba(247, 134, 28, 1); + color: rgba(247, 134, 28, 1); +} + .settings__info-logo-wrapper { height: 80px; margin-bottom: 20px; diff --git a/ui/app/settings.js b/ui/app/settings.js index ba59f1c76..ca7535d26 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -228,7 +228,7 @@ class Settings extends Component { ]) ) } - + renderOldUI () { const { setFeatureFlagToBeta } = this.props @@ -237,7 +237,7 @@ class Settings extends Component { h('div.settings__content-item', 'Use old UI'), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button.settings__clear-button--red', { + h('button.settings__clear-button.settings__clear-button--orange', { onClick (event) { event.preventDefault() setFeatureFlagToBeta()