m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

UX Multichain: Updated header to use picker network in popup view (#19514)

Browse Source 
* updated avatar network to use picker network in popup view

* removed unused locale

* fixed the extra gap

* fixed css

* fixed lint error

* updated aria label
This commit is contained in:
Nidhi Kumari 2023-06-09 21:30:11 +05:30 committed by GitHub
parent 1a8a263cc1
commit f11596710c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,13 +20,11 @@ import {
import {
AlignItems,
BackgroundColor,
BLOCK_SIZES,
DISPLAY,
BlockSize,
Display,
JustifyContent,
Size,
} from '../../../helpers/constants/design-system';
import {
AvatarNetwork,
ButtonIcon,
ButtonIconSize,
IconName,
@ -148,7 +146,7 @@ export const AppHeader = ({ location }) => {
<>
{isUnlocked && !popupStatus ? (
<Box
display={[DISPLAY.NONE, DISPLAY.FLEX]}
display={[Display.None, Display.Flex]}
alignItems={AlignItems.center}
margin={2}
className="multichain-app-header-logo"
@ -166,12 +164,12 @@ export const AppHeader = ({ location }) => {
</Box>
) : null}
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
className={classnames('multichain-app-header', {
'multichain-app-header-shadow': !isUnlocked || popupStatus,
})}
alignItems={AlignItems.center}
width={BLOCK_SIZES.FULL}
width={BlockSize.Full}
backgroundColor={
!isUnlocked || popupStatus
? BackgroundColor.backgroundDefault
@ -185,7 +183,7 @@ export const AppHeader = ({ location }) => {
'multichain-app-header-shadow': isUnlocked && !popupStatus,
})}
alignItems={AlignItems.center}
width={BLOCK_SIZES.FULL}
width={BlockSize.Full}
backgroundColor={BackgroundColor.backgroundDefault}
padding={2}
paddingLeft={4}
@ -195,21 +193,19 @@ export const AppHeader = ({ location }) => {
{popupStatus ? (
<Box className="multichain-app-header__contents__container">
<Tooltip title={currentNetwork?.nickname} position="right">
<AvatarNetwork
<PickerNetwork
className="multichain-app-header__contents--avatar-network"
ref={menuRef}
as="button"
aria-label={t('networkMenu')}
padding={0}
name={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
size={Size.SM}
label={currentNetwork?.nickname}
aria-label={t('networkMenu')}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
networkOpenCallback();
}}
display={[DISPLAY.FLEX, DISPLAY.NONE]} // show on popover hide on desktop
display={[Display.Flex, Display.None]} // show on popover hide on desktop
disabled={disableNetworkPicker}
/>
</Tooltip>
@ -225,7 +221,7 @@ export const AppHeader = ({ location }) => {
e.preventDefault();
networkOpenCallback();
}}
display={[DISPLAY.NONE, DISPLAY.FLEX]} // show on desktop hide on popover
display={[Display.None, Display.Flex]} // show on desktop hide on popover
className="multichain-app-header__contents__network-picker"
disabled={disableNetworkPicker}
data-testid="network-display"
@ -269,11 +265,11 @@ export const AppHeader = ({ location }) => {
/>
) : null}
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.flexEnd}
>
<Box display={DISPLAY.FLEX} gap={4}>
<Box display={Display.Flex} gap={4}>
{showStatus ? (
<Box ref={menuRef}>
<ConnectedStatusIndicator
@ -291,7 +287,7 @@ export const AppHeader = ({ location }) => {
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
custodianIcon && (
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
className="custody-logo"
data-testid="custody-logo"
@ -333,9 +329,9 @@ export const AppHeader = ({ location }) => {
) : null}
<Box
ref={menuRef}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.flexEnd}
width={BLOCK_SIZES.FULL}
width={BlockSize.Full}
>
<ButtonIcon
iconName={IconName.MoreVertical}
@ -390,12 +386,12 @@ export const AppHeader = ({ location }) => {
</Box>
) : (
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
className={classnames('multichain-app-header__lock-contents', {
'multichain-app-header-shadow': isUnlocked && !popupStatus,
})}
alignItems={AlignItems.center}
width={BLOCK_SIZES.FULL}
width={BlockSize.Full}
justifyContent={JustifyContent.spaceBetween}
backgroundColor={BackgroundColor.backgroundDefault}
padding={2}

4
ui/components/multichain/app-header/app-header.scss
View File

@ -33,8 +33,8 @@
max-width: 250px;
}
&--avatar-network {
padding: 0; // TODO: Remove once https://github.com/MetaMask/metamask-extension/pull/17006 is merged
&--avatar-network p {
display: none;
}
&__container {