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

network & account popover tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2023-06-30 22:54:11 +01:00
parent ea553fcd7f
commit c606431af1
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/components/component-library/header-base/header-base.tsx
View File

@ -67,6 +67,7 @@ export const HeaderBase: React.FC<HeaderBaseProps> = ({
display={DISPLAY.FLEX}
justifyContent={JustifyContent.spaceBetween}
{...props}
padding={1}
>
{startAccessory && (
<Box

2
ui/components/component-library/picker-network/picker-network.js
View File

@ -27,7 +27,7 @@ export const PickerNetwork = ({
<Box
className={classnames('mm-picker-network', className)}
as="button"
backgroundColor={BackgroundColor.backgroundAlternative}
backgroundColor={BackgroundColor.backgroundDefault}
alignItems={AlignItems.center}
paddingLeft={2}
paddingRight={4}

2
ui/components/component-library/popover/popover.tsx
View File

@ -91,7 +91,7 @@ export const Popover = ({
borderColor={BorderColor.borderMuted}
borderRadius={BorderRadius.LG}
backgroundColor={BackgroundColor.backgroundDefault}
padding={4}
padding={2}
role={role}
className={classnames(
'mm-popover',

10
ui/components/multichain/account-list-menu/account-list-menu.js
View File

@ -123,7 +123,7 @@ export const AccountListMenu = ({ onClose }) => {
{actionMode === '' ? (
<Box>
{/* Search box */}
{accounts.length > 1 ? (
{accounts.length > 100 ? (
<Box
paddingLeft={4}
paddingRight={4}
@ -185,7 +185,7 @@ export const AccountListMenu = ({ onClose }) => {
</Box>
{/* Add / Import / Hardware */}
<Box padding={4}>
<Box marginBottom={4}>
<Box>
<ButtonLink
size={Size.SM}
startIconName={IconName.Add}
@ -205,7 +205,7 @@ export const AccountListMenu = ({ onClose }) => {
{t('addAccount')}
</ButtonLink>
</Box>
<Box marginBottom={4}>
<Box>
<ButtonLink
size={Size.SM}
startIconName={IconName.Import}
@ -224,7 +224,7 @@ export const AccountListMenu = ({ onClose }) => {
{t('importAccount')}
</ButtonLink>
</Box>
<Box marginBottom={4}>
<Box>
<ButtonLink
size={Size.SM}
startIconName={IconName.Hardware}
@ -253,7 +253,7 @@ export const AccountListMenu = ({ onClose }) => {
{
///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps)
<>
<Box marginTop={4}>
<Box>
<ButtonLink
size={Size.SM}
startIconName={IconName.Snaps}

1
ui/components/multichain/account-list-menu/index.scss
View File

@ -4,7 +4,6 @@
}
&__list {
max-height: 200px;
overflow: auto;
}
}

1
ui/components/multichain/network-list-menu/index.scss
View File

@ -1,5 +1,4 @@
.multichain-network-list-menu {
max-height: 200px;
overflow: auto;
/* Overrides the popover's default behavior */

17
ui/components/multichain/network-list-menu/network-list-menu.js
View File

@ -23,12 +23,9 @@ import ToggleButton from '../../ui/toggle-button';
import {
Display,
JustifyContent,
Size,
} from '../../../helpers/constants/design-system';
import {
BUTTON_SECONDARY_SIZES,
ButtonSecondary,
Text,
} from '../../component-library';
import { Text, ButtonLink, IconName } from '../../component-library';
import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
@ -158,10 +155,10 @@ export const NetworkListMenu = ({ onClose }) => {
}}
/>
</Box>
<Box padding={4}>
<ButtonSecondary
size={BUTTON_SECONDARY_SIZES.LG}
block
<Box paddingLeft={4} paddingRight={4} paddingBottom={4}>
<ButtonLink
size={Size.SM}
startIconName={IconName.Add}
onClick={() => {
if (isFullScreen) {
if (completedOnboarding) {
@ -182,7 +179,7 @@ export const NetworkListMenu = ({ onClose }) => {
}}
>
{t('addNetwork')}
</ButtonSecondary>
</ButtonLink>
</Box>
</>
</Popover>

2
ui/components/ui/popover/popover.component.js
View File

@ -85,6 +85,7 @@ const Popover = ({
<Box
{...{ ...defaultHeaderProps, ...headerProps }}
className="popover-header"
padding={4}
>
<Box
display={DISPLAY.FLEX}
@ -93,7 +94,6 @@ const Popover = ({
className={classnames('popover-header__title', {
'popover-header__title--center': centerTitle,
})}
marginBottom={2}
>
{onBack ? (
<ButtonIcon