Add banner suggesting new UI

2 files changed, 64 insertions, 2 deletions

diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js
index ea04f40f0..4dfedc633 100644
--- a/old-ui/app/components/app-bar.js
+++ b/old-ui/app/components/app-bar.js
@@ -28,6 +28,16 @@ module.exports = class AppBar extends Component {
     provider: PropTypes.any.isRequired,
   }
 
+  static renderSpace () {
+    return (
+      h('span', {
+        dangerouslySetInnerHTML: {
+          __html: ' ',
+        },
+      })
+    )
+  }
+
   state = {
     isNetworkMenuOpen: false,
   }
@@ -52,11 +62,47 @@ module.exports = class AppBar extends Component {
 
     return (
       h('div.app-bar', [
+        this.renderAppBarNewUiNotice(),
         this.renderAppBarAppHeader(),
       ])
     )
   }
 
+  renderAppBarNewUiNotice () {
+    const {dispatch} = this.props
+
+    return (
+      h('div.app-bar__new-ui-banner', {
+        style: {
+          height: '28px',
+          zIndex: 12,
+        },
+      }, [
+        'Try the New MetaMask',
+        AppBar.renderSpace(),
+        h('span.banner__link', {
+          onClick () {
+            dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
+          },
+        }, [
+          'Now',
+        ]),
+        AppBar.renderSpace(),
+        'or',
+        AppBar.renderSpace(),
+        h('span.banner__link', {
+          onClick () {
+            global.platform.openWindow({
+              url: 'https://medium.com/metamask/74dba32cc7f7',
+            })
+          },
+        }, [
+          'Learn More',
+        ]),
+      ])
+    )
+  }
+
   renderAppBarAppHeader () {
     const {
       identities,
@@ -178,7 +224,7 @@ module.exports = class AppBar extends Component {
       style: {
         position: 'absolute',
         left: '2px',
-        top: '36px',
+        top: '64px',
       },
       innerStyle: {
         padding: '2px 16px 2px 0px',
@@ -347,7 +393,7 @@ module.exports = class AppBar extends Component {
       style: {
         position: 'absolute',
         right: '2px',
-        top: '38px',
+        top: '66px',
       },
       innerStyle: {},
     }, [
diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css
index f641e7934..08b3890fd 100644
--- a/old-ui/app/css/index.css
+++ b/old-ui/app/css/index.css
@@ -726,6 +726,22 @@ div.message-container > div:first-child {
   flex-direction: column;
 }
 
+.app-bar__new-ui-banner {
+  background: #33A4E7;
+  color: white;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 8px;
+  font-family: Roboto, Arial, sans-serif;
+  font-weight: 400;
+  width: 100%;
+}
+
+.banner__link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 .notification-modal-wrapper {
   display: flex;
   flex-direction: column;