UX Icon: updated fas-question icon (#17828)

* updated fas-question icon

* removed as property from Box

* fallback prop for heading

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

@@ -8,6 +8,7 @@ import {
   DISPLAY,
   TypographyVariant,
 } from '../../../helpers/constants/design-system';
+import { Icon, ICON_NAMES } from '../../component-library';
 
 export const CustomSpendingCapTooltip = ({
   tooltipContentText,
@@ -31,7 +32,7 @@ export const CustomSpendingCapTooltip = ({
       {tooltipIcon ? (
         <i className="fa fa-exclamation-triangle form-field__heading-title__tooltip__warning-icon" />
       ) : (
-        tooltipIcon !== '' && <i className="fa fa-question-circle" />
+        tooltipIcon !== '' && <Icon name={ICON_NAMES.QUESTION} />
       )}
     </Tooltip>
   </Box>

ui/components/ui/form-field/form-field.js

@@ -26,6 +26,7 @@ export default function FormField({
   TooltipCustomComponent,
   titleDetail = '',
   titleDetailWrapperProps,
+  titleHeadingWrapperProps,
   error,
   onChange = undefined,
   value = 0,
@@ -55,6 +56,7 @@ export default function FormField({
             className="form-field__heading-title"
             display={DISPLAY.FLEX}
             alignItems={AlignItems.baseline}
+            {...titleHeadingWrapperProps}
           >
             {TitleTextCustomComponent ||
               (titleText && (
@@ -210,6 +212,13 @@ FormField.propTypes = {
   titleDetailWrapperProps: PropTypes.shape({
     ...Box.propTypes,
   }),
+  /**
+   * Props to pass to wrapping Box component of the titleHeading component
+   * Accepts all props of the Box component
+   */
+  titleHeadingWrapperProps: PropTypes.shape({
+    ...Box.propTypes,
+  }),
   /**
    * Show error message
    */

ui/components/ui/form-field/form-field.stories.js

@@ -3,8 +3,9 @@
 import React, { useState } from 'react';
 import Typography from '../typography';
 import Tooltip from '../tooltip';
-import Box from '../box';
 
+import { Icon, ICON_NAMES } from '../../component-library';
+import { AlignItems } from '../../../helpers/constants/design-system';
 import README from './README.mdx';
 import FormField from '.';
 
@@ -94,6 +95,7 @@ export const CustomComponents = (args) => {
     <div style={{ width: '600px' }}>
       <FormField
         {...args}
+        titleHeadingWrapperProps={{ alignItems: AlignItems.center }}
         TitleTextCustomComponent={
           <Typography>TitleTextCustomComponent</Typography>
         }
@@ -106,7 +108,7 @@ export const CustomComponents = (args) => {
             position="top"
             html={<Typography>Custom tooltip</Typography>}
           >
-            <Box as="i" marginLeft={2} className="fa fa-question-circle" />
+            <Icon name={ICON_NAMES.QUESTION} marginLeft={2} />
           </Tooltip>
         }
         titleDetail={<Typography>TitleDetail</Typography>}

ui/components/ui/form-field/index.scss

@@ -36,12 +36,6 @@
     color: var(--color-text-default);
   }
 
-  i {
-    color: var(--color-icon-default);
-    font-size: $font-size-h7;
-    margin-bottom: 10px;
-  }
-
   &__input {
     width: 100%;
     padding: 10px;

ui/components/ui/new-network-info/index.scss

@@ -11,7 +11,6 @@
       padding-bottom: 1px;
     }
 
-    .fa-question-circle,
     .popover-header__button {
       color: var(--color-icon-default);
     }

ui/components/ui/new-network-info/new-network-info.js

@@ -26,6 +26,7 @@ import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import Chip from '../chip/chip';
 import { setFirstTimeUsedNetwork } from '../../../store/actions';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
+import { Icon, ICON_NAMES } from '../../component-library';
 
 const NewNetworkInfo = () => {
   const t = useContext(I18nContext);
@@ -103,7 +104,11 @@ const NewNetworkInfo = () => {
           primaryTokenImage ? (
             <Identicon image={primaryTokenImage} diameter={14} />
           ) : (
-            <i className="fa fa-question-circle" />
+            <Icon
+              className="question"
+              name={ICON_NAMES.QUESTION}
+              color={Color.iconDefault}
+            />
           )
         }
       />

ui/components/ui/new-network-info/new-network-info.test.js

@@ -65,7 +65,7 @@ describe('NewNetworkInfo', () => {
       updateTokenDetectionSupportStatus,
     );
     const { container } = renderWithProvider(<NewNetworkInfo />, store);
-    const questionMark = container.querySelector('.fa fa-question-circle');
+    const questionMark = container.querySelector('.question');
 
     expect(questionMark).toBeDefined();
   });

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

@@ -4,7 +4,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import Box from '../box';
 import Tooltip from '../tooltip';
 import Typography from '../typography';
-import { ButtonLink } from '../../component-library';
+import { ButtonLink, Icon, ICON_NAMES } from '../../component-library';
 import {
   AlignItems,
   DISPLAY,
@@ -15,6 +15,7 @@ import {
   Size,
   BackgroundColor,
   TextColor,
+  Color,
 } from '../../../helpers/constants/design-system';
 import { Numeric } from '../../../../shared/modules/Numeric';
 
@@ -92,7 +93,11 @@ export default function ReviewSpendingCap({
                 <i className="fa fa-exclamation-triangle review-spending-cap__heading-title__tooltip__warning-icon" />
               )}
               {Number(tokenValue) === 0 && (
-                <i className="far fa-question-circle review-spending-cap__heading-title__tooltip__question-icon" />
+                <Icon
+                  className="review-spending-cap__heading-title__tooltip__question-icon"
+                  name={ICON_NAMES.QUESTION}
+                  color={Color.iconDefault}
+                />
               )}
             </Tooltip>
           </Box>