Merge pull request #3332 from danjm/MM-onboarding-flow-style-improvements

[NewUI] Onboarding flow style improvements

3 files changed, 47 insertions, 0 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 58e38a077..5d37b9bdf 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -239,6 +239,9 @@ App.prototype.renderAppBar = function () {
     showNetworkDropdown,
     hideNetworkDropdown,
     currentView,
+    isInitialized,
+    betaUI,
+    isPopup,
   } = this.props
 
   if (window.METAMASK_UI_TYPE === 'notification') {
@@ -285,6 +288,8 @@ App.prototype.renderAppBar = function () {
             // metamask name
             h('h1', 'MetaMask'),
 
+            h('div.beta-label', 'BETA'),
+
           ]),
 
           h('div.header__right-actions', [
@@ -317,6 +322,9 @@ App.prototype.renderAppBar = function () {
         ]),
       ]),
 
+      !isInitialized && !isPopup && betaUI && h('h2.alpha-warning',
+        'Please be aware that this version is still under development'),
+
     ])
   )
 }
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index ac2cecf7e..d91ab3c48 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -76,6 +76,21 @@
   }
 }
 
+.beta-label {
+  font-family: Roboto;
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 0.8rem;
+  padding-left: 9px;
+  color: $buttercup;
+  align-self: flex-start;
+  margin-top: 10px;
+
+  @media screen and (max-width: 575px) {
+    display: none;
+  }
+}
+
 h2.page-subtitle {
   text-transform: uppercase;
   color: #aeaeae;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 73faebe8b..ecf5e1036 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -290,3 +290,27 @@ $wallet-view-bg: $alabaster;
 .token-balance__amount {
   padding-right: 6px;
 }
+
+
+// first time
+.first-view-main {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+
+  @media screen and (max-width: 575px) {
+    height: 100%;
+  }
+
+  @media screen and (min-width: 576px) {
+    width: 85vw;
+  }
+
+  @media screen and (min-width: 769px) {
+    width: 80vw;
+  }
+
+  @media screen and (min-width: 1281px) {
+    width: 62vw;
+  }
+}
\ No newline at end of file