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

Dark mode: updating close icon in edit approval permissions modal (#14135)

Browse Source 
* Dark mode udpating close icon in edit approval permissions modal

* Fixing border color

Co-authored-by: David Walsh <davidwalsh83@gmail.com>
This commit is contained in:
George Marshall 2022-03-23 12:49:55 -07:00 committed by GitHub
parent 4c16b583c3
commit 60bd757f45
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/images/close-gray.svg
View File

@ -1,4 +0,0 @@
<svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x=".149" y="1.097" width="1.341" height="15.419" rx=".67" transform="rotate(-45 .15 1.097)" fill="#A1A5B3"/>
<rect x=".948" y="11.851" width="1.341" height="15.419" rx=".67" transform="rotate(-135 .948 11.85)" fill="#A1A5B3"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 324 B

4
ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
View File

@ -54,8 +54,8 @@ export default class EditApprovalPermission extends PureComponent {
<div className="edit-approval-permission__title"> <div className="edit-approval-permission__title">
{t('editPermission')} {t('editPermission')}
</div> </div>
<div <i
className="edit-approval-permission__header__close" className="fa fa-times fa-lg edit-approval-permission__header__close"
onClick={() => hideModal()} onClick={() => hideModal()}
/> />
</div> </div>

24
ui/components/app/modals/edit-approval-permission/index.scss
View File

@ -7,7 +7,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
border-bottom: 1px solid #d2d8dd; border-bottom: 1px solid var(--color-border-muted);
} }
&__header { &__header {
@ -16,10 +16,8 @@
&__close { &__close {
position: absolute; position: absolute;
right: 24px; right: 24px;
background-image: url("/images/close-gray.svg");
width: 0.75rem;
height: 0.75rem;
cursor: pointer; cursor: pointer;
display: block;
} }
} }
@ -38,7 +36,7 @@
@include H6; @include H6;
font-weight: normal; font-weight: normal;
color: #24292e; color: var(--color-text-default);
} }
&__account { &__account {
@ -52,7 +50,7 @@
} }
&__balance { &__balance {
color: #6a737d; color: var(--color-text-alternative);
margin-left: 8px; margin-left: 8px;
} }
} }
@ -64,14 +62,14 @@
@include H6; @include H6;
font-weight: bold; font-weight: bold;
color: #24292e; color: var(--color-text-default);
} }
&__description { &__description {
@include H7; @include H7;
font-weight: normal; font-weight: normal;
color: #6a737d; color: var(--color-text-alternative);
margin-top: 8px; margin-top: 8px;
} }
@ -95,7 +93,7 @@
@include H6; @include H6;
font-weight: normal; font-weight: normal;
color: #474b4d; color: var(--color-text-alternative);
} }
&__option-label--selected { &__option-label--selected {
@ -105,7 +103,7 @@
&__option-description { &__option-description {
@include H7; @include H7;
color: #6a737d; color: var(--color-text-alternative);
margin-top: 8px; margin-top: 8px;
margin-bottom: 6px; margin-bottom: 6px;
} }
@ -113,7 +111,7 @@
&__option-value { &__option-value {
@include H4; @include H4;
color: #24292e; color: var(--color-text-default);
} }
&__radio-button { &__radio-button {
@ -130,7 +128,7 @@
&__radio-button-outline--selected { &__radio-button-outline--selected {
width: 18px; width: 18px;
height: 18px; height: 18px;
background: #dadcdd; background: var(--color-border-default);
border-radius: 9px; border-radius: 9px;
position: absolute; position: absolute;
} }
@ -142,7 +140,7 @@
&__radio-button-fill { &__radio-button-fill {
width: 14px; width: 14px;
height: 14px; height: 14px;
background: white; background: var(--color-background-default);
border-radius: 7px; border-radius: 7px;
position: absolute; position: absolute;
} }