m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Dark Mode: Network display fix (#14159)

Browse Source
This commit is contained in:
George Marshall 2022-03-23 13:17:53 -07:00 committed by GitHub
parent 60bd757f45
commit 1b9243cd7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 108 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/app/app-header/app-header.component.js
View File

@ -122,8 +122,6 @@ export default class AppHeader extends PureComponent {
{!hideNetworkIndicator && (
<div className="app-header__network-component-wrapper">
<NetworkDisplay
colored={false}
outline
onClick={(event) => this.handleNetworkIndicatorClick(event)}
disabled={disabled || disableNetworkIndicator}
/>

28
ui/components/app/network-display/index.scss
View File

@ -11,34 +11,6 @@
cursor: not-allowed;
}
&--colored {
background-color: lighten(rgb(125, 128, 130), 45%);
}
&--mainnet {
background-color: lighten($blue-lagoon, 68%);
}
&--ropsten {
background-color: lighten($crimson, 45%);
}
&--kovan {
background-color: lighten($purple, 65%);
}
&--rinkeby {
background-color: lighten($tulip-tree, 35%);
}
&--goerli {
background-color: lighten($dodger-blue, 35%);
}
&--localhost {
background-color: lighten($blue-lagoon, 68%);
}
&.chip {
margin: 0;
max-width: 100%;

35
ui/components/app/network-display/network-display.js
View File

@ -20,8 +20,6 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import { isNetworkLoading } from '../../../selectors';
export default function NetworkDisplay({
colored,
outline,
indicatorSize,
disabled,
labelProps,
@ -40,7 +38,7 @@ export default function NetworkDisplay({
return (
<Chip
borderColor={outline ? COLORS.BORDER_MUTED : COLORS.TRANSPARENT}
borderColor={onClick ? COLORS.BORDER_DEFAULT : COLORS.BORDER_MUTED}
onClick={onClick}
leftIcon={
<LoadingIndicator
@ -64,16 +62,18 @@ export default function NetworkDisplay({
/>
</LoadingIndicator>
}
rightIcon={<IconCaretDown size={16} className="network-display__icon" />}
rightIcon={
onClick ? (
<IconCaretDown size={16} className="network-display__icon" />
) : null
}
label={
networkType === NETWORK_TYPE_RPC
? networkNickname ?? t('privateNetwork')
: t(networkType)
}
className={classnames('network-display', {
'network-display--colored': colored,
'network-display--disabled': disabled,
[`network-display--${networkType}`]: colored && networkType,
'network-display--clickable': typeof onClick === 'function',
})}
labelProps={{
@ -84,22 +84,37 @@ export default function NetworkDisplay({
);
}
NetworkDisplay.propTypes = {
colored: PropTypes.bool,
/**
* The size of the indicator
*/
indicatorSize: PropTypes.oneOf(Object.values(SIZES)),
/**
* The label props of the label can use most of the Typography props
*/
labelProps: Chip.propTypes.labelProps,
/**
* The target network
*/
targetNetwork: PropTypes.shape({
type: PropTypes.oneOf([
...Object.values(NETWORK_TYPE_TO_ID_MAP),
...Object.keys(NETWORK_TYPE_TO_ID_MAP),
NETWORK_TYPE_RPC,
]),
nickname: PropTypes.string,
}),
outline: PropTypes.bool,
/**
* Whether the NetworkDisplay is disabled
*/
disabled: PropTypes.bool,
/**
* The onClick event handler of the NetworkDisplay
* if it is not passed it is assumed that the NetworkDisplay
* should not be interactive and removes the caret and changes the border color
* of the NetworkDisplay
*/
onClick: PropTypes.func,
};
NetworkDisplay.defaultProps = {
colored: true,
indicatorSize: SIZES.LG,
};

79
ui/components/app/network-display/network-display.stories.js
View File

@ -1,34 +1,93 @@
import React from 'react';
import {
NETWORK_TYPE_TO_ID_MAP,
NETWORK_TYPE_RPC,
} from '../../../../shared/constants/network';
import { SIZES } from '../../../helpers/constants/design-system';
import NetworkDisplay from '.';
export default {
title: 'Components/App/NetworkDisplay',
id: __filename,
argTypes: {
colored: {
control: 'boolean',
},
indicatorSize: {
control: 'oneOf(Object.values(SIZES))',
control: 'select',
options: Object.values(SIZES),
},
labelProps: {
control: 'labelProps',
},
targetNetwork: {
control: 'object',
},
outline: {
control: 'boolean',
targetNetwork: {
control: 'select',
options: [...Object.keys(NETWORK_TYPE_TO_ID_MAP), NETWORK_TYPE_RPC],
},
disabled: {
control: 'boolean',
},
onClick: {
action: 'onClick',
description:
'The onClick event handler of the NetworkDisplay. If it is not passed it is assumed that the NetworkDisplay SHOULD NOT be interactive and removes the caret and changes the border color of the NetworkDisplay to border-muted',
},
},
args: {
targetNetwork: 'ropsten',
},
};
export const DefaultStory = (args) => <NetworkDisplay {...args} />;
export const DefaultStory = (args) => (
<NetworkDisplay
{...args}
targetNetwork={{
type: args.targetNetwork,
nickname: args.targetNetwork,
}}
/>
);
DefaultStory.storyName = 'Default';
export const TargetNetwork = (args) => {
const targetNetworkArr = [
...Object.keys(NETWORK_TYPE_TO_ID_MAP),
NETWORK_TYPE_RPC,
];
return (
<>
{Object.values(targetNetworkArr).map((variant) => (
<NetworkDisplay
{...args}
key={variant}
targetNetwork={{
type: variant,
nickname: variant,
}}
/>
))}
</>
);
};
export const DisplayOnly = (args) => {
const targetNetworkArr = [
...Object.keys(NETWORK_TYPE_TO_ID_MAP),
NETWORK_TYPE_RPC,
];
return (
<>
{Object.values(targetNetworkArr).map((variant) => (
<NetworkDisplay
{...args}
key={variant}
targetNetwork={{
type: variant,
nickname: variant,
}}
onClick={undefined}
/>
))}
</>
);
};

1
ui/components/app/signature-request/index.scss
View File

@ -17,7 +17,6 @@
flex: 1;
.network-display {
padding: 0;
justify-content: flex-end;
margin-left: auto;
}

2
ui/components/app/signature-request/signature-request-header/signature-request-header.component.js
View File

@ -17,7 +17,7 @@ export default class SignatureRequestHeader extends PureComponent {
{fromAccount ? <AccountListItem account={fromAccount} /> : null}
</div>
<div className="signature-request-header--network">
<NetworkDisplay colored={false} />
<NetworkDisplay />
</div>
</div>
);

11
ui/components/app/signature-request/signature-request-header/signature-request-header.stories.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import SignatureRequestHeader from '.';
export default {
title: 'Components/App/SignatureRequest/SignatureRequestHeader',
id: __filename,
};
export const DefaultStory = () => <SignatureRequestHeader />;
DefaultStory.storyName = 'Default';

6
ui/css/design-system/deprecated-colors.scss
View File

@ -9,10 +9,4 @@ $malibu-blue: #7ac9fd;
$alto: #dedede;
$black: #000;
$white: #fff;
$blue-lagoon: #038789;
$crimson: #e91550;
$purple: #690496;
$tulip-tree: #ebb33f;
$dodger-blue: #3099f2;
$monzo: #d0021b;
$dusty-gray: #9b9b9b;

5
ui/pages/confirmation/confirmation.js
View File

@ -166,7 +166,7 @@ export default function ConfirmationPage() {
setCurrentPendingConfirmation(currentPendingConfirmation - 1)
}
>
<i className="fas fa-chevron-left"></i>
<i className="fas fa-chevron-left" />
</button>
)}
<button
@ -178,7 +178,7 @@ export default function ConfirmationPage() {
setCurrentPendingConfirmation(currentPendingConfirmation + 1)
}
>
<i className="fas fa-chevron-right"></i>
<i className="fas fa-chevron-right" />
</button>
</div>
)}
@ -186,7 +186,6 @@ export default function ConfirmationPage() {
{templatedValues.networkDisplay ? (
<Box justifyContent="center">
<NetworkDisplay
colored={false}
indicatorSize={SIZES.XS}
labelProps={{ color: COLORS.TEXT_DEFAULT }}
/>