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

[NewUI] Onboarding flow style improvements

mascara/src/app/first-time/create-password-screen.js

@@ -59,7 +59,6 @@ class CreatePasswordScreen extends Component {
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <h2 className="alpha-warning">Warning: This is Experimental software and is a Developer BETA</h2>
           <div className="first-view-main">
             <div className="mascara-info">
               <Mascot

mascara/src/app/first-time/index.css

@@ -4,13 +4,15 @@
   width: 100vw;
   background-color: #FFF;
   overflow: auto;
+  display: flex;
+  justify-content: center;
 }
 
 .alpha-warning {
   background: #f7861c;
   color: #fff;
   line-height: 2em;
-  padding-left: 2em;
+  padding-left: 10vw;
 }
 
 .first-view-main {
@@ -23,7 +25,6 @@
   display: flex;
   flex-flow: column;
   margin-top: 70px;
-  margin-right: 10vw;
   width: 35vw;
   max-width: 550px;
 }
@@ -48,6 +49,10 @@
   max-width: 35rem;
 }
 
+.create-password {
+  margin: 67px 0 50px 0px;
+}
+
 .import-account {
   max-width: initial;
 }

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'),
+
     ])
   )
 }

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;

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