KANBAN 451 - Upgrade Font Awesome

apps/main-app/src/components/CovidInfoLink.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 const CovidInfoLink = () => {
   return (
     <Link className='text-decoration-none' to='/coronavirus-resources'>
       <div className='alert alert-danger m-0' role='alert'>
         <h4 className='alert-heading'>
-          <i className='fa fa-exclamation-triangle' /> COVID-19 Information
+          <FontAwesomeIcon icon={faTriangleExclamation} /> COVID-19 Information
         </h4>
         <p className='mb-0'>Click here for animal model information and resources for COVID-19 research</p>
       </div>

apps/main-app/src/components/ExternalLink.js

@@ -1,23 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+
 import style from './style.scss';
 
+
+
 const ExternalLink = ({children, className, href, id, title, ...rest}) => {
-  if (href) {
-    className = (className || '') + (' ' + style.externalLink);
-  }
   return (
-    <a
-      className={className}
-      href={href || null}
-      id={id}
-      rel="noopener noreferrer"
-      target="_blank"
-      title={title}
-      {...rest}
-    >
-      {children || href}
-    </a>
+      <a
+        className={className}
+        href={href || null}
+        id={id}
+        rel="noopener noreferrer"
+        target="_blank"
+        title={title}
+        {...rest}
+      >
+        {children || href}
+        <FontAwesomeIcon icon={faArrowUpRightFromSquare} className={`${style.externalLink} ${className ? style.className : ''}`}/>
+      </a>
   );
 };
 

apps/main-app/src/components/collapsibleList/collapsibleList.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
 
 import style from './style.scss';
 
@@ -13,6 +15,7 @@ const CollapsibleList = ({ children, collapsedSize, showBullets }) => {
   const toggle = () => setCollapsed(prev => !prev);
   const childCount = React.Children.count(children);
   const label = ' ' + (collapsed ? ('Show All ' + childCount) : ('Show First ' + collapsedSize));
+  const caretIcon = (collapsed ? faCaretDown : faCaretUp);
   return (
     <div>
       <ul className={`${style.collapsibleList} ${showBullets ? style.bulleted : ''}`}>
@@ -26,7 +29,7 @@ const CollapsibleList = ({ children, collapsedSize, showBullets }) => {
       {childCount > collapsedSize && (
         <span>
           <button className={`btn btn-link btn-sm ${style.toggleLink}`} onClick={toggle}>
-            <i className={`${style.toggleIcon} fa fa-caret-up ${collapsed ? 'fa-rotate-180' : ''}`} />
+            <FontAwesomeIcon icon={caretIcon} className={`${style.toggleIcon}`} />
             {label}
           </button>
         </span>

apps/main-app/src/components/dataPage/pageNav.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { HashLink } from 'react-router-hash-link';
 import { Collapse } from 'reactstrap';
 import Scrollspy from 'react-scrollspy';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 
 import { makeId } from '../../lib/utils';
 
@@ -19,7 +21,7 @@ const PageNav = ({children, sections}) => {
             {children}
           </div>
           <button className='navbar-toggler ml-auto' onClick={() => setIsOpen(!isOpen)} type='button'>
-            <i className='fa fa-fw fa-bars' />
+            <FontAwesomeIcon icon={faBars} fixedWidth />
           </button>
         </div>
         <Collapse isOpen={isOpen} navbar>

apps/main-app/src/components/dataTable/columnHeader.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { UncontrolledButtonDropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import HelpPopup from '../helpPopup';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
 
 import style from './style.scss';
 
@@ -22,7 +24,7 @@ class ColumnHeader extends React.Component {
         {filterElement &&
           <UncontrolledButtonDropdown>
             <DropdownToggle className={`${style.filterToggle} ${active ? style.active : ''}`} color='link' tag='span'>
-              <i className={'fa fa-filter'} />
+              <FontAwesomeIcon icon={faFilter} />
             </DropdownToggle>
             <DropdownMenu className='shadow-sm px-4 py-3' modifiers={popperModifiers} positionFixed>
               {filterElement}

apps/main-app/src/components/dataTable/loadingOverlay.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 import style from './style.scss';
 
 const LoadingOverlay = ({loading}) => {
   return (
     <div className={`${style.loadingOverlay} ${loading ? style.loading : ''}`}>
-      {loading && <i className='fa fa-spinner fa-spin' />}
+      {loading && <FontAwesomeIcon icon={faSpinner} spin />}
     </div>
   );
 };

apps/main-app/src/components/helpPopup.js

@@ -1,7 +1,11 @@
+import style from './style.scss';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { PopoverBody, UncontrolledPopover } from 'reactstrap';
 import { makeId } from '../lib/utils';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+
 
 const HelpPopup = ({children, id, placement='top-start', ...otherProps}) => {
   id = makeId(id);
@@ -12,11 +16,7 @@ const HelpPopup = ({children, id, placement='top-start', ...otherProps}) => {
   };
   return (
     <React.Fragment>
-      <i
-        className='fa fa-question-circle text-primary'
-        id={id}
-        style={{cursor: 'pointer'}}
-      />
+      <FontAwesomeIcon icon={faCircleQuestion} id={id} style={{cursor: 'pointer'}} className='text-primary'/>
       <UncontrolledPopover {...otherProps} modifiers={popperModifiers} placement={placement} target={id} trigger='legacy'>
         <PopoverBody>{children}</PopoverBody>
       </UncontrolledPopover>

apps/main-app/src/components/loadingSpinner.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
-const LoadingSpinner = () => <i className='fa fa-spinner fa-spin' />;
+const LoadingSpinner = () => <FontAwesomeIcon icon={faSpinner} spin />;
 
 export default LoadingSpinner;

apps/main-app/src/components/style.scss

@@ -3,11 +3,9 @@
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 
-.externalLink:after {
-  font-family: FontAwesome;
-  content: "\f08e";
-  padding-left: 3px;
-  font-size: 85%;
+.externalLink {
+  padding-left: 4px;
+  font-size: 75%;
 }
 
 .loadingText {

apps/main-app/src/containers/allelePage/AlleleTransgenicConstructs.js

@@ -9,6 +9,8 @@ import CommaSeparatedGeneList from './CommaSeparatedGeneList';
 import NoData from '../../components/noData';
 import {Link} from 'react-router-dom';
 import ConstructLink from '../../components/ConstructLink';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 
 const AlleleTransgenicConstructs = ({constructs}) => {
   if (!constructs || constructs.length === 0) {
@@ -50,7 +52,7 @@ const AlleleTransgenicConstructs = ({constructs}) => {
             </AttributeValue>
           </AttributeList>
           <Link to={`/search?category=allele&constructs=${construct.id}`}>
-            All alleles with this construct <i className='fa fa-search' />
+            All alleles with this construct <FontAwesomeIcon icon={faMagnifyingGlass} />
           </Link>
         </div>
       ))}

apps/main-app/src/containers/allelePage/AlleleVariantsSummary.js

@@ -9,6 +9,8 @@ import Subsection from '../../components/subsection';
 import NoData from '../../components/noData';
 import useAllAlleleVariants from '../../hooks/useAlleleVariants';
 import VariantSummary from './VariantSummary';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 
 const AlleleVariantsSummary = ({allele, alleleId}) => {
   const {
@@ -31,10 +33,10 @@ const AlleleVariantsSummary = ({allele, alleleId}) => {
                   ...variant,
                   gene: gene,
                   species: species
-                }} 
+                }}
                 />
               </AttributeList>
-              <Link to={`/search?q=${displayName}`}>All alleles with this variant <i className='fa fa-search' /></Link>
+              <Link to={`/search?q=${displayName}`}>All alleles with this variant <FontAwesomeIcon icon={faMagnifyingGlass} /></Link>
             </Subsection>
           );
         })

apps/main-app/src/containers/homepage/AboutSection.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import WordpressInject from '../wordpress/wordpressInject';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faComments } from '@fortawesome/free-solid-svg-icons';
 
 import style from './style.scss';
 
@@ -20,7 +22,7 @@ const AboutSection = () => {
             >
               <div className='alert alert-primary'>
                 <h4 className='alert-heading'>
-                  <i className="fa fa-comments" aria-hidden="true" /> Join the Alliance User Community
+                  <FontAwesomeIcon icon={faComments} /> Join the Alliance User Community
                 </h4>
                 <p>
                   Click here to access official announcements, ask questions, and view discussions with other members of the Alliance Community.

apps/main-app/src/containers/homepage/ActionButton.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Link} from 'react-router-dom';
-import {UncontrolledTooltip} from 'reactstrap';
-
+import { Link } from 'react-router-dom';
+import { UncontrolledTooltip } from 'reactstrap';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCode, faBookOpen, faDownload, faLightbulb } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import style from './style.scss';
 
-const ActionButton = ({children, icon, id, to, tooltip}) => {
+library.add(faCode, faBookOpen, faDownload, faLightbulb);
+
+const ActionButton = ({children, icon, size, id, to, tooltip,}) => {
   return (
     <>
       <Link className={style.actionButton} id={id} to={to}>
-        <i className={`fa ${icon} ${style.icon}`} />
+        <FontAwesomeIcon icon={icon} size={size} className={`${style.icon}`} />
         {children}
         {tooltip && (
           <UncontrolledTooltip placement='bottom' target={id}>{tooltip}</UncontrolledTooltip>
@@ -22,6 +26,7 @@ const ActionButton = ({children, icon, id, to, tooltip}) => {
 ActionButton.propTypes = {
   children: PropTypes.node,
   icon: PropTypes.string,
+  size: PropTypes.string,
   id: PropTypes.string.isRequired,
   to: PropTypes.string,
   tooltip: PropTypes.string,

apps/main-app/src/containers/homepage/SearchSection.js

@@ -24,31 +24,35 @@ const SearchSection = () => {
         </ul>
         <div className='d-flex justify-content-around flex-wrap'>
           <ActionButton
-            icon='fa-download'
+            icon='download'
+            size='2x'
             id='action-download'
             to='/downloads'
             tooltip='Access downloadable bulk data files by species or combined for a variety of data types'
           >
             Download Data
           </ActionButton>
           <ActionButton
-            icon='fa-code'
+            icon='code'
+            size='2x'
             id='action-api'
             to='/api/swagger-ui'
             tooltip='Read documentation for accessing Alliance data programmatically via REST APIs'
           >
             Browse APIs
           </ActionButton>
           <ActionButton
-            icon='fa-book'
+            icon='book-open'
+            size='2x'
             id='action-pubs'
             to='/publications'
             tooltip='See publications about the Alliance written by Alliance members'
           >
             View Publications
           </ActionButton>
           <ActionButton
-            icon='fa-lightbulb-o'
+            icon='lightbulb'
+            size='2x'
             id='action-tutorial'
             to='/tutorials'
             tooltip='Dive deeper into using the Alliance with video and text-based tutorials'

apps/main-app/src/containers/homepage/style.scss

@@ -70,7 +70,6 @@ $max-width: 800px;
   }
 
   .icon {
-    font-size: 250%;
     pointer-events: none;
   }
 }