m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

UX: Multichain: App header cleanups (#18627)

Browse Source 
* UX: Multichain: App header cleanups

* Fix snapshot

---------

Co-authored-by: David Walsh <davidwalsh83@gmail>
This commit is contained in:
David Walsh 2023-04-25 15:39:54 -05:00 committed by GitHub
parent c9336a2ab5
commit ea872946cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
View File

@ -6,7 +6,7 @@ exports[`App Header should match snapshot 1`] = `
class="box multichain-app-header multichain-app-header-shadow box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default"
>
<div
class="box multichain-app-header__lock-contents box--padding-2 box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-background-default"
class="box multichain-app-header__lock-contents box--padding-2 box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-background-default"
>
<button
class="box mm-picker-network box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"

22
ui/components/multichain/app-header/app-header.js
View File

@ -1,4 +1,5 @@
import React, { useContext, useState, useRef } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import browser from 'webextension-polyfill';
import { useDispatch, useSelector } from 'react-redux';
@ -59,6 +60,7 @@ export const AppHeader = ({ onClick }) => {
const history = useHistory();
const isUnlocked = useSelector((state) => state.metamask.isUnlocked);
const t = useI18nContext();
// Used for account picker
const identity = useSelector(getSelectedIdentity);
const dispatch = useDispatch();
@ -105,9 +107,9 @@ export const AppHeader = ({ onClick }) => {
) : null}
<Box
display={DISPLAY.FLEX}
className={`multichain-app-header ${
!isUnlocked || popupStatus ? 'multichain-app-header-shadow' : ''
}`}
className={classnames('multichain-app-header', {
'multichain-app-header-shadow': !isUnlocked || popupStatus,
})}
alignItems={AlignItems.center}
width={BLOCK_SIZES.FULL}
backgroundColor={
@ -119,9 +121,9 @@ export const AppHeader = ({ onClick }) => {
<>
{isUnlocked ? (
<Box
className={`multichain-app-header__contents ${
isUnlocked && !popupStatus ? 'multichain-app-header-shadow' : ''
}`}
className={classnames('multichain-app-header__contents', {
'multichain-app-header-shadow': isUnlocked && !popupStatus,
})}
alignItems={AlignItems.center}
width={BLOCK_SIZES.FULL}
backgroundColor={BackgroundColor.backgroundDefault}
@ -216,7 +218,7 @@ export const AppHeader = ({ onClick }) => {
<ButtonIcon
iconName={IconName.MoreVertical}
data-testid="account-options-menu-button"
ariaLabel="NEEDS NEW TRANSLATED LABEL" // TODO: Update the label
ariaLabel={t('accountOptions')}
onClick={() => {
trackEvent({
event: MetaMetricsEventName.NavAccountMenuOpened,
@ -262,9 +264,9 @@ export const AppHeader = ({ onClick }) => {
) : (
<Box
display={DISPLAY.FLEX}
className={`multichain-app-header__lock-contents ${
isUnlocked && !popupStatus ? 'multichain-app-header-shadow' : ''
}`}
className={classnames('multichain-app-header__lock-contents', {
'multichain-app-header-shadow': isUnlocked && !popupStatus,
})}
alignItems={AlignItems.center}
width={BLOCK_SIZES.FULL}
justifyContent={JustifyContent.spaceBetween}