[MMI] Fix element UI in MMI (#20176)

* Added support for dark mode in metafox logo and removed unused compliance images

* Fixed text elements with wrong alignment and color

* Changed needHelp in mmi

* Updated code

* Improved code

* Updated copies

* Changed logic to fix code fences issues

* Renamed component

app/build-types/mmi/images/icons/compliance.svg

@@ -1,6 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M12.36 6L12.76 8H18V14H14.64L14.24 12H7V6H12.36ZM14 4H5V21H7V14H12.6L13 16H20V6H14.4L14 4Z"
-    fill="black"
-  />
-</svg>

ui/components/multichain/app-header/app-header.js

@@ -44,6 +44,7 @@ import {
   getTestNetworkBackgroundColor,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   getSelectedAddress,
+  getTheme,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../selectors';
 import { GlobalMenu, ProductTour, AccountPicker } from '..';
@@ -79,6 +80,7 @@ export const AppHeader = ({ location }) => {
   const custodianIcon = useSelector((state) =>
     getCustodianIconForAddress(state, selectedAddress),
   );
+  const theme = useSelector((state) => getTheme(state));
   ///: END:ONLY_INCLUDE_IN
 
   // Used for account picker
@@ -171,6 +173,7 @@ export const AppHeader = ({ location }) => {
             ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
             custodyImgSrc={custodianIcon}
             isUnlocked={isUnlocked}
+            theme={theme}
             ///: END:ONLY_INCLUDE_IN
           />
         </Box>

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

@@ -16,6 +16,7 @@ export default class MetaFoxLogo extends PureComponent {
     ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
     custodyImgSrc: PropTypes.string,
     isUnlocked: PropTypes.bool,
+    theme: PropTypes.string,
     ///: END:ONLY_INCLUDE_IN
   };
 
@@ -50,6 +51,7 @@ export default class MetaFoxLogo extends PureComponent {
       ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
       custodyImgSrc,
       isUnlocked,
+      theme,
       ///: END:ONLY_INCLUDE_IN
     } = this.props;
     const iconProps = unsetIconHeight ? {} : { height: 42, width: 42 };
@@ -62,6 +64,9 @@ export default class MetaFoxLogo extends PureComponent {
 
     let renderHorizontalLogo = () => (
       <MetaFoxHorizontalLogo
+        ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+        theme={theme}
+        ///: END:ONLY_INCLUDE_IN
         className={classnames({
           'app-header__metafox-logo--horizontal': !isOnboarding,
           'onboarding-app-header__metafox-logo--horizontal': isOnboarding,

ui/pages/home/home.component.js

@@ -81,6 +81,9 @@ import BetaHomeFooter from './beta/beta-home-footer.component';
 ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
 import FlaskHomeFooter from './flask/flask-home-footer.component';
 ///: END:ONLY_INCLUDE_IN
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import InstitutionalHomeFooter from './institutional/institutional-home-footer';
+///: END:ONLY_INCLUDE_IN
 
 function shouldCloseNotificationPopup({
   isNotification,
@@ -897,7 +900,7 @@ export default class Home extends PureComponent {
                 </Tab>
               </Tabs>
               {
-                ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-mmi)
+                ///: BEGIN:ONLY_INCLUDE_IN(build-main)
                 <ButtonLink
                   size={Size.MD}
                   startIconName={IconName.MessageQuestion}
@@ -930,6 +933,13 @@ export default class Home extends PureComponent {
                 </ButtonLink>
                 ///: END:ONLY_INCLUDE_IN
               }
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+                <InstitutionalHomeFooter
+                  activitySupportDisplayStyle={activitySupportDisplayStyle}
+                />
+                ///: END:ONLY_INCLUDE_IN
+              }
             </Box>
             <div className="home__support">
               {

ui/pages/home/institutional/institutional-home-footer.js

@@ -0,0 +1,59 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  MetaMetricsContextProp,
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { ButtonLink, IconName } from '../../../components/component-library';
+import { Display, Size } from '../../../helpers/constants/design-system';
+
+const InstitutionalHomeFooter = ({ activitySupportDisplayStyle }) => {
+  const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
+
+  return (
+    <ButtonLink
+      size={Size.MD}
+      startIconName={IconName.MessageQuestion}
+      data-testid="need-help-link"
+      href={SUPPORT_LINK}
+      display={Display.Flex}
+      justifyContent={activitySupportDisplayStyle.justifyContent}
+      paddingLeft={activitySupportDisplayStyle.paddingLeft}
+      marginBottom={activitySupportDisplayStyle.marginBottom}
+      marginTop={activitySupportDisplayStyle.marginTop}
+      onClick={() => {
+        trackEvent(
+          {
+            category: MetaMetricsEventCategory.Home,
+            event: MetaMetricsEventName.SupportLinkClicked,
+            properties: {
+              url: SUPPORT_LINK,
+            },
+          },
+          {
+            contextPropsIntoEventProperties: [MetaMetricsContextProp.PageTitle],
+          },
+        );
+      }}
+      externalLink
+    >
+      {`${t('appNameMmi')} ${t('support').toLowerCase()}`}
+    </ButtonLink>
+  );
+};
+
+InstitutionalHomeFooter.propTypes = {
+  activitySupportDisplayStyle: PropTypes.shape({
+    justifyContent: PropTypes.string.isRequired,
+    paddingLeft: PropTypes.string,
+    marginBottom: PropTypes.string,
+    marginTop: PropTypes.string,
+  }).isRequired,
+};
+
+export default InstitutionalHomeFooter;

ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js

@@ -50,16 +50,17 @@ export default function InstitutionalEntityDonePage(props) {
               marginTop={4}
               marginBottom={4}
               color={TextColor.textDefault}
+              textAlign={TextAlign.Left}
             >
               {state.title}
             </Text>
             <Text
               as="p"
-              color={TextColor.textAlternative}
+              color={TextColor.textDefault}
               marginTop={2}
               marginBottom={5}
               variant={TypographyVariant.headingSm}
-              textAlign={TextAlign.Center}
+              textAlign={TextAlign.Left}
             >
               {state.description}
             </Text>

ui/pages/unlock-page/unlock-page.component.js

@@ -155,6 +155,12 @@ export default class UnlockPage extends Component {
     const { t } = this.context;
     const { onRestore } = this.props;
 
+    let needHelpText = t('appNameMmi');
+
+    ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+    needHelpText = t('needHelpLinkText');
+    ///: END:ONLY_INCLUDE_IN
+
     return (
       <div className="unlock-page__container">
         <div className="unlock-page" data-testid="unlock-page">
@@ -222,7 +228,7 @@ export default class UnlockPage extends Component {
                   );
                 }}
               >
-                {t('needHelpLinkText')}
+                {needHelpText}
               </a>,
             ])}
           </div>