CON-159-Swap to react icons in the main layout (/main + /login)

PR-URL: hasura/graphql-engine-mono#4455
GitOrigin-RevId: bfbef97761174182bbab13d2390d0646b848ac17

Author: Varun-Choudhary

console/src/components/Login/Login.tsx

@@ -2,6 +2,7 @@ import React, { useState, ChangeEvent, FormEvent } from 'react';
 import { Connect } from 'react-redux';
 import { push } from 'react-router-redux';
 import Helmet from 'react-helmet';
+import { FaSpinner } from 'react-icons/fa';
 import Button from '../Common/Button/Button';
 import globals from '../../Globals';
 import { verifyLogin } from './Actions';
@@ -31,7 +32,7 @@ const Login: React.FC<ConnectInjectedProps> = ({ dispatch }) => {
         loginText = (
           <span>
             Verifying...
-            <i className="fa fa-spinner fa-spin" aria-hidden="true" />
+            <FaSpinner className="animate-spin" />
           </span>
         );
       } else if (error) {

console/src/components/Main/LoveSection.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FaHeart, FaStar, FaTimes, FaTwitter } from 'react-icons/fa';
 import styles from './Main.scss';
 import PixelHeart from './images/components/PixelHeart';
 import globals from '../../Globals';
@@ -23,7 +24,7 @@ const LoveSection: React.FC<LoveSectionProps> = ({
     <ul key="main_love_2" className={`dropdown-menu ${styles.dropdown_menu}`}>
       <div className={styles.dropdown_menu_container}>
         <div className={styles.closeDropDown}>
-          <i className="fa fa-close" onClick={closeLoveSection} />
+          <FaTimes onClick={closeLoveSection} />
         </div>
         <div className={styles.displayFlex}>
           <li className={styles.pixelText1}>
@@ -32,7 +33,7 @@ const LoveSection: React.FC<LoveSectionProps> = ({
             <br />
             Star us on GitHub,
             <br />
-            To make our <i className="fa fa-heart" /> go wooooo!
+            To make our <FaHeart /> go wooooo!
           </li>
           <li className="dropdown-item">
             <a
@@ -48,7 +49,7 @@ const LoveSection: React.FC<LoveSectionProps> = ({
                 />
               </div>
               <div className={styles.pixelText}>
-                <i className="fa fa-star" />
+                <FaStar />
                 &nbsp; Star
               </div>
             </a>
@@ -67,7 +68,7 @@ const LoveSection: React.FC<LoveSectionProps> = ({
                 />
               </div>
               <div className={styles.pixelText}>
-                <i className="fa fa-twitter" />
+                <FaTwitter />
                 &nbsp; Tweet
               </div>
             </a>

console/src/components/Main/Main.js

@@ -2,6 +2,15 @@ import React from 'react';
 
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
+import {
+  FaCloud,
+  FaCog,
+  FaCogs,
+  FaDatabase,
+  FaExclamationCircle,
+  FaFlask,
+  FaPlug,
+} from 'react-icons/fa';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 
@@ -285,15 +294,15 @@ class Main extends React.Component {
 
     const getMetadataStatusIcon = () => {
       if (metadata.inconsistentObjects.length === 0) {
-        return <i className={styles.question + ' fa fa-cog'} />;
+        return <FaCog className={styles.question} />;
       }
       return (
         <div className={styles.question}>
-          <i className={'fa fa-cog'} />
+          <FaCog />
           <div className={styles.overlappingExclamation}>
             <div className={styles.iconWhiteBackground} />
             <div>
-              <i className={'fa fa-exclamation-circle'} />
+              <FaExclamationCircle />
             </div>
           </div>
         </div>
@@ -351,7 +360,9 @@ class Main extends React.Component {
               data-test={`${title.toLowerCase()}-tab-link`}
             >
               <div className={styles.iconCenter} data-test={block}>
-                <i className={`fa ${icon}`} aria-hidden="true" />
+                {React.createElement(icon, {
+                  'aria-hidden': true,
+                })}
               </div>
               <p>{title}</p>
             </Link>
@@ -385,14 +396,14 @@ class Main extends React.Component {
               <ul className={styles.sidebarItems}>
                 {getSidebarItem(
                   'API',
-                  'fa-flask',
+                  FaFlask,
                   tooltips.apiExplorer,
                   '/api/api-explorer',
                   true
                 )}
                 {getSidebarItem(
                   'Data',
-                  'fa-database',
+                  FaDatabase,
                   tooltips.data,
                   currentSource
                     ? schemaList.length
@@ -402,19 +413,19 @@ class Main extends React.Component {
                 )}
                 {getSidebarItem(
                   'Actions',
-                  'fa-cogs',
+                  FaCogs,
                   tooltips.actions,
                   '/actions/manage/actions'
                 )}
                 {getSidebarItem(
                   'Remote Schemas',
-                  'fa-plug',
+                  FaPlug,
                   tooltips.remoteSchema,
                   '/remote-schemas/manage/schemas'
                 )}{' '}
                 {getSidebarItem(
                   'Events',
-                  'fa-cloud',
+                  FaCloud,
                   tooltips.events,
                   '/events/data/manage'
                 )}

console/src/components/Main/Main.scss

@@ -543,7 +543,7 @@
     .navSideBarActive {
       border-bottom: 4px solid #ffc627;
 
-      i {
+      svg {
         color: #ffc627;
       }
 

console/src/components/Main/NotificationSection.tsx

@@ -1,5 +1,6 @@
 import React, { ComponentProps } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
+import { FaArrowRight, FaBell, FaTimes } from 'react-icons/fa';
 
 import { Box, Flex, Heading, Text, Badge } from '../UIKit/atoms';
 import {
@@ -191,7 +192,7 @@ const Notification: React.FC<UpdateProps> = ({
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <i className={`fa fa-arrow-right ${styles.linkArrow}`} />
+                  <FaArrowRight className={styles.linkArrow} />
                 </a>
               </div>
             ) : null}
@@ -729,7 +730,7 @@ const HasuraNotifications: React.FC<
         onClick={onClickNotificationButton}
         ref={wrapperRef}
       >
-        <i className={`fa fa-bell ${styles.bellIcon}`} />
+        <FaBell className={styles.bellIcon} />
         <ToReadBadge
           numberNotifications={numberNotifications}
           show={showBadge || !!fixedVersion}
@@ -763,7 +764,7 @@ const HasuraNotifications: React.FC<
             className={styles.closeNotificationIcon}
             onClick={onClickOutside}
           >
-            <i className="fa fa-times" />
+            <FaTimes />
           </div>
         </Flex>
         <Box className={styles.notificationsContainer}>