ui: Migrate to FontAwesome 5 React library

This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.

3 files changed, 30 insertions, 27 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index ae965939..9dd36d5e 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -2,10 +2,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Portfolio } from '../../../../shapes'
 import Link from 'next/link'
-import FontAwesome from 'react-fontawesome'
 import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
 import { Button, Col, Row } from 'reactstrap'
 import classNames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 function PortfolioListComponent({
     portfolios,
@@ -20,7 +21,7 @@ function PortfolioListComponent({
             <h2>
                 Portfolios
                 <Button color="primary" outline className="float-right" onClick={(e) => onNewPortfolio(e)}>
-                    <FontAwesome name="plus" />
+                    <FontAwesomeIcon icon={faPlus} />
                 </Button>
             </h2>
 
@@ -40,16 +41,15 @@ function PortfolioListComponent({
                                 <Button
                                     color="primary"
                                     outline
-                                    className="mr-1 fa fa-play"
+                                    className="mr-1"
                                     onClick={() => onChoosePortfolio(portfolio._id)}
-                                />
+                                >
+                                    <FontAwesomeIcon icon={faPlay} />
+                                </Button>
                             </Link>
-                            <Button
-                                color="danger"
-                                outline
-                                className="fa fa-trash"
-                                onClick={() => onDeletePortfolio(portfolio._id)}
-                            />
+                            <Button color="danger" outline onClick={() => onDeletePortfolio(portfolio._id)}>
+                                <FontAwesomeIcon icon={faTrash} />
+                            </Button>
                         </Col>
                     </Row>
                     <ScenarioListContainer portfolioId={portfolio._id} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index 168b8e02..131a00b5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -2,9 +2,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Scenario } from '../../../../shapes'
 import Link from 'next/link'
-import FontAwesome from 'react-fontawesome'
 import { Button, Col, Row } from 'reactstrap'
 import classNames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 function ScenarioListComponent({
     scenarios,
@@ -35,23 +36,26 @@ function ScenarioListComponent({
                                 color="primary"
                                 outline
                                 disabled
-                                className="mr-1 fa fa-play"
+                                className="mr-1"
                                 onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
-                            />
+                            >
+                                <FontAwesomeIcon icon={faPlay} />
+                            </Button>
                         </Link>
                         <Button
                             color="danger"
                             outline
-                            className="fa fa-trash"
                             disabled={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
-                        />
+                        >
+                            <FontAwesomeIcon icon={faTrash} />
+                        </Button>
                     </Col>
                 </Row>
             ))}
             <div className="pl-4 mb-2">
                 <Button color="primary" outline onClick={() => onNewScenario(portfolioId)}>
-                    <FontAwesome name="plus" className="mr-1" />
+                    <FontAwesomeIcon icon={faPlus} className="mr-1" />
                     New scenario
                 </Button>
             </div>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
index d5627abc..ac58669b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Topology } from '../../../../shapes'
-import FontAwesome from 'react-fontawesome'
 import { Button, Col, Row } from 'reactstrap'
 import classNames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) {
     return (
@@ -11,7 +12,7 @@ function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology
             <h2>
                 Topologies
                 <Button color="primary" outline className="float-right" onClick={onNewTopology}>
-                    <FontAwesome name="plus" />
+                    <FontAwesomeIcon icon={faPlus} />
                 </Button>
             </h2>
 
@@ -26,19 +27,17 @@ function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology
                         {topology.name}
                     </Col>
                     <Col xs="5" className="text-right">
-                        <Button
-                            color="primary"
-                            outline
-                            className="mr-1 fa fa-play"
-                            onClick={() => onChooseTopology(topology._id)}
-                        />
+                        <Button color="primary" outline className="mr-1" onClick={() => onChooseTopology(topology._id)}>
+                            <FontAwesomeIcon icon={faPlay} />
+                        </Button>
                         <Button
                             color="danger"
                             outline
-                            className="fa fa-trash"
-                            disable={idx === 0}
+                            disabled={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
-                        />
+                        >
+                            <FontAwesomeIcon icon={faTrash} />
+                        </Button>
                     </Col>
                 </Row>
             ))}