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

Dark Mode: more icon updates (#14064)

Browse Source 
* Updating settings icons to use fontawesome and removing unused svgs

* Updating more icons to use font-awesome icons and removing unused svgs
This commit is contained in:
George Marshall 2022-03-21 08:29:57 -07:00 committed by GitHub
parent 1c008eb966
commit 8ef28702f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 48 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/images/address-book.svg
View File

@ -1 +0,0 @@
<svg width="56" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M54.5 20c.75 0 1.5-.625 1.5-1.5v-5c0-.75-.75-1.5-1.5-1.5H52V6c0-3.25-2.75-6-6-6H6C2.625 0 0 2.75 0 6v52c0 3.375 2.625 6 6 6h40c3.25 0 6-2.625 6-6v-6h2.5c.75 0 1.5-.625 1.5-1.5v-5c0-.75-.75-1.5-1.5-1.5H52v-8h2.5c.75 0 1.5-.625 1.5-1.5v-5c0-.75-.75-1.5-1.5-1.5H52v-8h2.5zM26 16c4.375 0 8 3.625 8 8 0 4.5-3.625 8-8 8-4.5 0-8-3.5-8-8 0-4.375 3.5-8 8-8zm14 29.625C40 47 38.75 48 37.125 48H14.75c-1.5 0-2.75-1-2.75-2.375V43.25c0-4 3.75-7.25 8.375-7.25H21c1.5.75 3.125 1 5 1 1.75 0 3.375-.25 4.875-1h.625c4.625 0 8.5 3.25 8.5 7.25v2.375z" fill="#D6D9DC"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 638 B

9
app/images/alert-red.svg
View File

@ -1,9 +0,0 @@
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<circle cx="8" cy="8" fill="#d0021b" r="8"/>
<g fill="#fff">
<rect height="7" rx="1" width="2" x="7" y="3"/>
<rect height="2" rx="1" width="2" x="7" y="11"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 331 B

6
app/images/alert.svg
View File

@ -1,6 +0,0 @@
<svg height="29" width="29" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<circle cx="14.5" cy="14.5" fill="#605a1c" r="14.5"/>
<path d="M16 16.828h-2V7h2zM16 21h-2v-2h2z" fill="#fffcdb"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 251 B

3
app/images/arrow-popout.svg
View File

@ -1,3 +0,0 @@
<svg fill="none" height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<path d="M8.676.642a.65.65 0 00-.072.006H4.793a.65.65 0 00-.57.975.65.65 0 00.57.322H7.12L.438 8.614a.647.647 0 00.286 1.096.65.65 0 00.632-.179L8.04 2.861v2.324a.648.648 0 00.977.57.648.648 0 00.322-.57V1.38a.647.647 0 00-.662-.737z" fill="#359bdd"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 339 B

3
app/images/arrow-right.svg
View File

@ -1,3 +0,0 @@
<svg height="21" width="25" xmlns="http://www.w3.org/2000/svg">
<path d="M12.281.467a1.58 1.58 0 000 2.259l5.824 5.743H1.62a1.61 1.61 0 00-1.62 1.597v.001c0 .882.726 1.596 1.62 1.596h16.486l-5.824 5.745a1.58 1.58 0 000 2.258 1.637 1.637 0 002.29 0l9.734-9.6L14.571.467a1.637 1.637 0 00-2.29 0" fill="#5b5b5b" fill-rule="evenodd"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 342 B

3
app/images/check_circle.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.75 8C15.75 3.75 12.25 0.25 8 0.25C3.71875 0.25 0.25 3.75 0.25 8C0.25 12.2812 3.71875 15.75 8 15.75C12.25 15.75 15.75 12.2812 15.75 8ZM7.09375 12.125C6.90625 12.3125 6.5625 12.3125 6.375 12.125L3.125 8.875C2.9375 8.6875 2.9375 8.34375 3.125 8.15625L3.84375 7.46875C4.03125 7.25 4.34375 7.25 4.53125 7.46875L6.75 9.65625L11.4375 4.96875C11.625 4.75 11.9375 4.75 12.125 4.96875L12.8438 5.65625C13.0312 5.84375 13.0312 6.1875 12.8438 6.375L7.09375 12.125Z" fill="#4CD964"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 586 B

6
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
View File

@ -4,11 +4,7 @@ import PropTypes from 'prop-types';
const ConfirmPageContainerWarning = (props) => {
return (
<div className="confirm-page-container-warning">
<img
className="confirm-page-container-warning__icon"
src="./images/alert.svg"
alt=""
/>
<i className="fa fa-info-circle confirm-page-container-warning__icon" />
<div className="confirm-page-container-warning__warning">
{props.warning}
</div>

19
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import ConfirmPageContainerWarning from '.';
export default {
title: 'Components/UI/ConfirmPageContainerWarning', // title should follow the folder structure location of the component. Don't use spaces.
id: __filename,
argTypes: {
warning: {
control: 'text',
},
},
args: {
warning: 'This is a warning',
},
};
export const DefaultStory = (args) => <ConfirmPageContainerWarning {...args} />;
DefaultStory.storyName = 'Default';

5
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
View File

@ -7,12 +7,13 @@
&__icon {
flex: 0 0 auto;
margin-right: 16px;
margin-right: 8px;
color: var(--color-warning-default);
}
&__warning {
@include H7;
color: var(--color-warning-default);
color: var(--color-text-default);
}
}

6
ui/components/ui/error-message/error-message.component.js
View File

@ -7,11 +7,7 @@ const ErrorMessage = (props, context) => {
return (
<div className="error-message">
<img
src="./images/alert-red.svg"
alt=""
className="error-message__icon"
/>
<i className="fa fa-exclamation-circle error-message__icon" />
<div className="error-message__text">{error}</div>
</div>
);

7
ui/components/ui/error-message/index.scss
View File

@ -2,9 +2,9 @@
@include H7;
min-height: 32px;
border: 1px solid var(--Red-300);
color: var(--ui-black);
background: var(--error-2);
border: 1px solid var(--color-error-default);
color: var(--color-text-default);
background-color: var(--color-error-muted);
border-radius: 8px;
display: flex;
justify-content: flex-start;
@ -14,6 +14,7 @@
&__icon {
margin-right: 8px;
flex: 0 0 auto;
color: var(--color-error-default);
}
&__text {

4
ui/components/ui/sender-to-recipient/index.scss
View File

@ -66,6 +66,10 @@
display: flex;
justify-content: center;
align-items: center;
&__icon {
color: var(--color-icon-muted);
}
}
&__name {

2
ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
View File

@ -155,7 +155,7 @@ function Arrow({ variant }) {
return variant === DEFAULT_VARIANT ? (
<div className="sender-to-recipient__arrow-container">
<div className="sender-to-recipient__arrow-circle">
<img height="15" width="15" src="./images/arrow-right.svg" alt="" />
<i className="fa fa-arrow-right sender-to-recipient__arrow-circle__icon" />
</div>
</div>
) : (

10
ui/pages/home/home.component.js
View File

@ -309,10 +309,7 @@ export default class Home extends PureComponent {
className="home__new-network-notification"
message={
<div className="home__new-network-notification-message">
<img
src="./images/check_circle.svg"
className="home__new-network-notification-message--image"
/>
<i className="fa fa-check-circle home__new-network-notification-message--icon" />
<Typography
variant={TYPOGRAPHY.H7}
fontWeight={FONT_WEIGHT.NORMAL}
@ -334,10 +331,7 @@ export default class Home extends PureComponent {
className="home__new-network-notification"
message={
<div className="home__new-network-notification-message">
<img
src="./images/check_circle.svg"
className="home__new-network-notification-message--image"
/>
<i className="fa fa-check-circle home__new-network-notification-message--icon" />
<Typography
variant={TYPOGRAPHY.H7}
fontWeight={FONT_WEIGHT.NORMAL}

6
ui/pages/home/index.scss
View File

@ -141,9 +141,11 @@
&__new-network-notification-message {
display: flex;
flex-direction: row;
align-items: center;
&--image {
margin-right: 10px;
&--icon {
margin-right: 8px;
color: var(--color-success-default);
}
}

5
ui/pages/settings/contact-list-tab/contact-list-tab.component.js
View File

@ -72,7 +72,10 @@ export default class ContactListTab extends Component {
return (
<div className="address-book__container">
<div>
<img src="./images/address-book.svg" alt={t('addressBookIcon')} />
<i
className="fa fa-address-book fa-4x address-book__icon"
title={t('addressBookIcon')}
/>
<h4 className="address-book__title">{t('buildContactList')}</h4>
<p className="address-book__sub-title">
{t('addFriendsAndAddresses')}

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

@ -67,6 +67,11 @@
text-align: center;
}
&__icon {
margin-bottom: 16px;
display: block;
}
&__title {
@include H4;