mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Fix/14230 dark mode fixes (#14305)
* Dark mode fixes * removing unused icon svg
This commit is contained in:
parent
f088db99a3
commit
8edeb9a281
@ -1,8 +0,0 @@
|
||||
<svg height="32" width="33" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M19.132 2.854l12.44 22.748a3 3 0 01-2.632 4.44H4.06a3 3 0 01-2.632-4.44l12.44-22.748a3 3 0 015.264 0z" stroke="#ff001f" stroke-width="2"/>
|
||||
<g fill="#ff001f">
|
||||
<path d="M15 8h3v13h-3zM15 23h3v3h-3z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 369 B |
@ -97,7 +97,6 @@ export default class AppHeader extends PureComponent {
|
||||
render() {
|
||||
const {
|
||||
history,
|
||||
isUnlocked,
|
||||
hideNetworkIndicator,
|
||||
disableNetworkIndicator,
|
||||
disabled,
|
||||
@ -105,11 +104,7 @@ export default class AppHeader extends PureComponent {
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames('app-header', {
|
||||
'app-header--back-drop': isUnlocked,
|
||||
})}
|
||||
>
|
||||
<div className="app-header">
|
||||
<div className="app-header__contents">
|
||||
<MetaFoxLogo
|
||||
unsetIconHeight
|
||||
|
49
ui/components/app/app-header/app-header.stories.js
Normal file
49
ui/components/app/app-header/app-header.stories.js
Normal file
@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import AppHeader from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/AppHeader',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
history: {
|
||||
control: 'object',
|
||||
},
|
||||
networkDropdownOpen: {
|
||||
control: 'boolean',
|
||||
},
|
||||
showNetworkDropdown: {
|
||||
action: 'showNetworkDropdown',
|
||||
},
|
||||
hideNetworkDropdown: {
|
||||
action: 'hideNetworkDropdown',
|
||||
},
|
||||
toggleAccountMenu: {
|
||||
action: 'toggleAccountMenu',
|
||||
},
|
||||
selectedAddress: {
|
||||
control: 'text',
|
||||
},
|
||||
isUnlocked: {
|
||||
control: 'boolean',
|
||||
},
|
||||
hideNetworkIndicator: {
|
||||
control: 'boolean',
|
||||
},
|
||||
disabled: {
|
||||
control: 'boolean',
|
||||
},
|
||||
disableNetworkIndicator: {
|
||||
control: 'boolean',
|
||||
},
|
||||
isAccountMenuOpen: {
|
||||
control: 'boolean',
|
||||
},
|
||||
onClick: {
|
||||
action: 'onClick',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => <AppHeader {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
@ -16,17 +16,6 @@
|
||||
@media screen and (min-width: $break-large) {
|
||||
height: 75px;
|
||||
justify-content: center;
|
||||
|
||||
&--back-drop {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background: var(--color-background-alternative);
|
||||
bottom: -32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__metafox-logo {
|
||||
|
@ -152,7 +152,7 @@
|
||||
}
|
||||
|
||||
&__warning-container {
|
||||
background: var(--color-warning-muted);
|
||||
background: var(--color-error-muted);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
@ -168,6 +168,7 @@
|
||||
|
||||
&__warning-icon {
|
||||
padding-top: 5px;
|
||||
color: var(--color-error-default);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -89,29 +89,30 @@ input.form-control {
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border: 1px solid var(--color-border-default);
|
||||
color: 1px solid var(--color-text-default);
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
font-weight: 100;
|
||||
color: var(--color-text-alternative);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
font-weight: 100;
|
||||
color: var(--color-text-alternative);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
font-weight: 100;
|
||||
color: var(--color-text-alternative);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
font-weight: 100;
|
||||
color: var(--color-text-alternative);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
&--error {
|
||||
|
@ -40,11 +40,7 @@ class RevealSeedPage extends Component {
|
||||
renderWarning() {
|
||||
return (
|
||||
<div className="page-container__warning-container">
|
||||
<img
|
||||
className="page-container__warning-icon"
|
||||
src="images/warning.svg"
|
||||
alt=""
|
||||
/>
|
||||
<i className="fa fa-exclamation-triangle fa-2x page-container__warning-icon" />
|
||||
<div className="page-container__warning-message">
|
||||
<div className="page-container__warning-title">
|
||||
{this.context.t('revealSeedWordsWarningTitle')}
|
||||
|
22
ui/pages/keychains/reveal-seed.stories.js
Normal file
22
ui/pages/keychains/reveal-seed.stories.js
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import RevealSeedPage from './reveal-seed';
|
||||
|
||||
export default {
|
||||
title: 'Pages/Keychains/RevealSeedPage',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
requestRevealSeedWords: {
|
||||
action: 'requestRevealSeedWords',
|
||||
},
|
||||
history: {
|
||||
control: 'object',
|
||||
},
|
||||
mostRecentOverviewPage: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => <RevealSeedPage {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
Loading…
Reference in New Issue
Block a user