From e3380ba3aeeb87a2ec657e6d892cd48dcfd06c9a Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 23 Feb 2023 15:20:07 -0600
Subject: [PATCH] UX: Icon: Remove fa-exclamation-triangle usages (#17691)

* 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>
---
 ui/components/app/add-network/add-network.js  | 10 +++++++---
 ui/components/app/add-network/index.scss      |  4 ----
 .../confirmation-warning-modal.js             |  9 ++++++++-
 .../app/confirmation-warning-modal/index.scss |  1 -
 .../custom-spending-cap-tooltip.js            |  9 +++++++--
 .../set-approval-for-all-warning.js           |  6 +++++-
 .../index.scss                                |  2 +-
 .../signature-request-original-warning.js     |  8 +++++++-
 .../ui/review-spending-cap/index.scss         |  4 ----
 .../review-spending-cap.js                    | 19 +++++++++++++++----
 .../secure-your-wallet/index.scss             |  1 -
 .../skip-srp-backup-popover.js                | 13 ++++++++++++-
 .../skip-srp-backup-popover.stories.js        | 17 +++++++++++++++++
 13 files changed, 79 insertions(+), 24 deletions(-)
 create mode 100644 ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js

diff --git a/ui/components/app/add-network/add-network.js b/ui/components/app/add-network/add-network.js
index a4dcdb9d3..e4cfc23d9 100644
--- a/ui/components/app/add-network/add-network.js
+++ b/ui/components/app/add-network/add-network.js
@@ -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>
                     )
diff --git a/ui/components/app/add-network/index.scss b/ui/components/app/add-network/index.scss
index 29899b329..6f2d60bc3 100644
--- a/ui/components/app/add-network/index.scss
+++ b/ui/components/app/add-network/index.scss
@@ -34,10 +34,6 @@
     }
   }
 
-  &__warning-icon {
-    color: var(--color-icon-muted);
-  }
-
   &__warning-tooltip {
     color: var(--color-text-alternative);
     width: 180px;
diff --git a/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js b/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js
index 06814c4f6..ebdbd74bc 100644
--- a/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js
+++ b/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js
@@ -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}
diff --git a/ui/components/app/confirmation-warning-modal/index.scss b/ui/components/app/confirmation-warning-modal/index.scss
index aced96aeb..fcd19395a 100644
--- a/ui/components/app/confirmation-warning-modal/index.scss
+++ b/ui/components/app/confirmation-warning-modal/index.scss
@@ -16,7 +16,6 @@
       &__warning-icon {
         padding-top: 7px;
         margin-right: 10px;
-        color: var(--color-error-default);
       }
     }
   }
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
index ac63f4785..6d1792fdc 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
@@ -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} />
       )}
diff --git a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
index fddcba543..93812f904 100644
--- a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
+++ b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
@@ -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}
diff --git a/ui/components/app/signature-request-original/signature-request-original-warning/index.scss b/ui/components/app/signature-request-original/signature-request-original-warning/index.scss
index fdd1774fa..71531ee53 100644
--- a/ui/components/app/signature-request-original/signature-request-original-warning/index.scss
+++ b/ui/components/app/signature-request-original/signature-request-original-warning/index.scss
@@ -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);
       }
     }
 
diff --git a/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js b/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
index bbb3a4c9f..05b4f2965 100644
--- a/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
+++ b/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
@@ -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}
diff --git a/ui/components/ui/review-spending-cap/index.scss b/ui/components/ui/review-spending-cap/index.scss
index aa84a9f8b..997200334 100644
--- a/ui/components/ui/review-spending-cap/index.scss
+++ b/ui/components/ui/review-spending-cap/index.scss
@@ -7,10 +7,6 @@
     &__tooltip {
       width: 180px;
 
-      &__warning-icon {
-        color: var(--color-error-default);
-      }
-
       &__question-icon {
         color: var(--color-icon-muted);
       }
diff --git a/ui/components/ui/review-spending-cap/review-spending-cap.js b/ui/components/ui/review-spending-cap/review-spending-cap.js
index e8a454f8f..57e16e81f 100644
--- a/ui/components/ui/review-spending-cap/review-spending-cap.js
+++ b/ui/components/ui/review-spending-cap/review-spending-cap.js
@@ -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>
diff --git a/ui/pages/onboarding-flow/secure-your-wallet/index.scss b/ui/pages/onboarding-flow/secure-your-wallet/index.scss
index a5b401b6c..898a16002 100644
--- a/ui/pages/onboarding-flow/secure-your-wallet/index.scss
+++ b/ui/pages/onboarding-flow/secure-your-wallet/index.scss
@@ -52,7 +52,6 @@
   width: 365px;
 
   &__icon {
-    color: var(--color-error-default);
     display: block;
     margin-top: 16px;
     margin-bottom: 16px;
diff --git a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
index 789e21026..4e9c69e89 100644
--- a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
+++ b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
@@ -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}
diff --git a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js
new file mode 100644
index 000000000..033911493
--- /dev/null
+++ b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js
@@ -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';