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: Fixed UI updates for header (#19006)

Browse Source 
* Fixed UI updates for header

* updated padding

* replaced grey avatar border with white color and updated snapshots

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>
This commit is contained in:
Nidhi Kumari 2023-05-05 10:51:10 +05:30 committed by GitHub
parent 9062c347db
commit 6f15795c33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 135 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/components/app/connected-status-indicator/connected-status-indicator.js
View File

@ -62,20 +62,22 @@ export default function ConnectedStatusIndicator({ onClick }) {
? t('tooltipSatusConnected')
: t('tooltipSatusNotConnected');
return (
<button className="connected-status-indicator" onClick={onClick}>
<>
{process.env.MULTICHAIN ? (
<MultichainConnectedSiteMenu
status={status}
globalMenuColor={globalMenuColor}
text={tooltipText}
as="button"
onClick={onClick}
/>
) : (
<>
<button className="connected-status-indicator" onClick={onClick}>
<ColorIndicator color={indicatorColor} type={indicatorType} />
<div className="connected-status-indicator__text">{text}</div>
</>
</button>
)}
</button>
</>
);
}

6
ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
View File

@ -9,7 +9,7 @@ exports[`AccountPicker renders properly 1`] = `
class="box mm-text mm-text--inherit mm-text--ellipsis box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--color-primary-inverse"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account 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-border-default box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs 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-background-default box--border-style-solid box--border-width-1"
>
<canvas
height="32"
@ -18,10 +18,10 @@ exports[`AccountPicker renders properly 1`] = `
/>
<img
alt=""
height="24"
height="16"
src="data:image/png;base64,00"
style="border-radius: 50%;"
width="24"
width="16"
/>
</div>
<span

3
ui/components/multichain/account-picker/account-picker.js
View File

@ -42,7 +42,8 @@ export const AccountPicker = ({ address, name, onClick }) => {
: AvatarAccountVariant.Jazzicon
}
address={address}
size={Size.SM}
size={Size.XS}
borderColor={BackgroundColor.backgroundDefault} // we currently don't have white color for border hence using backgroundDefault as the border
/>
<Text as="span" fontWeight={FONT_WEIGHT.BOLD} ellipsis>
{name}

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

@ -25,7 +25,9 @@ import {
import {
AvatarNetwork,
ButtonIcon,
ButtonIconSize,
IconName,
IconSize,
PickerNetwork,
} from '../../component-library';
@ -143,10 +145,11 @@ export const AppHeader = ({ onClick }) => {
width={BLOCK_SIZES.FULL}
backgroundColor={BackgroundColor.backgroundDefault}
padding={2}
paddingLeft={4}
paddingRight={4}
gap={2}
>
<AvatarNetwork
margin={2}
className="multichain-app-header__contents--avatar-network"
ref={menuRef}
as="button"
@ -159,7 +162,6 @@ export const AppHeader = ({ onClick }) => {
display={[DISPLAY.FLEX, DISPLAY.NONE]} // show on popover hide on desktop
/>
<PickerNetwork
margin={2}
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
onClick={networkOpenCallback}
@ -202,96 +204,104 @@ export const AppHeader = ({ onClick }) => {
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween}
justifyContent={JustifyContent.flexEnd}
>
{showStatus ? (
<Box ref={menuRef}>
<ConnectedStatusIndicator
<Box display={DISPLAY.FLEX} gap={4}>
{showStatus ? (
<Box ref={menuRef}>
<ConnectedStatusIndicator
onClick={() => {
history.push(CONNECTED_ACCOUNTS_ROUTE);
trackEvent({
event: MetaMetricsEventName.NavConnectedSitesOpened,
category: MetaMetricsEventCategory.Navigation,
});
}}
/>
</Box>
) : null}{' '}
{popupStatus && multichainProductTourStep === 2 ? (
<ProductTour
className="multichain-app-header__product-tour"
anchorElement={menuRef.current}
closeMenu={() => setAccountOptionsMenuOpen(false)}
prevIcon
title={t('permissionsTitle')}
description={t('permissionsTourDescription')}
currentStep="2"
totalSteps="3"
prevClick={() =>
setMultichainProductTourStep(
multichainProductTourStep - 1,
)
}
onClick={() =>
setMultichainProductTourStep(
multichainProductTourStep + 1,
)
}
positionObj={
productTourDirection === 'rtl' ? '76%' : '12%'
}
productTourDirection={productTourDirection}
/>
) : null}
<Box
ref={menuRef}
display={DISPLAY.FLEX}
justifyContent={JustifyContent.flexEnd}
width={BLOCK_SIZES.FULL}
>
<ButtonIcon
iconName={IconName.MoreVertical}
data-testid="account-options-menu-button"
ariaLabel={t('accountOptions')}
onClick={() => {
history.push(CONNECTED_ACCOUNTS_ROUTE);
trackEvent({
event: MetaMetricsEventName.NavConnectedSitesOpened,
event: MetaMetricsEventName.NavAccountMenuOpened,
category: MetaMetricsEventCategory.Navigation,
properties: {
location: 'Home',
},
});
setAccountOptionsMenuOpen(true);
}}
size={ButtonIconSize.Sm}
iconProps={{ size: IconSize.Sm }}
/>
</Box>
) : null}{' '}
{popupStatus && multichainProductTourStep === 2 ? (
</Box>
{accountOptionsMenuOpen ? (
<GlobalMenu
anchorElement={menuRef.current}
closeMenu={() => setAccountOptionsMenuOpen(false)}
/>
) : null}
{showProductTour &&
popupStatus &&
multichainProductTourStep === 3 ? (
<ProductTour
className="multichain-app-header__product-tour"
anchorElement={menuRef.current}
closeMenu={() => setAccountOptionsMenuOpen(false)}
prevIcon
title={t('permissionsTitle')}
description={t('permissionsTourDescription')}
currentStep="2"
title={t('globalTitle')}
description={t('globalTourDescription')}
currentStep="3"
totalSteps="3"
prevClick={() =>
setMultichainProductTourStep(
multichainProductTourStep - 1,
)
}
onClick={() =>
setMultichainProductTourStep(
multichainProductTourStep + 1,
)
}
positionObj={productTourDirection === 'rtl' ? '74%' : '12%'}
onClick={() => {
hideProductTour();
}}
positionObj={productTourDirection === 'rtl' ? '88%' : '0%'}
productTourDirection={productTourDirection}
/>
) : null}
<Box
ref={menuRef}
display={DISPLAY.FLEX}
justifyContent={JustifyContent.flexEnd}
width={BLOCK_SIZES.FULL}
>
<ButtonIcon
iconName={IconName.MoreVertical}
data-testid="account-options-menu-button"
ariaLabel={t('accountOptions')}
onClick={() => {
trackEvent({
event: MetaMetricsEventName.NavAccountMenuOpened,
category: MetaMetricsEventCategory.Navigation,
properties: {
location: 'Home',
},
});
setAccountOptionsMenuOpen(true);
}}
/>
</Box>
</Box>
{accountOptionsMenuOpen ? (
<GlobalMenu
anchorElement={menuRef.current}
closeMenu={() => setAccountOptionsMenuOpen(false)}
/>
) : null}
{showProductTour &&
popupStatus &&
multichainProductTourStep === 3 ? (
<ProductTour
className="multichain-app-header__product-tour"
anchorElement={menuRef.current}
closeMenu={() => setAccountOptionsMenuOpen(false)}
prevIcon
title={t('globalTitle')}
description={t('globalTourDescription')}
currentStep="3"
totalSteps="3"
prevClick={() =>
setMultichainProductTourStep(multichainProductTourStep - 1)
}
onClick={() => {
hideProductTour();
}}
positionObj={productTourDirection === 'rtl' ? '89%' : '0%'}
productTourDirection={productTourDirection}
/>
) : null}
</Box>
) : (
<Box

24
ui/components/multichain/multichain-connected-site-menu/__snapshots__/multichain-connected-site-menu.test.js.snap
View File

@ -2,8 +2,8 @@
exports[`Multichain Connected Site Menu should render the site menu in connected state 1`] = `
<div>
<div
class="box multichain-connected-site-menu box--flex-direction-row"
<button
class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
data-testid="connection-menu"
>
<div>
@ -19,7 +19,7 @@ exports[`Multichain Connected Site Menu should render the site menu in connected
class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-icon-default"
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
<div
@ -33,14 +33,14 @@ exports[`Multichain Connected Site Menu should render the site menu in connected
</div>
</div>
</div>
</div>
</button>
</div>
`;
exports[`Multichain Connected Site Menu should render the site menu in not connected state 1`] = `
<div>
<div
class="box multichain-connected-site-menu box--flex-direction-row"
<button
class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
data-testid="connection-menu"
>
<div>
@ -56,7 +56,7 @@ exports[`Multichain Connected Site Menu should render the site menu in not conne
class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-icon-default"
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
<div
@ -70,14 +70,14 @@ exports[`Multichain Connected Site Menu should render the site menu in not conne
</div>
</div>
</div>
</div>
</button>
</div>
`;
exports[`Multichain Connected Site Menu should render the site menu in not connected to current account state 1`] = `
<div>
<div
class="box multichain-connected-site-menu box--flex-direction-row"
<button
class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
data-testid="connection-menu"
>
<div>
@ -93,7 +93,7 @@ exports[`Multichain Connected Site Menu should render the site menu in not conne
class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-icon-default"
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
<div
@ -107,6 +107,6 @@ exports[`Multichain Connected Site Menu should render the site menu in not conne
</div>
</div>
</div>
</div>
</button>
</div>
`;

20
ui/components/multichain/multichain-connected-site-menu/index.scss
View File

@ -1,21 +1,25 @@
.multichain-connected-site-menu {
height: 24px;
width: 24px;
padding: 0;
&__badge {
height: 16px;
width: 16px;
height: 12px;
width: 12px;
}
&__badge.not-connected {
height: 10px;
width: 10px;
height: 8px;
width: 8px;
}
&__badge.not-connected::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--color-background-default);
z-index: -1;
border-radius: 50%;

24
ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js
View File

@ -7,13 +7,20 @@ import {
STATUS_NOT_CONNECTED,
} from '../../../helpers/constants/connected-sites';
import {
AlignItems,
BackgroundColor,
BorderColor,
BorderRadius,
DISPLAY,
IconColor,
Size,
JustifyContent,
} from '../../../helpers/constants/design-system';
import { BadgeWrapper, Icon, IconName } from '../../component-library';
import {
BadgeWrapper,
Icon,
IconName,
IconSize,
} from '../../component-library';
import Box from '../../ui/box';
import { getSelectedIdentity } from '../../../selectors';
import Tooltip from '../../ui/tooltip';
@ -24,6 +31,7 @@ export const MultichainConnectedSiteMenu = ({
globalMenuColor,
status,
text,
onClick,
}) => {
const t = useI18nContext();
const selectedAccount = useSelector(getSelectedIdentity);
@ -31,6 +39,12 @@ export const MultichainConnectedSiteMenu = ({
<Box
className={classNames('multichain-connected-site-menu', className)}
data-testid="connection-menu"
as="button"
onClick={onClick}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
backgroundColor={BackgroundColor.backgroundDefault}
>
<Tooltip
title={
@ -69,7 +83,7 @@ export const MultichainConnectedSiteMenu = ({
>
<Icon
name={IconName.Global}
size={Size.LG}
size={IconSize.Sm}
color={IconColor.iconDefault}
/>
</BadgeWrapper>
@ -95,4 +109,8 @@ MultichainConnectedSiteMenu.propTypes = {
* Connection status message
*/
text: PropTypes.string,
/**
* onClick handler to be passed
*/
onClick: PropTypes.func,
};