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

Implement Dark Mode Form Fields (#13821)

Browse Source
This commit is contained in:
David Walsh 2022-03-10 10:10:07 -06:00 committed by GitHub
parent 75a8aedc32
commit 5275ec6ac6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/components/ui/form-field/index.scss
View File

@ -18,36 +18,39 @@
&__error, &__error,
&__error h6 { &__error h6 {
color: var(--error-1) !important; color: var(--color-error-default) !important;
padding-top: 6px; padding-top: 6px;
} }
h6 { h6 {
padding-bottom: 6px; padding-bottom: 6px;
margin-inline-end: 6px; margin-inline-end: 6px;
color: var(--color-text-default);
} }
i { i {
color: #dadada; color: var(--color-icon-default);
font-size: $font-size-h7; font-size: $font-size-h7;
} }
&__input { &__input {
width: 100%; width: 100%;
border: solid 1px var(--ui-3);
padding: 10px; padding: 10px;
border-radius: 6px; border-radius: 6px;
background-color: var(--color-background-default);
color: var(--color-text-default);
border: 2px solid var(--color-border-default);
&:focus { &:focus {
border: solid 2px var(--primary-1); border: solid 2px var(--color-primary-default);
} }
&--error { &--error {
border-color: var(--error-1); border-color: var(--color-error-default);
} }
&--warning { &--warning {
border-color: var(--alert-3); border-color: var(--color-warning-default);
} }
} }
} }

4
ui/components/ui/numeric-input/numeric-input.scss
View File

@ -1,5 +1,5 @@
.numeric-input { .numeric-input {
border: 1px solid var(--ui-3); border: 1px solid var(--color-border-default);
position: relative; position: relative;
border-radius: 6px; border-radius: 6px;
@ -12,6 +12,8 @@
border: 0; border: 0;
padding: 10px; padding: 10px;
border-radius: 6px; border-radius: 6px;
background-color: var(--color-background-default);
color: var(--color-text-default);
/* ensures the increment/decrement arrows always display */ /* ensures the increment/decrement arrows always display */
&::-webkit-inner-spin-button, &::-webkit-inner-spin-button,

4
ui/components/ui/text-field/index.scss Normal file
View File

@ -0,0 +1,4 @@
.MuiInput-input,
.MuiInputBase-input {
color: var(--color-text-default) !important;
}

24
ui/components/ui/text-field/text-field.component.js
View File

@ -7,39 +7,42 @@ const inputLabelBase = {
transform: 'none', transform: 'none',
transition: 'none', transition: 'none',
position: 'initial', position: 'initial',
color: '#5b5b5b', color: 'var(--color-text-default)',
}; };
const styles = { const styles = {
materialLabel: { materialLabel: {
'&$materialFocused': { '&$materialFocused': {
color: '#aeaeae', color: 'var(--color-text-alternative)',
}, },
'&$materialError': { '&$materialError': {
color: '#aeaeae', color: 'var(--color-text-alternative)',
}, },
fontWeight: '400', fontWeight: '400',
color: '#aeaeae', color: 'var(--color-text-alternative)',
}, },
materialFocused: {}, materialFocused: {},
materialUnderline: { materialUnderline: {
'&:before': {
borderBottom: '1px solid var(--color-text-default) !important', // Visible bottom border
},
'&:after': { '&:after': {
borderBottom: `2px solid rgb(3, 125, 214)`, borderBottom: `2px solid rgb(3, 125, 214)`, // Animated bottom border
}, },
}, },
materialError: {}, materialError: {},
materialWhitePaddedRoot: { materialWhitePaddedRoot: {
color: '#aeaeae', color: 'var(--color-text-alternative)',
}, },
materialWhitePaddedInput: { materialWhitePaddedInput: {
padding: '8px', padding: '8px',
'&::placeholder': { '&::placeholder': {
color: '#aeaeae', color: 'var(--color-text-alternative)',
}, },
}, },
materialWhitePaddedFocused: { materialWhitePaddedFocused: {
color: '#fff', color: 'var(--color-background-default)',
}, },
materialWhitePaddedUnderline: { materialWhitePaddedUnderline: {
'&:after': { '&:after': {
@ -61,14 +64,15 @@ const styles = {
'label + &': { 'label + &': {
marginTop: '9px', marginTop: '9px',
}, },
border: '1px solid #BBC0C5', border: '1px solid var(--color-border-default)',
color: 'var(--color-text-default)',
height: '48px', height: '48px',
borderRadius: '6px', borderRadius: '6px',
padding: '0 16px', padding: '0 16px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
'&$inputFocused': { '&$inputFocused': {
border: '1px solid #2f9ae0', border: '1px solid var(--color-primary-default)',
}, },
}, },
largeInputLabel: { largeInputLabel: {

1
ui/components/ui/ui-components.scss
View File

@ -48,6 +48,7 @@
@import 'site-origin/index'; @import 'site-origin/index';
@import 'slider/index'; @import 'slider/index';
@import 'tabs/index'; @import 'tabs/index';
@import 'text-field/index';
@import 'toggle-button/index'; @import 'toggle-button/index';
@import 'token-balance/index'; @import 'token-balance/index';
@import 'tooltip/index'; @import 'tooltip/index';