mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Dark mode: icons ens input (#14133)
* Dark mode ens input on send page icons convert to font-awesome * Updating for close in dark mode
This commit is contained in:
George Marshall
GitHub
parent
8683282a6f
commit
8fc5266a8d
@ -1,6 +0,0 @@
|
||||
<svg fill="none" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-rule="evenodd" fill-rule="evenodd">
|
||||
<path d="M.833 10a9.167 9.167 0 1118.334 0A9.167 9.167 0 01.833 10z" fill="#28a745"/>
|
||||
<path d="M14.426 6.702a.833.833 0 010 1.179l-5.173 5.417a.833.833 0 01-1.178 0l-2.5-2.5a.833.833 0 111.178-1.179l1.91 1.91 4.584-4.827a.833.833 0 011.179 0z" fill="#fff"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 414 B |
@ -1,5 +0,0 @@
|
||||
<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-rule="evenodd" fill="#037dd6" fill-rule="evenodd">
|
||||
<path d="M16.32 8H8.64v8h7.68zM8.64 6c-1.06 0-1.92.895-1.92 2v8c0 1.105.86 2 1.92 2h7.68c1.06 0 1.92-.895 1.92-2V8c0-1.105-.86-2-1.92-2zM16.32 1c0-.552.43-1 .96-1h3.84C22.71 0 24 1.343 24 3v4c0 .552-.43 1-.96 1s-.96-.448-.96-1V3c0-.552-.43-1-.96-1h-3.84c-.53 0-.96-.448-.96-1zM23.04 16c.53 0 .96.448.96 1v4c0 1.657-1.29 3-2.88 3h-3.84c-.53 0-.96-.448-.96-1s.43-1 .96-1h3.84c.53 0 .96-.448.96-1v-4c0-.552.43-1 .96-1zM7.68 23c0 .552-.43 1-.96 1H2.88C1.29 24 0 22.657 0 21v-4c0-.552.43-1 .96-1s.96.448.96 1v4c0 .552.43 1 .96 1h3.84c.53 0 .96.448.96 1zM.96 8C.43 8 0 7.552 0 7V3c0-1.657 1.29-3 2.88-3h3.84c.53 0 .96.448.96 1s-.43 1-.96 1H2.88c-.53 0-.96.448-.96 1v4c0 .552-.43 1-.96 1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 848 B |
@ -96,10 +96,16 @@ export default class EnsInput extends Component {
|
||||
'ens-input__wrapper--valid': hasSelectedAddress,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classnames('ens-input__wrapper__status-icon', {
|
||||
'ens-input__wrapper__status-icon--valid': hasSelectedAddress,
|
||||
<i
|
||||
className={classnames('ens-input__wrapper__status-icon', 'fa', {
|
||||
'fa-check-circle': hasSelectedAddress,
|
||||
'fa-search': !hasSelectedAddress,
|
||||
})}
|
||||
style={{
|
||||
color: hasSelectedAddress
|
||||
? 'var(--color-success-default)'
|
||||
: 'var(--color-icon-muted)',
|
||||
}}
|
||||
/>
|
||||
{hasSelectedAddress ? (
|
||||
<>
|
||||
@ -113,10 +119,18 @@ export default class EnsInput extends Component {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="ens-input__wrapper__action-icon ens-input__wrapper__action-icon--erase"
|
||||
<button
|
||||
onClick={this.props.onReset}
|
||||
/>
|
||||
className="ens-input__wrapper__action-icon-button"
|
||||
>
|
||||
<i
|
||||
className="fa fa-times"
|
||||
style={{
|
||||
color: 'var(--color-icon-default)',
|
||||
}}
|
||||
title={t('close')}
|
||||
/>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@ -133,10 +147,7 @@ export default class EnsInput extends Component {
|
||||
data-testid="ens-input"
|
||||
/>
|
||||
<button
|
||||
className={classnames('ens-input__wrapper__action-icon', {
|
||||
'ens-input__wrapper__action-icon--erase': userInput,
|
||||
'ens-input__wrapper__action-icon--qrcode': !userInput,
|
||||
})}
|
||||
className="ens-input__wrapper__action-icon-button"
|
||||
onClick={() => {
|
||||
if (userInput) {
|
||||
this.props.onReset();
|
||||
@ -144,7 +155,20 @@ export default class EnsInput extends Component {
|
||||
this.props.scanQrCode();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<i
|
||||
className={classnames('fa', {
|
||||
'fa-times': userInput,
|
||||
'fa-qrcode': !userInput,
|
||||
})}
|
||||
title={t(userInput ? 'close' : 'scanQrCode')}
|
||||
style={{
|
||||
color: userInput
|
||||
? 'var(--color-icon-default)'
|
||||
: 'var(--color-primary-default)',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -175,20 +175,7 @@
|
||||
}
|
||||
|
||||
&__status-icon {
|
||||
@extend %bg-contain;
|
||||
|
||||
background-image: url('/images/search-black.svg');
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
margin: 0.25rem 0.5rem 0.25rem 0.25rem;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-image: url('/images/search.svg');
|
||||
}
|
||||
|
||||
&--valid {
|
||||
background-image: url('/images/check-green-solid.svg');
|
||||
}
|
||||
margin: 4px 8px 4px 4px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
@ -206,36 +193,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__action-icon {
|
||||
@extend %bg-contain;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&--erase {
|
||||
background-image: url('/images/close-gray.svg');
|
||||
background-color: unset;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
&--qrcode {
|
||||
background-image: url('/images/qr-blue.svg');
|
||||
background-color: unset;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
&__action-icon-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0 8px;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--valid {
|
||||
border-color: var(--color-primary-default);
|
||||
|
||||
.ens-input__wrapper {
|
||||
&__status-icon {
|
||||
background-image: url('/images/check-green-solid.svg');
|
||||
}
|
||||
|
||||
&__input {
|
||||
@extend %col-nowrap;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user