From a8716db6943cfe5e594085b1771d0f87e766fbdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Oliv=C3=A9?= <albertolivecorbella@gmail.com>
Date: Tue, 18 Jul 2023 15:58:33 +0200
Subject: [PATCH] [MMI] Fix wrong custody logo location (#20072)

* Added missing styles

* updated snapshots

* fixed snapshot

* updated snapshot
---
 .../__snapshots__/app-header.test.js.snap          |  2 +-
 .../multichain/app-header/app-header.scss          | 14 ++++++++++++++
 .../metafox-logo.component.test.js.snap            |  6 +++---
 .../ui/metafox-logo/metafox-logo.component.js      |  2 +-
 .../onboarding-app-header.test.js.snap             |  2 +-
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index 0687107d4..fc0fc5c4b 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -7,7 +7,7 @@ exports[`App Header should match snapshot 1`] = `
     data-testid="app-header-logo"
   >
     <button
-      class="box app-header__logo-container app-header__logo-container--clickable box--flex-direction-row box--background-color-transparent"
+      class="mm-box app-header__logo-container app-header__logo-container--clickable mm-box--background-color-transparent"
       data-testid="app-header-logo"
     >
       <svg
diff --git a/ui/components/multichain/app-header/app-header.scss b/ui/components/multichain/app-header/app-header.scss
index 5ed5a9517..d7d12cbfc 100644
--- a/ui/components/multichain/app-header/app-header.scss
+++ b/ui/components/multichain/app-header/app-header.scss
@@ -73,6 +73,7 @@
   flex: 0 0 auto;
 }
 
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
 .custody-logo {
   @media screen and (max-width: $break-small) {
     display: none;
@@ -84,6 +85,19 @@
   }
 }
 
+.app-header__custody-logo {
+  &--icon {
+    height: 16px;
+    margin-left: 15px;
+    margin-top: 4px;
+
+    @media screen and (min-width: $break-large) {
+      display: none;
+    }
+  }
+}
+///: END:ONLY_INCLUDE_IN
+
 .app-header__metafox-logo {
   &--icon {
     height: 32px;
diff --git a/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap b/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap
index 05928e417..9ce6449af 100644
--- a/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap
+++ b/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap
@@ -3,7 +3,7 @@
 exports[`MetaFoxLogo does match snapshot with custodyImgSrc 1`] = `
 <div>
   <button
-    class="box app-header__logo-container box--flex-direction-row box--background-color-transparent"
+    class="mm-box app-header__logo-container mm-box--background-color-transparent"
     data-testid="app-header-logo"
   >
     <div />
@@ -28,7 +28,7 @@ exports[`MetaFoxLogo does match snapshot with custodyImgSrc 1`] = `
 exports[`MetaFoxLogo does not set icon height and width when unsetIconHeight is true 1`] = `
 <div>
   <button
-    class="box app-header__logo-container box--flex-direction-row box--background-color-transparent"
+    class="mm-box app-header__logo-container mm-box--background-color-transparent"
     data-testid="app-header-logo"
   >
     <div />
@@ -44,7 +44,7 @@ exports[`MetaFoxLogo does not set icon height and width when unsetIconHeight is
 exports[`MetaFoxLogo should match snapshot with img width and height default set to 42 1`] = `
 <div>
   <button
-    class="box app-header__logo-container box--flex-direction-row box--background-color-transparent"
+    class="mm-box app-header__logo-container mm-box--background-color-transparent"
     data-testid="app-header-logo"
   >
     <div />
diff --git a/ui/components/ui/metafox-logo/metafox-logo.component.js b/ui/components/ui/metafox-logo/metafox-logo.component.js
index 25dafd5d8..6853b7857 100644
--- a/ui/components/ui/metafox-logo/metafox-logo.component.js
+++ b/ui/components/ui/metafox-logo/metafox-logo.component.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Box from '../box/box';
+import { Box } from '../../component-library';
 import { BackgroundColor } from '../../../helpers/constants/design-system';
 import MetaFoxHorizontalLogo from './horizontal-logo';
 
diff --git a/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap b/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
index 87b8c7a0f..fbec275c4 100644
--- a/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
+++ b/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
@@ -9,7 +9,7 @@ exports[`OnboardingAppHeader should match snapshot 1`] = `
       class="onboarding-app-header__contents"
     >
       <button
-        class="box onboarding-app-header__logo-container box--flex-direction-row box--background-color-transparent"
+        class="mm-box onboarding-app-header__logo-container mm-box--background-color-transparent"
         data-testid="app-header-logo"
       >
         <svg