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

UX: Icon: Remove fa-exclamation-triangle usages (#17691)

Browse Source 
* UX: Icon: WIP: Remove fa-exclamation-triangle usages

* Swap the rest of the icons

* Fix color import

* Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Update ui/components/app/add-network/add-network.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Update ui/components/ui/review-spending-cap/review-spending-cap.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Fix lint

* Fix alignment and sizes

* Use IconColor

* Update ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js

Co-authored-by: Danica Shen <zhaodanica@gmail.com>

* Update ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js

Co-authored-by: Danica Shen <zhaodanica@gmail.com>

* Update ui/components/ui/review-spending-cap/review-spending-cap.js

Co-authored-by: Danica Shen <zhaodanica@gmail.com>

* Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js

Co-authored-by: Danica Shen <zhaodanica@gmail.com>

* Fix imports

* Use IconColor

---------

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
Co-authored-by: George Marshall <george.marshall@consensys.net>
Co-authored-by: Danica Shen <zhaodanica@gmail.com>
This commit is contained in:
David Walsh 2023-02-23 15:20:07 -06:00 committed by GitHub
parent 09a170bfe2
commit e3380ba3ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 79 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/components/app/add-network/add-network.js
View File

@ -14,6 +14,7 @@ import {
BorderRadius,
BackgroundColor,
TextColor,
IconColor,
} from '../../../helpers/constants/design-system';
import Button from '../../ui/button';
import Tooltip from '../../ui/tooltip';
@ -36,6 +37,7 @@ import { FEATURED_RPCS } from '../../../../shared/constants/network';
import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
const AddNetwork = () => {
const t = useContext(I18nContext);
@ -235,9 +237,11 @@ const AddNetwork = () => {
}
trigger="mouseenter"
>
<i
className="fa fa-exclamation-triangle add-network__warning-icon"
title={t('warning')}
<Icon
className="add-network__warning-icon"
name={ICON_NAMES.DANGER}
color={IconColor.iconMuted}
size={ICON_SIZES.SM}
/>
</Tooltip>
)

4
ui/components/app/add-network/index.scss
View File

@ -34,10 +34,6 @@
}
}
&__warning-icon {
color: var(--color-icon-muted);
}
&__warning-tooltip {
color: var(--color-text-alternative);
width: 180px;

9
ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js
View File

@ -13,7 +13,9 @@ import {
JustifyContent,
TypographyVariant,
AlignItems,
IconColor,
} from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
const t = useI18nContext();
@ -53,7 +55,12 @@ const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
margin={0}
className="confirmation-warning-modal__content__header"
>
<i className="fa fa-exclamation-triangle confirmation-warning-modal__content__header__warning-icon" />
<Icon
name={ICON_NAMES.DANGER}
color={IconColor.errorDefault}
className="confirmation-warning-modal__content__header__warning-icon"
size={ICON_SIZES.XL}
/>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}

1
ui/components/app/confirmation-warning-modal/index.scss
View File

@ -16,7 +16,6 @@
&__warning-icon {
padding-top: 7px;
margin-right: 10px;
color: var(--color-error-default);
}
}
}

9
ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
View File

@ -8,7 +8,7 @@ import {
DISPLAY,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../component-library';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
export const CustomSpendingCapTooltip = ({
tooltipContentText,
@ -30,7 +30,12 @@ export const CustomSpendingCapTooltip = ({
}
>
{tooltipIcon ? (
<i className="fa fa-exclamation-triangle form-field__heading-title__tooltip__warning-icon" />
<Icon
name={ICON_NAMES.DANGER}
className="form-field__heading-title__tooltip__warning-icon"
size={ICON_SIZES.AUTO}
style={{ 'vertical-align': 'bottom' }}
/>
) : (
tooltipIcon !== '' && <Icon name={ICON_NAMES.QUESTION} />
)}

6
ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
View File

@ -16,6 +16,7 @@ import {
} from '../../../helpers/constants/design-system';
import Identicon from '../../ui/identicon';
import { shortenAddress } from '../../../helpers/utils/util';
import { Icon, ICON_NAMES } from '../../component-library';
const SetApproveForAllWarning = ({
collectionName,
@ -60,7 +61,10 @@ const SetApproveForAllWarning = ({
padding={4}
className="set-approval-for-all-warning__content__header"
>
<i className="fa fa-exclamation-triangle set-approval-for-all-warning__content__header__warning-icon" />
<Icon
name={ICON_NAMES.DANGER}
className="set-approval-for-all-warning__content__header__warning-icon"
/>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}

2
ui/components/app/signature-request-original/signature-request-original-warning/index.scss
View File

@ -2,11 +2,11 @@
&__content {
&__header {
border-bottom: 1px solid var(--color-border-muted);
align-items: center;
&__warning-icon {
padding-top: 7px;
margin-right: 10px;
color: var(--color-error-default);
}
}

8
ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
View File

@ -7,6 +7,7 @@ import Box from '../../../ui/box';
import Button from '../../../ui/button';
import Typography from '../../../ui/typography';
import {
IconColor,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
@ -16,6 +17,7 @@ import {
} from '../../../../helpers/constants/design-system';
import Identicon from '../../../ui/identicon';
import { shortenAddress } from '../../../../helpers/utils/util';
import { Icon, ICON_NAMES } from '../../../component-library';
const SignatureRequestOriginalWarning = ({
senderAddress,
@ -33,7 +35,11 @@ const SignatureRequestOriginalWarning = ({
padding={4}
className="signature-request-warning__content__header"
>
<i className="fa fa-exclamation-triangle signature-request-warning__content__header__warning-icon" />
<Icon
name={ICON_NAMES.DANGER}
color={IconColor.errorDefault}
className="signature-request-warning__content__header__warning-icon"
/>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}

4
ui/components/ui/review-spending-cap/index.scss
View File

@ -7,10 +7,6 @@
&__tooltip {
width: 180px;
&__warning-icon {
color: var(--color-error-default);
}
&__question-icon {
color: var(--color-icon-muted);
}

19
ui/components/ui/review-spending-cap/review-spending-cap.js
View File

@ -4,7 +4,12 @@ import { I18nContext } from '../../../contexts/i18n';
import Box from '../box';
import Tooltip from '../tooltip';
import Typography from '../typography';
import { ButtonLink, Icon, ICON_NAMES } from '../../component-library';
import {
ButtonLink,
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../component-library';
import {
AlignItems,
DISPLAY,
@ -15,7 +20,7 @@ import {
Size,
BackgroundColor,
TextColor,
Color,
IconColor,
} from '../../../helpers/constants/design-system';
import { Numeric } from '../../../../shared/modules/Numeric';
@ -90,13 +95,19 @@ export default function ReviewSpendingCap({
}
>
{valueIsGreaterThanBalance && (
<i className="fa fa-exclamation-triangle review-spending-cap__heading-title__tooltip__warning-icon" />
<Icon
className="review-spending-cap__heading-title__tooltip__warning-icon"
name={ICON_NAMES.DANGER}
color={IconColor.errorDefault}
size={ICON_SIZES.SM}
style={{ 'vertical-align': 'middle' }}
/>
)}
{Number(tokenValue) === 0 && (
<Icon
className="review-spending-cap__heading-title__tooltip__question-icon"
name={ICON_NAMES.QUESTION}
color={Color.iconDefault}
color={IconColor.iconDefault}
/>
)}
</Tooltip>

1
ui/pages/onboarding-flow/secure-your-wallet/index.scss
View File

@ -52,7 +52,6 @@
width: 365px;
&__icon {
color: var(--color-error-default);
display: block;
margin-top: 16px;
margin-bottom: 16px;

13
ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
View File

@ -9,6 +9,7 @@ import Box from '../../../components/ui/box';
import Typography from '../../../components/ui/typography';
import {
AlignItems,
IconColor,
FLEX_DIRECTION,
FONT_WEIGHT,
JustifyContent,
@ -19,6 +20,11 @@ import Checkbox from '../../../components/ui/check-box';
import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes';
import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../components/component-library';
export default function SkipSRPBackup({ handleClose }) {
const [checked, setChecked] = useState(false);
@ -74,7 +80,12 @@ export default function SkipSRPBackup({ handleClose }) {
justifyContent={JustifyContent.center}
margin={4}
>
<i className="fa fa-exclamation-triangle fa-2x skip-srp-backup-popover__icon" />
<Icon
name={ICON_NAMES.DANGER}
size={ICON_SIZES.XL}
className="skip-srp-backup-popover__icon"
color={IconColor.errorDefault}
/>
<Typography
variant={TypographyVariant.h3}
fontWeight={FONT_WEIGHT.BOLD}

17
ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import SkipSRPBackup from './skip-srp-backup-popover';
export default {
title: 'Pages/OnboardingFlow/SecureYourWallet/SkipSRPBackupPopover',
component: SkipSRPBackup,
};
export const DefaultStory = () => {
return (
<div style={{ maxHeight: '2000px' }}>
<SkipSRPBackup />
</div>
);
};
DefaultStory.storyName = 'Default';