Replaced all fa-icon-circle with INFO icon (#17539)

* replace all fa-icon-circle with INFO icon

* updated classnames

* updated classnames

* updated snapshots

* updated colors

* resolved errors

* fixed relative import

* fixed lint errors

* added story for alerts tab

* update snapshot

* updated info-circle

* updated enum for iconName

* removed classnames

* updated iconName in settings

* fixed lint errors and snapshots

ui/components/app/advanced-gas-inputs/advanced-gas-inputs.component.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
 import Tooltip from '../../ui/tooltip';
+import { Icon, IconName } from '../../component-library';
+import { IconColor } from '../../../helpers/constants/design-system';
 
 export default class AdvancedGasInputs extends Component {
   static contextTypes = {
@@ -138,7 +140,11 @@ export default class AdvancedGasInputs extends Component {
         <div className="advanced-gas-inputs__gas-edit-row__label">
           {label}
           <Tooltip title={tooltipTitle} position="top" arrow>
-            <i className="fa fa-info-circle" />
+            <Icon
+              name={IconName.Info}
+              color={IconColor.iconAlternative}
+              className="info-circle"
+            />
           </Tooltip>
         </div>
         <div className="advanced-gas-inputs__gas-edit-row__input-wrapper">

ui/components/app/advanced-gas-inputs/index.scss

@@ -22,12 +22,11 @@
         @include H8;
       }
 
-      .fa-info-circle {
+      .info-circle {
-        color: var(--color-icon-alternative);
         cursor: pointer;
       }
 
-      .fa-info-circle:hover {
+      .info-circle:hover {
         color: var(--color-icon-muted);
       }
     }

ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js

@@ -22,6 +22,7 @@ import Checkbox from '../../../ui/check-box';
 import Tooltip from '../../../ui/tooltip';
 import ConnectedAccountsList from '../../connected-accounts-list';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { Icon, IconName } from '../../../component-library';
 
 const { ERROR, LOADING } = ALERT_STATE;
 
@@ -68,7 +69,7 @@ const UnconnectedAccountAlert = () => {
               title={t('alertDisableTooltip')}
               wrapperClassName="unconnected-account-alert__checkbox-label-tooltip"
             >
-              <i className="fa fa-info-circle" />
+              <Icon name={IconName.Info} />
             </Tooltip>
           </label>
         </div>

ui/components/app/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js

@@ -26,6 +26,7 @@ import {
 import { useDraftTransactionGasValues } from '../../../../hooks/useDraftTransactionGasValues';
 import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import MultilayerFeeMessage from '../../multilayer-fee-message/multi-layer-fee-message';
+import { Icon, IconName } from '../../../component-library';
 
 const renderHeartBeatIfNotInTest = () =>
   process.env.IN_TEST ? null : <LoadingHeartBeat />;
@@ -95,7 +96,7 @@ const ConfirmLegacyGasDisplay = () => {
               contentText={t('transactionDetailDappGasTooltip')}
               position="top"
             >
-              <i className="fa fa-info-circle" />
+              <Icon name={IconName.Info} />
             </InfoTooltip>
           </>
         ) : (
@@ -123,7 +124,7 @@ const ConfirmLegacyGasDisplay = () => {
               }
               position="top"
             >
-              <i className="fa fa-info-circle" />
+              <Icon name={IconName.Info} />
             </InfoTooltip>
           </>
         )

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

@@ -1,10 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Icon, IconName } from '../../../../component-library';
+import { IconColor } from '../../../../../helpers/constants/design-system';
 
 const ConfirmPageContainerWarning = (props) => {
   return (
     <div className="confirm-page-container-warning">
-      <i className="fa fa-info-circle confirm-page-container-warning__icon" />
+      <Icon
+        name={IconName.Info}
+        color={IconColor.warningDefault}
+        className="confirm-page-container-warning__icon"
+      />
       <div className="confirm-page-container-warning__warning">
         {props.warning}
       </div>

ui/components/app/home-notification/home-notification.component.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import Button from '../../ui/button';
 import Checkbox from '../../ui/check-box';
 import Tooltip from '../../ui/tooltip';
+import { Icon, IconName } from '../../component-library';
+import { IconColor } from '../../../helpers/constants/design-system';
 
 const HomeNotification = ({
   acceptText,
@@ -39,7 +41,7 @@ const HomeNotification = ({
             title={infoText}
             wrapperClassName="home-notification__tooltip-wrapper"
           >
-            <i className="fa fa-info-circle" />
+            <Icon name={IconName.Info} color={IconColor.iconDefault} />
           </Tooltip>
         ) : null}
       </div>

ui/components/app/home-notification/index.scss

@@ -36,10 +36,6 @@
     cursor: pointer;
   }
 
-  .fa-info-circle {
-    color: var(--color-icon-default);
-  }
-
   &__checkbox-wrapper {
     display: flex;
     flex-direction: row;

ui/components/app/nfts-detection-notice/nfts-detection-notice.js

@@ -9,10 +9,12 @@ import {
   FONT_WEIGHT,
   DISPLAY,
   TextColor,
+  IconColor,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Button from '../../ui/button';
 import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes';
+import { Icon, IconName } from '../../component-library';
 
 export default function NftsDetectionNotice() {
   const t = useI18nContext();
@@ -23,12 +25,10 @@ export default function NftsDetectionNotice() {
       <Dialog type="message" className="nfts-detection-notice__message">
         <Box display={DISPLAY.FLEX}>
           <Box paddingTop={1}>
-            <i
+            <Icon
-              style={{
+              name={IconName.Info}
-                fontSize: '1rem',
+              className="info-circle"
-                color: 'var(--color-primary-default)',
+              color={IconColor.primaryDefault}
-              }}
-              className="fa fa-info-circle"
             />
           </Box>
           <Box paddingLeft={2}>

ui/components/app/tab-bar/tab-bar.stories.js

@@ -54,7 +54,7 @@ export default {
         key: 'experimental',
       },
       {
-        icon: <i className="fa fa-info-circle" />,
+        icon: <Icon name={IconName.Info} />,
         content: 'About',
         key: 'about',
       },

ui/components/app/transaction-decoding/components/ui/accreditation/accrediation.component.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Accreditation from './accreditation.component';
+
+export default {
+  title: 'Components/App/Accrediation', // title should follow the folder structure location of the component. Don't use spaces.
+
+  argTypes: {
+    fetchVia: {
+      control: 'string',
+    },
+    address: { control: 'string' },
+  },
+  args: {
+    address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+  },
+};
+
+export const DefaultStory = (args) => <Accreditation {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js

@@ -12,6 +12,7 @@ import { TypographyVariant } from '../../../../../../helpers/constants/design-sy
 
 import Button from '../../../../../ui/button';
 import Typography from '../../../../../ui/typography';
+import { Icon, IconName } from '../../../../../component-library';
 
 const Accreditation = ({ fetchVia, address }) => {
   const t = useContext(I18nContext);
@@ -55,7 +56,7 @@ const Accreditation = ({ fetchVia, address }) => {
   return (
     <div className="accreditation">
       <div className="accreditation__icon">
-        <i className="fa fa-info-circle" />
+        <Icon name={IconName.Info} />
       </div>
       <div className="accreditation__info">
         <AccreditationLink />

ui/components/app/transaction-detail-item/transaction-detail-item.stories.js

@@ -3,6 +3,7 @@ import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 
 import { TextColor } from '../../../helpers/constants/design-system';
 
+import { Icon, IconName } from '../../component-library';
 import README from './README.mdx';
 import TransactionDetailItem from '.';
 
@@ -45,7 +46,7 @@ DefaultStory.args = {
     <>
       <strong>Estimated gas fee</strong>
       <InfoTooltip contentText="This is the tooltip text" position="top">
-        <i className="fa fa-info-circle" />
+        <Icon name={IconName.Info} />
       </InfoTooltip>
     </>
   ),

ui/components/app/transaction-detail/transaction-detail.stories.js

@@ -2,6 +2,7 @@ import React from 'react';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
 import GasTiming from '../gas-timing/gas-timing.component';
+import { Icon, IconName } from '../../component-library';
 import README from './README.mdx';
 import TransactionDetail from '.';
 
@@ -27,7 +28,7 @@ const rows = [
       <>
         Estimated gas fee
         <InfoTooltip contentText="This is the tooltip text" position="top">
-          <i className="fa fa-info-circle" />
+          <Icon name={IconName.Info} />
         </InfoTooltip>
       </>
     }

ui/components/ui/account-list/account-list.js

@@ -8,6 +8,8 @@ import Identicon from '../identicon';
 import UserPreferencedCurrencyDisplay from '../../app/user-preferenced-currency-display';
 import { PRIMARY } from '../../../helpers/constants/common';
 import Tooltip from '../tooltip';
+import { Icon, IconName } from '../../component-library';
+import { IconColor } from '../../../helpers/constants/design-system';
 
 const AccountList = ({
   selectNewAccountViaModal,
@@ -61,7 +63,12 @@ const AccountList = ({
                 </div>
               }
             >
-              <i className="fa fa-info-circle" />
+              <Icon
+                name={IconName.Info}
+                color={IconColor.iconMuted}
+                className="info-circle"
+                marginInlineStart={2}
+              />
             </Tooltip>
           </div>
         ) : null}
@@ -114,7 +121,12 @@ const AccountList = ({
                       addressLastConnectedMap[address]
                     }`}
                   >
-                    <i className="fa fa-info-circle" />
+                    <Icon
+                      name={IconName.Info}
+                      color={IconColor.iconMuted}
+                      className="info-circle"
+                      marginInlineStart={2}
+                    />
                   </Tooltip>
                 ) : null}
               </div>

ui/components/ui/account-list/index.scss

@@ -113,14 +113,11 @@
     }
   }
 
-  .fa-info-circle {
+  .info-circle {
-    color: var(--color-icon-muted);
     cursor: pointer;
-    margin-inline-start: 8px;
-    font-size: 0.9rem;
   }
 
-  .fa-info-circle:hover {
+  .info-circle:hover {
     color: var(--color-icon-default);
   }
 

ui/components/ui/definition-list/definition-list.js

@@ -8,8 +8,10 @@ import {
   FONT_WEIGHT,
   OVERFLOW_WRAP,
   TextColor,
+  IconColor,
 } from '../../../helpers/constants/design-system';
 import Tooltip from '../tooltip';
+import { Icon, IconName, IconSize } from '../../component-library';
 
 const MARGIN_MAP = {
   [Size.XS]: 0,
@@ -48,7 +50,12 @@ export default function DefinitionList({
                 position="top"
                 containerClassName="definition-list__tooltip-wrapper"
               >
-                <i className="fas fa-info-circle" />
+                <Icon
+                  name={IconName.Info}
+                  size={IconSize.Sm}
+                  marginLeft={1}
+                  color={IconColor.iconDefault}
+                />
               </Tooltip>
             )}
           </Typography>

ui/components/ui/definition-list/definition-list.scss

@@ -5,12 +5,6 @@
     display: flex;
     align-items: center;
 
-    & i {
-      color: var(--color-icon-default);
-      margin-left: 6px;
-      font-size: $font-size-h8;
-    }
-
     & #{$self}__tooltip-wrapper {
       display: flex !important;
       align-items: center;

ui/components/ui/deprecated-test-networks/deprecated-test-networks.js

@@ -12,7 +12,7 @@ import Box from '../box/box';
 import ActionableMessage from '../actionable-message/actionable-message';
 import { getCurrentChainId } from '../../../selectors';
 import { getCompletedOnboarding } from '../../../ducks/metamask/metamask';
-import { Text } from '../../component-library';
+import { Text, Icon, IconName, IconSize } from '../../component-library';
 
 export default function DeprecatedTestNetworks() {
   const currentChainID = useSelector(getCurrentChainId);
@@ -45,7 +45,7 @@ export default function DeprecatedTestNetworks() {
             className="deprecated-test-networks__content"
           >
             <Box marginRight={2} color={Color.warningDefault}>
-              <i className="fa fa-info-circle deprecated-test-networks__content__icon" />
+              <Icon name={IconName.Info} size={IconSize.Sm} />
             </Box>
             <Box justifyContent={JustifyContent.spaceBetween}>
               <Text

ui/components/ui/deprecated-test-networks/index.scss

@@ -5,10 +5,6 @@
   z-index: 1050;
 
   &__content {
-    &__icon {
-      font-size: 16px;
-    }
-
     &__inline-link {
       @include H7;
 

ui/components/ui/tooltip/tooltip.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Box from '../box/box';
-import { Text } from '../../component-library';
+import { Icon, IconName, Text } from '../../component-library';
+import { IconColor } from '../../../helpers/constants/design-system';
 import Tooltip from '.';
 
 export default {
@@ -60,10 +61,7 @@ export const DefaultStory = (args) => (
   <Box display="flex">
     <Text>Hover over the info icon to see the tooltip</Text>
     <Tooltip {...args}>
-      <i
+      <Icon name={IconName.Info} color={IconColor.iconAlternative} />
-        className="fa fa-sm fa-info-circle"
-        style={{ color: 'var(--color-icon-alternative)' }}
-      />
     </Tooltip>
   </Box>
 );
@@ -74,10 +72,7 @@ export const HTML = (args) => (
   <Box display="flex">
     <Text>This tooltips content is html</Text>
     <Tooltip {...args}>
-      <i
+      <Icon name={IconName.Info} color={IconColor.iconAlternative} />
-        className="fa fa-sm fa-info-circle"
-        style={{ color: 'var(--color-icon-alternative)' }}
-      />
     </Tooltip>
   </Box>
 );

ui/helpers/constants/settings.js

@@ -1,3 +1,4 @@
+import { IconName } from '../../components/component-library';
 import { ICON_NAMES } from '../../components/component-library/icon/deprecated';
 import {
   ALERTS_ROUTE,
@@ -259,28 +260,28 @@ export const SETTINGS_CONSTANTS = [
     sectionMessage: (t) => t('metamaskVersion'),
     descriptionMessage: (t) => t('builtAroundTheWorld'),
     route: `${ABOUT_US_ROUTE}#version`,
-    icon: 'fa fa-info-circle',
+    iconName: IconName.Info,
   },
   {
     tabMessage: (t) => t('about'),
     sectionMessage: (t) => t('links'),
     descriptionMessage: (t) => t('links'),
     route: `${ABOUT_US_ROUTE}#links`,
-    icon: 'fa fa-info-circle',
+    iconName: IconName.Info,
   },
   {
     tabMessage: (t) => t('about'),
     sectionMessage: (t) => t('privacyMsg'),
     descriptionMessage: (t) => t('privacyMsg'),
     route: `${ABOUT_US_ROUTE}#privacy-policy`,
-    icon: 'fa fa-info-circle',
+    iconName: IconName.Info,
   },
   {
     tabMessage: (t) => t('about'),
     sectionMessage: (t) => t('terms'),
     descriptionMessage: (t) => t('terms'),
     route: `${ABOUT_US_ROUTE}#terms`,
-    icon: 'fa fa-info-circle',
+    iconName: IconName.Info,
   },
 
   {
@@ -288,7 +289,7 @@ export const SETTINGS_CONSTANTS = [
     sectionMessage: (t) => t('attributions'),
     descriptionMessage: (t) => t('attributions'),
     route: `${ABOUT_US_ROUTE}#attributions`,
-    icon: 'fa fa-info-circle',
+    iconName: IconName.Info,
   },
 
   {
@@ -296,7 +297,7 @@ export const SETTINGS_CONSTANTS = [
     sectionMessage: (t) => t('supportCenter'),
     descriptionMessage: (t) => t('supportCenter'),
     route: `${ABOUT_US_ROUTE}#supportcenter`,
-    icon: 'fa fa-info-circle',
+    iconName: IconName.Info,
   },
 
   {
@@ -304,7 +305,7 @@ export const SETTINGS_CONSTANTS = [
     sectionMessage: (t) => t('visitWebSite'),
     descriptionMessage: (t) => t('visitWebSite'),
     route: `${ABOUT_US_ROUTE}#visitwebsite`,
-    icon: 'fa fa-info-circle',
+    iconName: IconName.Info,
   },
 
   {
@@ -312,14 +313,14 @@ export const SETTINGS_CONSTANTS = [
     sectionMessage: (t) => t('contactUs'),
     descriptionMessage: (t) => t('contactUs'),
     route: `${ABOUT_US_ROUTE}#contactus`,
-    icon: 'fa fa-info-circle',
+    iconName: IconName.Info,
   },
   {
     tabMessage: (t) => t('about'),
     sectionMessage: (t) => t('betaTerms'),
     descriptionMessage: (t) => t('betaTerms'),
     route: `${ABOUT_US_ROUTE}#beta-terms`,
-    icon: 'fa fa-info-circle',
+    iconName: IconName.Info,
   },
   {
     tabMessage: (t) => t('experimental'),

ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap

@@ -30,8 +30,9 @@ exports[`SendGasRow Component render should match snapshot 1`] = `
                 style="display: inline;"
                 tabindex="0"
               >
-                <i
+                <span
-                  class="fa fa-info-circle"
+                  class="box info-circle mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
+                  style="mask-image: url('./images/icons/info.svg');"
                 />
               </div>
             </div>
@@ -82,8 +83,9 @@ exports[`SendGasRow Component render should match snapshot 1`] = `
                 style="display: inline;"
                 tabindex="0"
               >
-                <i
+                <span
-                  class="fa fa-info-circle"
+                  class="box info-circle mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
+                  style="mask-image: url('./images/icons/info.svg');"
                 />
               </div>
             </div>

ui/pages/settings/alerts-tab/alerts-tab.js

@@ -9,6 +9,7 @@ import { setAlertEnabledness } from '../../../store/actions';
 import { getAlertEnabledness } from '../../../ducks/metamask/metamask';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { handleSettingsRefs } from '../../../helpers/utils/settings-search';
+import { Icon, IconName } from '../../../components/component-library';
 
 const AlertSettingsEntry = ({ alertId, description, title }) => {
   const t = useI18nContext();
@@ -30,7 +31,10 @@ const AlertSettingsEntry = ({ alertId, description, title }) => {
             title={description}
             wrapperClassName="alerts-tab__description"
           >
-            <i className="fa fa-info-circle alerts-tab__description__icon" />
+            <Icon
+              name={IconName.Info}
+              className="alerts-tab__description__icon"
+            />
           </Tooltip>
           <ToggleButton
             offLabel={t('off')}

ui/pages/settings/alerts-tab/alerts-tab.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import AlertsTab from './alerts-tab';
+
+export default {
+  title: 'Components/UI/Pages/AlertsTab ',
+
+  component: AlertsTab,
+};
+
+export const DefaultAlertsTab = () => {
+  return <AlertsTab />;
+};
+
+DefaultAlertsTab.storyName = 'Default';

ui/pages/settings/settings.component.js

@@ -303,7 +303,7 @@ class SettingsPage extends PureComponent {
       },
       {
         content: t('about'),
-        icon: <i className="fa fa-info-circle" />,
+        icon: <Icon name={IconName.Info} />,
         key: ABOUT_US_ROUTE,
       },
     ];

ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap

@@ -35,8 +35,9 @@ exports[`View Price Quote Difference displays a fiat error when calculationError
                   style="display: inline;"
                   tabindex="0"
                 >
-                  <i
+                  <span
-                    class="fa fa-info-circle"
+                    class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+                    style="mask-image: url('./images/icons/info.svg');"
                   />
                 </div>
               </div>
@@ -92,8 +93,9 @@ exports[`View Price Quote Difference displays an error when in high bucket 1`] =
                   style="display: inline;"
                   tabindex="0"
                 >
-                  <i
+                  <span
-                    class="fa fa-info-circle"
+                    class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+                    style="mask-image: url('./images/icons/info.svg');"
                   />
                 </div>
               </div>
@@ -149,8 +151,9 @@ exports[`View Price Quote Difference displays an error when in medium bucket 1`]
                   style="display: inline;"
                   tabindex="0"
                 >
-                  <i
+                  <span
-                    class="fa fa-info-circle"
+                    class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+                    style="mask-image: url('./images/icons/info.svg');"
                   />
                 </div>
               </div>
@@ -206,8 +209,9 @@ exports[`View Price Quote Difference should match snapshot 1`] = `
                   style="display: inline;"
                   tabindex="0"
                 >
-                  <i
+                  <span
-                    class="fa fa-info-circle"
+                    class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+                    style="mask-image: url('./images/icons/info.svg');"
                   />
                 </div>
               </div>

ui/pages/swaps/view-quote/view-quote-price-difference.js

@@ -12,6 +12,7 @@ import {
   DISPLAY,
 } from '../../../helpers/constants/design-system';
 import { GasRecommendations } from '../../../../shared/constants/gas';
+import { Icon, IconName } from '../../../components/component-library';
 
 export default function ViewQuotePriceDifference(props) {
   const {
@@ -74,7 +75,7 @@ export default function ViewQuotePriceDifference(props) {
                   {priceDifferenceTitle}
                 </div>
                 <Tooltip position="bottom" title={t('swapPriceImpactTooltip')}>
-                  <i className="fa fa-info-circle" />
+                  <Icon name={IconName.Info} />
                 </Tooltip>
               </Box>
               {priceDifferenceMessage}