Skip to content

Commit

Permalink
Fix the alignment of the account picker
Browse files Browse the repository at this point in the history
  • Loading branch information
darkwing committed Oct 6, 2023
1 parent a940532 commit a14bdd3
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 45 deletions.
8 changes: 7 additions & 1 deletion ui/components/multichain/account-picker/account-picker.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { toChecksumHexAddress } from '@metamask/controller-utils';
import classnames from 'classnames';
import {
Box,
AvatarAccount,
Expand Down Expand Up @@ -32,14 +33,15 @@ export const AccountPicker = ({
name,
onClick,
disabled,
className = '',
showAddress = false,
}) => {
const useBlockie = useSelector(getUseBlockie);
const shortenedAddress = shortenAddress(toChecksumHexAddress(address));

return (
<ButtonBase
className="multichain-account-picker"
className={classnames('multichain-account-picker', className)}
data-testid="account-menu-icon"
onClick={onClick}
backgroundColor={BackgroundColor.transparent}
Expand Down Expand Up @@ -112,4 +114,8 @@ AccountPicker.propTypes = {
* Represents if the account address should display
*/
showAddress: PropTypes.bool,
/**
* CSS class to be added to the root element
*/
className: PropTypes.string,
};
97 changes: 53 additions & 44 deletions ui/components/multichain/app-header/app-header.js
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,9 @@ export const AppHeader = ({ location }) => {
<Box
className={classnames('multichain-app-header__contents', {
'multichain-app-header-shadow': isUnlocked && !popupStatus,
'multichain-app-header__contents--no-network': Boolean(
process.env.MULTICHAIN,
),
})}
alignItems={AlignItems.center}
width={BlockSize.Full}
Expand All @@ -220,52 +223,53 @@ export const AppHeader = ({ location }) => {
gap={2}
>
{popupStatus ? (
<Box className="multichain-app-header__contents__container">
<Box
display={showNetworkPicker ? Display.Flex : Display.None}
>
<Tooltip title={currentNetwork?.nickname} position="right">
<PickerNetwork
avatarNetworkProps={{
backgroundColor: testNetworkBackgroundColor,
}}
className="multichain-app-header__contents--avatar-network"
ref={menuRef}
as="button"
src={currentNetwork?.rpcPrefs?.imageUrl}
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
disabled={disableNetworkPicker}
/>
</Tooltip>
</Box>
<Box
className="multichain-app-header__contents__container"
display={showNetworkPicker ? Display.Flex : Display.None}
>
<Tooltip title={currentNetwork?.nickname} position="right">
<PickerNetwork
avatarNetworkProps={{
backgroundColor: testNetworkBackgroundColor,
}}
className="multichain-app-header__contents--avatar-network"
ref={menuRef}
as="button"
src={currentNetwork?.rpcPrefs?.imageUrl}
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
disabled={disableNetworkPicker}
/>
</Tooltip>
</Box>
) : (
<Box display={showNetworkPicker ? Display.Flex : Display.None}>
<PickerNetwork
avatarNetworkProps={{
backgroundColor: testNetworkBackgroundColor,
}}
margin={2}
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
networkOpenCallback();
}}
display={[Display.None, Display.Flex]} // show on desktop hide on popover
className="multichain-app-header__contents__network-picker"
disabled={disableNetworkPicker}
data-testid="network-display"
/>
</Box>
showNetworkPicker && (
<Box>
<PickerNetwork
avatarNetworkProps={{
backgroundColor: testNetworkBackgroundColor,
}}
margin={2}
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
networkOpenCallback();
}}
display={[Display.None, Display.Flex]} // show on desktop hide on popover
className="multichain-app-header__contents__network-picker"
disabled={disableNetworkPicker}
data-testid="network-display"
/>
</Box>
)
)}
{showProductTour &&
popupStatus &&
Expand Down Expand Up @@ -303,6 +307,11 @@ export const AppHeader = ({ location }) => {
}}
disabled={disableAccountPicker}
showAddress={Boolean(process.env.MULTICHAIN)}
className={classnames({
'multichain-app-header__account-picker': Boolean(
process.env.MULTICHAIN,
),
})}
/>
) : null}
<Box
Expand Down
9 changes: 9 additions & 0 deletions ui/components/multichain/app-header/app-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
grid-template-columns: 1fr 2fr 1fr;
height: 64px;

&--no-network {
grid-template-columns: 2fr 1fr;
}

@include screen-sm-max {
height: $height-screen-sm-max;
}
Expand Down Expand Up @@ -42,6 +46,11 @@
}
}

/* Aligns the Account Picker left when there's no PickerNetwork */
&__account-picker {
justify-self: baseline;
}

&__lock-contents {
flex-flow: row nowrap;
height: 64px;
Expand Down

0 comments on commit a14bdd3

Please sign in to comment.