Show user notifications after switch between UIs

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', {

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;
+}

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)
       })
     })

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, {}, []),

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)

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;
+}

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;

ui/app/settings.js

@@ -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()