m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +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">
{t('editPermission')}
</div>
<div
className="edit-approval-permission__header__close"
<i
className="fa fa-times fa-lg edit-approval-permission__header__close"
onClick={() => hideModal()}
/>
</div>

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

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