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

Add accent-color usage from design system. (#9009)

Browse Source
This commit is contained in:
Brad Decker 2020-07-21 11:17:02 -05:00 committed by GitHub
parent e463a47588
commit 35a6ad98b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 16 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
View File

@ -29,7 +29,7 @@
margin-bottom: 16px; margin-bottom: 16px;
padding: 16px; padding: 16px;
font-size: 14px; font-size: 14px;
border: 1px solid #d73a49; border: 1px solid $accent-red;
background: #f8eae8; background: #f8eae8;
border-radius: 3px; border-radius: 3px;
} }

4
ui/app/components/app/connected-accounts-list/index.scss
View File

@ -49,8 +49,8 @@
border-top: 1px solid $geyser; border-top: 1px solid $geyser;
&--highlight { &--highlight {
background-color: $warning-light-yellow; background-color: $Yellow-000;
border: 1px solid $warning-yellow; border: 1px solid $accent-yellow;
box-sizing: border-box; box-sizing: border-box;
padding: 16px; padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;

12
ui/app/components/ui/alert-circle-icon/index.scss
View File

@ -1,13 +1,13 @@
.alert-circle-icon { .alert-circle-icon {
&--danger { &--danger {
border-color: $danger-red; border-color: $accent-red;
color: $danger-red; color: $accent-red;
background: $danger-light-red; background: $Red-000;
} }
&--warning { &--warning {
border-color: $warning-yellow; border-color: $accent-yellow;
color: $warning-yellow; color: $accent-yellow;
background: $warning-light-yellow; background: $Yellow-000;
} }
} }

5
ui/app/components/ui/button/buttons.scss
View File

@ -8,7 +8,6 @@ $hover-confirm: #0372c3;
$hover-red: #feb6bf; $hover-red: #feb6bf;
$hover-red-primary: #c72837; $hover-red-primary: #c72837;
$hover-orange: #ffd3b5; $hover-orange: #ffd3b5;
$danger-light-red: #ea7e77;
$warning-light-orange: #f8b588; $warning-light-orange: #f8b588;
%button { %button {
@ -297,7 +296,7 @@ button.primary {
&--disabled, &--disabled,
&[disabled] { &[disabled] {
border-color: $Red-100; border-color: $Red-100;
color: $danger-light-red; color: $Red-300;
} }
&:active { &:active {
@ -337,7 +336,7 @@ button.primary {
&--disabled, &--disabled,
&[disabled] { &[disabled] {
background-color: $danger-light-red; background-color: $Red-300;
} }
&:active { &:active {

6
ui/app/components/ui/icon/index.scss
View File

@ -2,7 +2,7 @@
margin: 0 4px; margin: 0 4px;
&--success { &--success {
fill: $success-green; fill: $accent-green;
} }
&--info { &--info {
@ -10,10 +10,10 @@
} }
&--warning { &--warning {
fill: $warning-yellow; fill: $accent-yellow;
} }
&--danger { &--danger {
fill: $danger-red; fill: $accent-red;
} }
} }

12
ui/app/css/itcss/settings/variables.scss
View File

@ -46,18 +46,6 @@ $mischka: #dddee9;
$web-orange: #f2a202; $web-orange: #f2a202;
$mercury: #e5e5e5; $mercury: #e5e5e5;
/*
notification and error message colors
*/
$success-green: #28a745;
$success-light-green: #e8f9f1;
$danger-red: #d73a49;
$danger-light-red: #f8eae8;
$info-blue: #037dd6;
$info-light-blue: #e8f4fd;
$warning-yellow: #ffd33d;
$warning-light-yellow: #fefae8;
/* /*
Z-Indicies Z-Indicies
*/ */

1
ui/app/css/variables/colors.scss
View File

@ -56,6 +56,7 @@ $Orange-700: #954005;
$Orange-800: #632b04; $Orange-800: #632b04;
$Orange-900: #321602; $Orange-900: #321602;
$Yellow-000: #fefae8; // Temporary placeholder
$Yellow-100: #fefcde; $Yellow-100: #fefcde;
$Yellow-500: #ffd33d; $Yellow-500: #ffd33d;

2
ui/app/pages/settings/contact-list-tab/index.scss
View File

@ -48,7 +48,7 @@
.button { .button {
justify-content: flex-end; justify-content: flex-end;
color: #d73a49; color: $accent-red;
font-size: 14px; font-size: 14px;
} }
} }