aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--old-ui/app/config.js4
-rw-r--r--old-ui/app/css/index.css47
-rw-r--r--ui/app/actions.js4
-rw-r--r--ui/app/components/modals/modal.js37
-rw-r--r--ui/app/components/modals/notification-modal.js51
-rw-r--r--ui/app/css/itcss/components/modal.scss36
-rw-r--r--ui/app/css/itcss/components/settings.scss5
-rw-r--r--ui/app/settings.js4
8 files changed, 185 insertions, 3 deletions
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()
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 11:21:49 +0800