mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
Dark Theme setup and button theming (#13651)
* Add design-tokens and apply colors to button * swap more colors * tweak button and add dark theme switch to storybook * tweak buttons * fix typo * remove comments * add dep to ignored list * fix linting issue * fix linting issues * Updating some styles and removing some deprecated buttons (#13742) * Updating some styles and removing some deprecated buttons * Warning button fixes * Fixing warning text for darkmode * bump design tokens and update storybook theme strategy Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
parent
cdb7269443
commit
23e6c073c4
@ -35,6 +35,7 @@ ignores:
|
|||||||
- '@storybook/core'
|
- '@storybook/core'
|
||||||
- '@storybook/addon-essentials'
|
- '@storybook/addon-essentials'
|
||||||
- '@storybook/addon-a11y'
|
- '@storybook/addon-a11y'
|
||||||
|
- 'storybook-dark-mode'
|
||||||
- 'style-loader'
|
- 'style-loader'
|
||||||
- 'css-loader'
|
- 'css-loader'
|
||||||
- 'sass-loader'
|
- 'sass-loader'
|
||||||
|
@ -14,6 +14,7 @@ module.exports = {
|
|||||||
'@storybook/addon-a11y',
|
'@storybook/addon-a11y',
|
||||||
'@storybook/addon-knobs',
|
'@storybook/addon-knobs',
|
||||||
'./i18n-party-addon/register.js',
|
'./i18n-party-addon/register.js',
|
||||||
|
'storybook-dark-mode',
|
||||||
],
|
],
|
||||||
// Uses babel.config.js settings and prevents "Missing class properties transform" error
|
// Uses babel.config.js settings and prevents "Missing class properties transform" error
|
||||||
babel: async (options) => ({ overrides: options.overrides }),
|
babel: async (options) => ({ overrides: options.overrides }),
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { addDecorator, addParameters } from '@storybook/react';
|
import { addDecorator, addParameters } from '@storybook/react';
|
||||||
import { action } from '@storybook/addon-actions';
|
import { action } from '@storybook/addon-actions';
|
||||||
import { Provider } from 'react-redux';
|
import { Provider } from 'react-redux';
|
||||||
@ -13,13 +13,14 @@ import { Router } from 'react-router-dom';
|
|||||||
import { createBrowserHistory } from 'history';
|
import { createBrowserHistory } from 'history';
|
||||||
import { _setBackgroundConnection } from '../ui/store/actions';
|
import { _setBackgroundConnection } from '../ui/store/actions';
|
||||||
import MetaMaskStorybookTheme from './metamask-storybook-theme';
|
import MetaMaskStorybookTheme from './metamask-storybook-theme';
|
||||||
|
import addons from '@storybook/addons';
|
||||||
|
|
||||||
addParameters({
|
addParameters({
|
||||||
backgrounds: {
|
backgrounds: {
|
||||||
default: 'light',
|
default: 'default',
|
||||||
values: [
|
values: [
|
||||||
{ name: 'light', value: '#FFFFFF' },
|
{ name: 'default', value: 'var(--color-background-default)' },
|
||||||
{ name: 'dark', value: '#333333' },
|
{ name: 'alternative', value: 'var(--color-background-alternative)' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
docs: {
|
docs: {
|
||||||
@ -72,8 +73,29 @@ const proxiedBackground = new Proxy(
|
|||||||
_setBackgroundConnection(proxiedBackground);
|
_setBackgroundConnection(proxiedBackground);
|
||||||
|
|
||||||
const metamaskDecorator = (story, context) => {
|
const metamaskDecorator = (story, context) => {
|
||||||
|
const [isDark, setDark] = useState(false);
|
||||||
|
const channel = addons.getChannel();
|
||||||
const currentLocale = context.globals.locale;
|
const currentLocale = context.globals.locale;
|
||||||
const current = allLocales[currentLocale];
|
const current = allLocales[currentLocale];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
channel.on('DARK_MODE', setDark);
|
||||||
|
return () => channel.off('DARK_MODE', setDark);
|
||||||
|
}, [channel, setDark]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||||
|
|
||||||
|
if (!currentTheme)
|
||||||
|
document.documentElement.setAttribute('data-theme', 'light');
|
||||||
|
|
||||||
|
if (currentTheme === 'light' && isDark) {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||||||
|
} else if (currentTheme === 'dark' && !isDark) {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'light');
|
||||||
|
}
|
||||||
|
}, [isDark]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<Router history={history}>
|
<Router history={history}>
|
||||||
|
@ -110,7 +110,7 @@
|
|||||||
"@material-ui/core": "^4.11.0",
|
"@material-ui/core": "^4.11.0",
|
||||||
"@metamask/contract-metadata": "^1.31.0",
|
"@metamask/contract-metadata": "^1.31.0",
|
||||||
"@metamask/controllers": "^25.0.0",
|
"@metamask/controllers": "^25.0.0",
|
||||||
"@metamask/design-tokens": "^1.2.0",
|
"@metamask/design-tokens": "^1.3.0",
|
||||||
"@metamask/eth-ledger-bridge-keyring": "^0.10.0",
|
"@metamask/eth-ledger-bridge-keyring": "^0.10.0",
|
||||||
"@metamask/eth-token-tracker": "^4.0.0",
|
"@metamask/eth-token-tracker": "^4.0.0",
|
||||||
"@metamask/etherscan-link": "^2.1.0",
|
"@metamask/etherscan-link": "^2.1.0",
|
||||||
@ -349,6 +349,7 @@
|
|||||||
"source-map": "^0.7.2",
|
"source-map": "^0.7.2",
|
||||||
"source-map-explorer": "^2.4.2",
|
"source-map-explorer": "^2.4.2",
|
||||||
"squirrelly": "^8.0.8",
|
"squirrelly": "^8.0.8",
|
||||||
|
"storybook-dark-mode": "^1.0.9",
|
||||||
"string.prototype.matchall": "^4.0.2",
|
"string.prototype.matchall": "^4.0.2",
|
||||||
"style-loader": "^0.21.0",
|
"style-loader": "^0.21.0",
|
||||||
"stylelint": "^13.6.1",
|
"stylelint": "^13.6.1",
|
||||||
|
@ -5,11 +5,9 @@ import classnames from 'classnames';
|
|||||||
const CLASSNAME_DEFAULT = 'btn-default';
|
const CLASSNAME_DEFAULT = 'btn-default';
|
||||||
const CLASSNAME_PRIMARY = 'btn-primary';
|
const CLASSNAME_PRIMARY = 'btn-primary';
|
||||||
const CLASSNAME_SECONDARY = 'btn-secondary';
|
const CLASSNAME_SECONDARY = 'btn-secondary';
|
||||||
const CLASSNAME_CONFIRM = 'btn-primary';
|
|
||||||
const CLASSNAME_RAISED = 'btn-raised';
|
const CLASSNAME_RAISED = 'btn-raised';
|
||||||
const CLASSNAME_LARGE = 'btn--large';
|
const CLASSNAME_LARGE = 'btn--large';
|
||||||
const CLASSNAME_ROUNDED = 'btn--rounded';
|
const CLASSNAME_ROUNDED = 'btn--rounded';
|
||||||
const CLASSNAME_FIRST_TIME = 'btn--first-time';
|
|
||||||
const CLASSNAME_INLINE = 'btn--inline';
|
const CLASSNAME_INLINE = 'btn--inline';
|
||||||
|
|
||||||
const typeHash = {
|
const typeHash = {
|
||||||
@ -21,10 +19,7 @@ const typeHash = {
|
|||||||
'danger-primary': 'btn-danger-primary',
|
'danger-primary': 'btn-danger-primary',
|
||||||
link: 'btn-link',
|
link: 'btn-link',
|
||||||
inline: CLASSNAME_INLINE,
|
inline: CLASSNAME_INLINE,
|
||||||
// TODO: Legacy button type to be deprecated
|
|
||||||
confirm: CLASSNAME_CONFIRM,
|
|
||||||
raised: CLASSNAME_RAISED,
|
raised: CLASSNAME_RAISED,
|
||||||
'first-time': CLASSNAME_FIRST_TIME,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const Button = ({
|
const Button = ({
|
||||||
|
@ -70,24 +70,35 @@ export const Type = (args) => (
|
|||||||
<Button {...args} type="default">
|
<Button {...args} type="default">
|
||||||
{args.children || 'Default'}
|
{args.children || 'Default'}
|
||||||
</Button>
|
</Button>
|
||||||
|
<br />
|
||||||
<Button {...args} type="primary">
|
<Button {...args} type="primary">
|
||||||
{args.children || 'Primary'}
|
{args.children || 'Primary'}
|
||||||
</Button>
|
</Button>
|
||||||
|
<br />
|
||||||
<Button {...args} type="secondary">
|
<Button {...args} type="secondary">
|
||||||
{args.children || 'Secondary'}
|
{args.children || 'Secondary'}
|
||||||
</Button>
|
</Button>
|
||||||
|
<br />
|
||||||
<Button {...args} type="warning">
|
<Button {...args} type="warning">
|
||||||
{args.children || 'Warning'}
|
{args.children || 'Warning'}
|
||||||
</Button>
|
</Button>
|
||||||
|
<br />
|
||||||
<Button {...args} type="danger">
|
<Button {...args} type="danger">
|
||||||
{args.children || 'Danger'}
|
{args.children || 'Danger'}
|
||||||
</Button>
|
</Button>
|
||||||
|
<br />
|
||||||
<Button {...args} type="danger-primary">
|
<Button {...args} type="danger-primary">
|
||||||
{args.children || 'Danger primary'}
|
{args.children || 'Danger primary'}
|
||||||
</Button>
|
</Button>
|
||||||
|
<br />
|
||||||
|
<Button {...args} type="raised">
|
||||||
|
{args.children || 'Raised'}
|
||||||
|
</Button>
|
||||||
|
<br />
|
||||||
<Button {...args} type="link">
|
<Button {...args} type="link">
|
||||||
{args.children || 'Link'}
|
{args.children || 'Link'}
|
||||||
</Button>
|
</Button>
|
||||||
|
<br />
|
||||||
<Button {...args} type="inline">
|
<Button {...args} type="inline">
|
||||||
{args.children || 'Inline'}
|
{args.children || 'Inline'}
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -3,14 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
--hover-secondary: #b0d7f2;
|
|
||||||
--hover-default: #b3b3b3;
|
|
||||||
--hover-confirm: #0372c3;
|
|
||||||
--hover-red: #feb6bf;
|
|
||||||
--hover-red-primary: #c72837;
|
|
||||||
--hover-orange: #ffd3b5;
|
|
||||||
--warning-light-orange: #f8b588;
|
|
||||||
|
|
||||||
@include H6;
|
@include H6;
|
||||||
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -38,146 +30,148 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
color: var(--Blue-500);
|
color: var(--color-primary-default);
|
||||||
border: 1px solid var(--hover-secondary);
|
border: 1px solid var(--color-primary-muted);
|
||||||
background-color: var(--white);
|
background-color: var(--color-background-default);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--Blue-500);
|
border-color: var(--color-primary-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: var(--Blue-000);
|
background: var(--color-primary-muted);
|
||||||
border-color: var(--Blue-500);
|
border-color: var(--color-primary-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--hover-secondary);
|
color: var(--color-primary-muted);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-warning {
|
.btn-warning {
|
||||||
color: var(--Orange-500);
|
color: var(--color-text-default);
|
||||||
border: 1px solid var(--hover-orange);
|
border: 1px solid var(--color-warning-default);
|
||||||
background-color: var(--white);
|
background-color: var(--color-background-default);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--Orange-500);
|
border: 1px solid var(--color-warning-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: var(--Orange-000);
|
background: var(--color-warning-muted);
|
||||||
border-color: var(--Orange-500);
|
border: 1px solid var(--color-warning-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--hover-orange);
|
color: var(--color-text-muted);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
color: var(--Red-500);
|
color: var(--color-error-default);
|
||||||
border: 1px solid var(--hover-red);
|
border: 1px solid var(--color-error-muted);
|
||||||
background-color: var(--white);
|
background-color: var(--color-background-default);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--Red-500);
|
border-color: var(--color-error-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: var(--Red-000);
|
background: var(--color-error-muted);
|
||||||
border-color: var(--Red-500);
|
border-color: var(--color-error-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--hover-red);
|
color: var(--color-error-disabled);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger-primary {
|
.btn-danger-primary {
|
||||||
color: var(--white);
|
color: var(--color-error-inverse);
|
||||||
border: 1px solid var(--Red-500);
|
border: 1px solid;
|
||||||
background-color: var(--Red-500);
|
border-color: var(--color-error-default);
|
||||||
|
background-color: var(--color-error-default);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--hover-red-primary);
|
border-color: var(--color-error-alternative);
|
||||||
background-color: var(--hover-red-primary);
|
background-color: var(--color-error-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: var(--Red-600);
|
background: var(--color-error-alternative0);
|
||||||
border-color: var(--Red-600);
|
border-color: var(--color-error-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border-color: var(--hover-red);
|
border-color: var(--color-error-disabled);
|
||||||
background-color: var(--hover-red);
|
background-color: var(--color-error-disabled);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-default {
|
.btn-default {
|
||||||
color: var(--Grey-500);
|
color: var(--color-text-alternative);
|
||||||
border: 1px solid var(--hover-default);
|
border: 1px solid var(--color-border-default);
|
||||||
|
background: var(--color-background-default);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--Grey-500);
|
border-color: var(--color-border-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: #fbfbfc;
|
background: var(--color-background-alternative);
|
||||||
border-color: var(--Grey-500);
|
border-color: var(--color-border-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--hover-default);
|
color: var(--color-text-muted);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
color: var(--white);
|
color: var(--color-background-default);
|
||||||
border: 1px solid var(--Blue-500);
|
border: 1px solid var(--color-primary-default);
|
||||||
background-color: var(--Blue-500);
|
background-color: var(--color-primary-default);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--hover-confirm);
|
border-color: var(--color-primary-alternative);
|
||||||
background-color: var(--hover-confirm);
|
background-color: var(--color-primary-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: var(--Blue-600);
|
background: var(--color-primary-alternative);
|
||||||
border-color: var(--Blue-600);
|
border-color: var(--color-primary-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
border-color: var(--hover-secondary);
|
border-color: var(--color-primary-disabled);
|
||||||
background-color: var(--hover-secondary);
|
background-color: var(--color-primary-disabled);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-link {
|
.btn-link {
|
||||||
@include H4;
|
@include H4;
|
||||||
|
|
||||||
color: var(--Blue-500);
|
color: var(--color-primary-default);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--Blue-400);
|
color: var(--color-primary-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: var(--Blue-600);
|
color: var(--color-primary-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
@ -185,7 +179,7 @@
|
|||||||
cursor: auto;
|
cursor: auto;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
color: var(--hover-secondary);
|
color: var(--color-primary-disabled);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -198,8 +192,8 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.btn-raised {
|
.btn-raised {
|
||||||
color: var(--primary-blue);
|
color: var(--color-primary-default);
|
||||||
background-color: var(--white);
|
background-color: var(--color-background-default);
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
height: initial;
|
height: initial;
|
||||||
@ -208,19 +202,6 @@
|
|||||||
min-width: initial;
|
min-width: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn--first-time {
|
|
||||||
@include H4;
|
|
||||||
|
|
||||||
height: 54px;
|
|
||||||
width: 198px;
|
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
|
|
||||||
color: var(--white);
|
|
||||||
font-weight: 500;
|
|
||||||
transition: 200ms ease-in-out;
|
|
||||||
background-color: rgba(247, 134, 28, 0.9);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button[disabled],
|
button[disabled],
|
||||||
input[type="submit"][disabled] {
|
input[type="submit"][disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
@ -237,84 +218,84 @@ input[type="submit"][disabled] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.btn-secondary {
|
&.btn-secondary {
|
||||||
border: 1px solid var(--Blue-500);
|
border: 1px solid var(--color-primary-default);
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
border-color: var(--hover-secondary);
|
border-color: var(--color-primary-disabled);
|
||||||
color: var(--hover-secondary);
|
color: var(--color-primary-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: var(--Blue-600);
|
border-color: var(--color-primary-alternative);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-default {
|
&.btn-default {
|
||||||
border: 1px solid var(--Grey-500);
|
border: 1px solid var(--color-icon-default);
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
border-color: var(--Grey-100);
|
border-color: var(--color-border-muted);
|
||||||
color: var(--hover-default);
|
color: var(--color-text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: var(--Grey-600);
|
border-color: var(--color-text-alternative);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-danger {
|
&.btn-danger {
|
||||||
border: 1px solid var(--Red-500);
|
border: 1px solid var(--color-error-default);
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
border-color: var(--Red-100);
|
border-color: var(--color-error-disabled);
|
||||||
color: var(--Red-300);
|
color: var(--color-error-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: var(--Red-600);
|
border-color: var(--color-error-alternative);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-warning {
|
&.btn-warning {
|
||||||
border: 1px solid var(--Orange-500);
|
border: 1px solid var(--color-warning-default);
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
border-color: var(--warning-light-orange);
|
border-color: var(--color-warning-alternative);
|
||||||
color: var(--warning-light-orange);
|
color: var(--color-text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: var(--Orange-600);
|
border-color: var(--color-warning-alternative);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-primary {
|
&.btn-primary {
|
||||||
background-color: var(--Blue-500);
|
background-color: var(--color-primary-default);
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
background-color: var(--hover-secondary);
|
background-color: var(--color-primary-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: var(--Blue-600);
|
background-color: var(--color-primary-alternative);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-danger-primary {
|
&.btn-danger-primary {
|
||||||
background-color: var(--Red-500);
|
background-color: var(--color-error-default);
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
background-color: var(--Red-300);
|
background-color: var(--color-error-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: var(--Red-600);
|
background-color: var(--color-error-alternative);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -324,16 +305,16 @@ input[type="submit"][disabled] {
|
|||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
width: auto;
|
width: auto;
|
||||||
color: var(--Blue-500);
|
color: var(--color-primary-default);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--Blue-400);
|
color: var(--color-primary-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: var(--Blue-600);
|
color: var(--color-primary-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--disabled,
|
&--disabled,
|
||||||
@ -341,6 +322,6 @@ input[type="submit"][disabled] {
|
|||||||
cursor: auto;
|
cursor: auto;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
color: var(--hover-secondary);
|
color: var(--color-primary-disabled);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
color: #4d4d4d;
|
color: var(--color-text-default);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -49,10 +49,10 @@ html {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #f7f7f7;
|
background: var(--color-background-alternative);
|
||||||
|
|
||||||
@media screen and (max-width: $break-small) {
|
@media screen and (max-width: $break-small) {
|
||||||
background-color: var(--white);
|
background-color: var(--color-background-default);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* stylelint-enable */
|
/* stylelint-enable */
|
||||||
@ -89,32 +89,32 @@ input.form-control {
|
|||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 1px solid var(--alto);
|
border: 1px solid var(--color-border-muted);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&::-webkit-input-placeholder {
|
&::-webkit-input-placeholder {
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
color: var(--dusty-gray);
|
color: var(--color-text-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-placeholder {
|
&::-moz-placeholder {
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
color: var(--dusty-gray);
|
color: var(--color-text-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:-ms-input-placeholder {
|
&:-ms-input-placeholder {
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
color: var(--dusty-gray);
|
color: var(--color-text-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:-moz-placeholder {
|
&:-moz-placeholder {
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
color: var(--dusty-gray);
|
color: var(--color-text-alternative);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--error {
|
&--error {
|
||||||
border: 1px solid var(--monzo);
|
border: 1px solid var(--color-error-default);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -142,7 +142,7 @@ export default function ItemList({
|
|||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
{result.notImported && (
|
{result.notImported && (
|
||||||
<Button type="confirm" onClick={onClick}>
|
<Button type="primary" onClick={onClick}>
|
||||||
{t('import')}
|
{t('import')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
12
yarn.lock
12
yarn.lock
@ -2707,7 +2707,7 @@
|
|||||||
web3 "^0.20.7"
|
web3 "^0.20.7"
|
||||||
web3-provider-engine "^16.0.3"
|
web3-provider-engine "^16.0.3"
|
||||||
|
|
||||||
"@metamask/design-tokens@^1.2.0":
|
"@metamask/design-tokens@^1.3.0":
|
||||||
version "1.3.0"
|
version "1.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.3.0.tgz#8aa2e065ebe28985b58ebc4282c3d0cfa868cb21"
|
resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.3.0.tgz#8aa2e065ebe28985b58ebc4282c3d0cfa868cb21"
|
||||||
integrity sha512-tr3/xZ1TbuMl3oLNZtY7hKV69bd0X73/fY0zx78JE6urL/8Sqt0hEWKG7FYJF8lIxxCS/wKCok/guBOvJcfTYA==
|
integrity sha512-tr3/xZ1TbuMl3oLNZtY7hKV69bd0X73/fY0zx78JE6urL/8Sqt0hEWKG7FYJF8lIxxCS/wKCok/guBOvJcfTYA==
|
||||||
@ -12040,7 +12040,7 @@ fast-deep-equal@^2.0.1:
|
|||||||
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
|
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
|
||||||
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
|
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
|
||||||
|
|
||||||
fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
|
fast-deep-equal@^3.0.0, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
|
||||||
version "3.1.3"
|
version "3.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
|
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
|
||||||
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
|
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
|
||||||
@ -25255,6 +25255,14 @@ storybook-addon-outline@^1.4.1:
|
|||||||
"@storybook/core-events" "^6.3.0"
|
"@storybook/core-events" "^6.3.0"
|
||||||
ts-dedent "^2.1.1"
|
ts-dedent "^2.1.1"
|
||||||
|
|
||||||
|
storybook-dark-mode@^1.0.9:
|
||||||
|
version "1.0.9"
|
||||||
|
resolved "https://registry.yarnpkg.com/storybook-dark-mode/-/storybook-dark-mode-1.0.9.tgz#40c15aa340bc700df2fb4f1345250e6fdace0b3a"
|
||||||
|
integrity sha512-ITPXM2OSaga1zM5blpZy5HxMWAhrAqYi9aJtLgRtSdgoRrxVNAInDRD14TjmObdgLHNWxINoNbnEB+sKETa+iw==
|
||||||
|
dependencies:
|
||||||
|
fast-deep-equal "^3.0.0"
|
||||||
|
memoizerific "^1.11.3"
|
||||||
|
|
||||||
stream-browserify@^2.0.0, stream-browserify@^2.0.1:
|
stream-browserify@^2.0.0, stream-browserify@^2.0.1:
|
||||||
version "2.0.1"
|
version "2.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
|
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
|
||||||
|
Loading…
Reference in New Issue
Block a user