mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-23 02:10:12 +01:00
Dark Mode: Network display fix (#14159)
This commit is contained in:
George Marshall
ryanml
parent
488d5d18d3
commit
24ca3c5aa3
@ -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}
|
||||
/>
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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.UI3 : COLORS.TRANSPARENT}
|
||||
borderColor={onClick ? COLORS.BORDER_DEFAULT : COLORS.BORDER_MUTED}
|
||||
onClick={onClick}
|
||||
leftIcon={
|
||||
<LoadingIndicator
|
||||
@ -60,16 +58,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={{
|
||||
@ -80,22 +80,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,
|
||||
};
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
flex: 1;
|
||||
|
||||
.network-display {
|
||||
padding: 0;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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';
|
||||
@ -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;
|
||||
|
||||
@ -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.BLACK }}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user