mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
UX: Multichain: Convert Networks Menu to Modal (#19803)
* UX: Multichain: Convert Networks Menu to Modal * Fix padding * Remove dead CSS * moved show network to bottom * updated snapshot --------- Co-authored-by: NidhiKJha <menidhikjha@gmail.com> Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
parent
64813fb660
commit
4b38a2f054
@ -3,7 +3,7 @@
|
||||
exports[`NetworkListItem renders properly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
|
||||
class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
|
||||
>
|
||||
<div
|
||||
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
|
||||
|
@ -11,6 +11,7 @@ import {
|
||||
TextColor,
|
||||
BackgroundColor,
|
||||
BlockSize,
|
||||
Display,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import {
|
||||
AvatarNetwork,
|
||||
@ -67,6 +68,7 @@ export const NetworkListItem = ({
|
||||
className={classnames('multichain-network-list-item', {
|
||||
'multichain-network-list-item--selected': selected,
|
||||
})}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
justifyContent={JustifyContent.spaceBetween}
|
||||
width={BlockSize.Full}
|
||||
|
@ -1,9 +1,4 @@
|
||||
.multichain-network-list-menu {
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
|
||||
/* Overrides the popover's default behavior */
|
||||
&-content-wrapper {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
import Popover from '../../ui/popover/popover.component';
|
||||
import { NetworkListItem } from '../network-list-item';
|
||||
import {
|
||||
setActiveNetwork,
|
||||
@ -27,6 +26,10 @@ import {
|
||||
import {
|
||||
BUTTON_SECONDARY_SIZES,
|
||||
ButtonSecondary,
|
||||
Modal,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
Box,
|
||||
} from '../../component-library';
|
||||
@ -121,12 +124,20 @@ export const NetworkListMenu = ({ onClose }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
contentClassName="multichain-network-list-menu-content-wrapper"
|
||||
onClose={onClose}
|
||||
centerTitle
|
||||
title={t('networkMenuHeading')}
|
||||
<Modal isOpen onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent
|
||||
className="multichain-network-list-menu-content-wrapper"
|
||||
modalDialogProps={{ padding: 0 }}
|
||||
>
|
||||
<ModalHeader
|
||||
paddingTop={4}
|
||||
paddingRight={4}
|
||||
paddingBottom={6}
|
||||
onClose={onClose}
|
||||
>
|
||||
{t('networkMenuHeading')}
|
||||
</ModalHeader>
|
||||
<>
|
||||
<Box className="multichain-network-list-menu">
|
||||
{generateMenuItems(nonTestNetworks)}
|
||||
@ -183,7 +194,8 @@ export const NetworkListMenu = ({ onClose }) => {
|
||||
</ButtonSecondary>
|
||||
</Box>
|
||||
</>
|
||||
</Popover>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user