Onboarding V2 App Header (#12264)

* Add onboarding app header

ui/components/ui/metafox-logo/metafox-logo.component.js

@@ -8,6 +8,7 @@ export default class MetaFoxLogo extends PureComponent {
     onClick: PropTypes.func,
     unsetIconHeight: PropTypes.bool,
     useDark: PropTypes.bool,
+    isOnboarding: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -16,13 +17,15 @@ export default class MetaFoxLogo extends PureComponent {
   };
 
   render() {
-    const { onClick, unsetIconHeight, useDark } = this.props;
+    const { onClick, unsetIconHeight, useDark, isOnboarding } = this.props;
     const iconProps = unsetIconHeight ? {} : { height: 42, width: 42 };
 
     return (
       <div
         onClick={onClick}
-        className={classnames('app-header__logo-container', {
+        className={classnames({
+          'app-header__logo-container': !isOnboarding,
+          'onboarding-app-header__logo-container': isOnboarding,
           'app-header__logo-container--clickable': Boolean(onClick),
         })}
       >
@@ -33,19 +36,19 @@ export default class MetaFoxLogo extends PureComponent {
               ? getBuildSpecificAsset('metafoxLogoHorizontalDark')
               : './images/logo/metamask-logo-horizontal.svg'
           }
-          className={classnames(
+          className={classnames({
-            'app-header__metafox-logo',
+            'app-header__metafox-logo--horizontal': !isOnboarding,
-            'app-header__metafox-logo--horizontal',
+            'onboarding-app-header__metafox-logo--horizontal': isOnboarding,
-          )}
+          })}
           alt=""
         />
         <img
           {...iconProps}
           src="./images/logo/metamask-fox.svg"
-          className={classnames(
+          className={classnames({
-            'app-header__metafox-logo',
+            'app-header__metafox-logo--icon': !isOnboarding,
-            'app-header__metafox-logo--icon',
+            'onboarding-app-header__metafox-logo--icon': isOnboarding,
-          )}
+          })}
           alt=""
         />
       </div>

ui/pages/onboarding-flow/index.scss

@@ -1,5 +1,6 @@
 @import 'recovery-phrase/index';
 @import 'new-account/index';
+@import 'onboarding-app-header/index';
 
 .onboarding-flow {
   width: 100%;

ui/pages/onboarding-flow/onboarding-app-header/index.scss

@@ -0,0 +1,67 @@
+.onboarding-app-header {
+  align-items: center;
+  background: $white;
+  position: relative;
+  z-index: $header-z-index;
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  flex: 0 0 auto;
+
+  @media screen and (max-width: $break-small) {
+    padding: 1rem;
+    z-index: $mobile-header-z-index;
+  }
+
+  @media screen and (min-width: $break-large) {
+    height: 75px;
+    justify-content: center;
+  }
+
+  &__metafox-logo {
+    &--icon {
+      height: 32px;
+
+      @media screen and (min-width: $break-large) {
+        display: none;
+      }
+    }
+
+    &--horizontal {
+      @media screen and (max-width: $break-small) {
+        display: none;
+      }
+    }
+  }
+
+  &__contents {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    justify-content: space-between;
+
+    @media screen and (max-width: $break-small) {
+      height: 100%;
+    }
+
+    @media screen and (min-width: $break-large) {
+      width: 85vw;
+    }
+
+    @media screen and (min-width: 769px) {
+      width: 90vw;
+    }
+
+    @media screen and (min-width: 1281px) {
+      width: 62vw;
+    }
+  }
+
+  &__logo-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 0 0 auto;
+    margin-right: 1rem;
+  }
+}

ui/pages/onboarding-flow/onboarding-app-header/onboarding-app-header.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import MetaFoxLogo from '../../../components/ui/metafox-logo';
+import Dropdown from '../../../components/ui/dropdown';
+import { getCurrentLocale } from '../../../ducks/metamask/metamask';
+import { updateCurrentLocale } from '../../../store/actions';
+import locales from '../../../../app/_locales/index.json';
+
+export default function OnboardingAppHeader() {
+  const dispatch = useDispatch();
+  const currentLocale = useSelector(getCurrentLocale);
+  const localeOptions = locales.map((locale) => {
+    return {
+      name: locale.name,
+      value: locale.code,
+    };
+  });
+
+  return (
+    <div className="onboarding-app-header">
+      <div className="onboarding-app-header__contents">
+        <MetaFoxLogo unsetIconHeight isOnboarding />
+        <Dropdown
+          id="select-locale"
+          options={localeOptions}
+          selectedOption={currentLocale}
+          onChange={async (newLocale) =>
+            dispatch(updateCurrentLocale(newLocale))
+          }
+        />
+      </div>
+    </div>
+  );
+}

ui/pages/onboarding-flow/onboarding-flow.js

@@ -39,7 +39,7 @@ export default function OnboardingFlow() {
     // For ONBOARDING_V2 dev purposes,
     // Remove when ONBOARDING_V2 dev complete
     if (process.env.ONBOARDING_V2) {
-      history.push(ONBOARDING_CREATE_PASSWORD_ROUTE);
+      history.push(ONBOARDING_REVIEW_SRP_ROUTE);
       return;
     }
 

ui/pages/onboarding-flow/recovery-phrase/index.scss

@@ -1,4 +1,6 @@
 .recovery-phrase {
+  max-width: 600px;
+
   &__tips {
     flex-direction: column;
 
@@ -10,7 +12,7 @@
 
   &__chips {
     display: grid;
-    grid-template-columns: 160px 160px 160px;
+    grid-template-columns: 190px 190px 190px;
     justify-items: center;
     align-items: center;
     row-gap: 16px;

ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js

@@ -23,7 +23,7 @@ export default function RecoveryPhrase({ seedPhrase }) {
   const [copied, handleCopy] = useCopyToClipboard();
   const [seedPhraseRevealed, setSeedPhraseRevealed] = useState(false);
   return (
-    <div>
+    <div className="recovery-phrase">
       <ProgressBar stage="SEED_PHRASE_REVIEW" />
       <Box
         justifyContent={JUSTIFY_CONTENT.CENTER}

ui/pages/routes/routes.component.js

@@ -31,6 +31,7 @@ import AppHeader from '../../components/app/app-header';
 import UnlockPage from '../unlock-page';
 import Alerts from '../../components/app/alerts';
 import Asset from '../asset';
+import OnboardingAppHeader from '../onboarding-flow/onboarding-app-header/onboarding-app-header';
 
 import {
   IMPORT_TOKEN_ROUTE,
@@ -265,6 +266,17 @@ export default class Routes extends Component {
     return isHandlingPermissionsRequest || isHandlingAddEthereumChainRequest;
   }
 
+  showOnboardingHeader() {
+    const { location } = this.props;
+
+    return Boolean(
+      matchPath(location.pathname, {
+        path: ONBOARDING_ROUTE,
+        exact: false,
+      }),
+    );
+  }
+
   render() {
     const {
       isLoading,
@@ -319,6 +331,9 @@ export default class Routes extends Component {
             }
           />
         )}
+        {process.env.ONBOARDING_V2 && this.showOnboardingHeader() && (
+          <OnboardingAppHeader />
+        )}
         <NetworkDropdown
           provider={provider}
           frequentRpcListDetail={frequentRpcListDetail}