m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Dark mode: Updating lock icon decrypt message (#14198)

Browse Source
This commit is contained in:
George Marshall 2022-03-25 06:37:42 -07:00 committed by GitHub
parent 5564176d72
commit 6688117c7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/images/lock.svg
View File

@ -1,3 +0,0 @@
<svg height="24" viewBox="27.191 0 24.088 24" width="24.088" xmlns="http://www.w3.org/2000/svg">
<path d="M47.576 24H31.588a2 2 0 01-1.998-2.002V11.993c0-1.105.896-2.002 1.998-2.002h1V6.99c0-3.868 3.131-7.004 6.994-7.004s6.995 3.136 6.995 7.004v3.001h.999a2 2 0 011.998 2.002v10.005A2 2 0 0147.576 24zM43.579 6.99c0-2.21-1.79-4.002-3.997-4.002a4 4 0 00-3.997 4.002v3.001h7.994z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 392 B

3
app/images/mm-info-icon.svg
View File

@ -1,3 +0,0 @@
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<path d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z" fill="#b8b8b8"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 223 B

14
ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
View File

@ -177,15 +177,13 @@ export default class ConfirmDecryptMessage extends Component {
{hasError ? errorMessage : ''}
</div>
<div
className={classnames({
'request-decrypt-message__message-cover': true,
className={classnames('request-decrypt-message__message-cover', {
'request-decrypt-message__message-lock--pressed':
hasDecrypted || hasError,
})}
/>
<div
className={classnames({
'request-decrypt-message__message-lock': true,
className={classnames('request-decrypt-message__message-lock', {
'request-decrypt-message__message-lock--pressed':
hasDecrypted || hasError,
})}
@ -207,9 +205,11 @@ export default class ConfirmDecryptMessage extends Component {
});
}}
>
<img src="images/lock.svg" alt="" />
<div className="request-decrypt-message__message-lock-text">
{t('decryptMetamask')}
<div className="request-decrypt-message__message-lock__container">
<i className="fa fa-lock fa-lg request-decrypt-message__message-lock__container__icon" />
<div className="request-decrypt-message__message-lock__container__text">
{t('decryptMetamask')}
</div>
</div>
</div>
</div>

40
ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
View File

@ -92,7 +92,7 @@
}
&__account {
color: var(--color-text-muted);
color: var(--color-text-alternative);
margin-left: 17px;
}
@ -124,7 +124,7 @@
}
&__balance {
color: var(--color-text-muted);
color: var(--color-text-alternative);
margin-right: 17px;
width: 124px;
}
@ -193,13 +193,29 @@
top: 0;
cursor: pointer;
img {
padding: 5px;
&__container {
padding: 16px;
background-color: var(--color-background-default);
left: calc(50% - 24px);
position: absolute;
top: calc(50% - 34px);
left: 50%;
top: 50%;
border-radius: 3px;
transform: translate(-50%, calc(-50%));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&__icon {
color: var(--color-icon-default);
display: flex;
margin-bottom: 16px;
}
&__text {
@include H7;
}
}
&--pressed {
@ -207,18 +223,6 @@
}
}
&-lock-text {
@include H7;
width: 200px;
position: absolute;
top: calc(50% + 5px);
text-align: center;
left: calc(50% - 100px);
background-color: var(--color-background-default);
border-radius: 3px;
}
&-copy {
@include H7;