Fix styling in initialization

app/scripts/popup.js

@@ -26,8 +26,13 @@ const container = document.getElementById('app-content')
 startPopup({ container, connectionStream }, (err, store) => {
   if (err) return displayCriticalError(err)
 
-  let betaUIState = store.getState().metamask.featureFlags.betaUI
-  let css = betaUIState ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
+  const { isMascara, identities = {}, featureFlags = {} } = store.getState().metamask
+  const firstTime = Object.keys(identities).length === 0
+  let betaUIState = featureFlags.betaUI
+
+  const useBetaCss = isMascara || firstTime || betaUIState
+
+  let css = useBetaCss ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
   let deleteInjectedCss = injectCss(css)
   let newBetaUIState
 

ui/app/app.js

@@ -3,6 +3,8 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('./actions')
+const classnames = require('classnames')
+
 // mascara
 const MascaraFirstTime = require('../../mascara/src/app/first-time').default
 const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default
@@ -243,7 +245,9 @@ App.prototype.renderAppBar = function () {
     }, [
 
       h('.app-header.flex-row.flex-space-between', {
-        style: {},
+        className: classnames({
+          'app-header--initialized': !isOnboarding,
+        }),
       }, [
         h('div.app-header-contents', {}, [
           h('div.left-menu-wrapper', {

ui/app/css/itcss/components/header.scss

@@ -17,7 +17,16 @@
   @media screen and (min-width: 576px) {
     height: 75px;
     justify-content: center;
+  }
 
+  .metafox-icon {
+    cursor: pointer;
+  }
+}
+
+.app-header--initialized {
+
+  @media screen and (min-width: 576px) {
     &::after {
       content: '';
       position: absolute;
@@ -27,10 +36,6 @@
       bottom: -32px;
     }
   }
-
-  .metafox-icon {
-    cursor: pointer;
-  }
 }
 
 .app-header-contents {