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

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

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