From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: 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.
---
 .../opendc-web-ui/src/components/projects/ProjectActionButtons.js | 8 +++++---
 opendc-web/opendc-web-ui/src/components/projects/ProjectList.js   | 4 +++-
 opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js    | 4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/projects')

diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
index 96970fd9..0725e42b 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
@@ -2,12 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import Link from 'next/link'
 import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlay, faUsers, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
     <td className="text-right">
         <Link href={`/projects/${projectId}`}>
             <Button color="primary" outline size="sm" className="mr-2" title="Open this project">
-                <span className="fa fa-play" />
+                <FontAwesomeIcon icon={faPlay} />
             </Button>
         </Link>
         <Button
@@ -19,10 +21,10 @@ const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
             title="View and edit collaborators (not supported currently)"
             onClick={() => onViewUsers(projectId)}
         >
-            <span className="fa fa-users" />
+            <FontAwesomeIcon icon={faUsers} />
         </Button>
         <Button color="danger" outline size="sm" title="Delete this project" onClick={() => onDelete(projectId)}>
-            <span className="fa fa-trash" />
+            <FontAwesomeIcon icon={faTrash} />
         </Button>
     </td>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
index cb17b835..dc3f85ec 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -2,13 +2,15 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Project } from '../../shapes'
 import ProjectRow from './ProjectRow'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 
 const ProjectList = ({ projects }) => {
     return (
         <div className="vertically-expanding-container">
             {projects.length === 0 ? (
                 <div className="alert alert-info">
-                    <span className="info-icon fa fa-question-circle mr-2" />
+                    <FontAwesomeIcon icon={faQuestionCircle} className="info-icon mr-2" />
                     <strong>No projects here yet...</strong> Add some with the 'New Project' button!
                 </div>
             ) : (
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
index 9a95b777..91368de8 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
@@ -1,10 +1,10 @@
-import classNames from 'classnames'
 import React from 'react'
 import ProjectActions from '../../containers/projects/ProjectActions'
 import { Project } from '../../shapes'
 import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import { useAuth } from '../../auth'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const ProjectRow = ({ project }) => {
     const { user } = useAuth()
@@ -14,7 +14,7 @@ const ProjectRow = ({ project }) => {
             <td className="pt-3">{project.name}</td>
             <td className="pt-3">{parseAndFormatDateTime(project.datetimeLastEdited)}</td>
             <td className="pt-3">
-                <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[level], 'mr-2')} />
+                <FontAwesomeIcon icon={AUTH_ICON_MAP[level]} className="mr-2" />
                 {AUTH_DESCRIPTION_MAP[level]}
             </td>
             <ProjectActions projectId={project._id} />
-- 
cgit v1.2.3