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.
---
 .../src/components/navigation/AppNavbarComponent.js              | 5 +++--
 .../opendc-web-ui/src/components/navigation/LogoutButton.js      | 5 +++--
 opendc-web/opendc-web-ui/src/components/navigation/Navbar.js     | 9 +++++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

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

diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
index 7b1eaae2..28207968 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -1,16 +1,17 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
 import Link from 'next/link'
 import { NavLink } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
 import {} from './Navbar.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faList } from '@fortawesome/free-solid-svg-icons'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
         <NavItem route="/projects">
             <Link href="/projects">
                 <NavLink title="My Projects">
-                    <FontAwesome name="list" className="mr-2" />
+                    <FontAwesomeIcon icon={faList} className="mr-2" />
                     My Projects
                 </NavLink>
             </Link>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
index 0c0feeb1..4ab577e0 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
 import { NavLink } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 
 const LogoutButton = ({ onLogout }) => (
     <NavLink className="logout" title="Sign out" onClick={onLogout}>
-        <FontAwesome name="power-off" size="lg" />
+        <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
     </NavLink>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index 5c9ea1b8..690a7bdf 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import Image from 'next/image'
 import {
     Navbar as RNavbar,
     NavItem as RNavItem,
@@ -16,6 +17,8 @@ import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
 import { useAuth } from '../../auth'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -25,7 +28,7 @@ const GitHubLink = () => (
         className="ml-2 mr-3 text-dark"
         style={{ position: 'relative', top: 7 }}
     >
-        <span aria-hidden className="fa fa-github fa-2x" />
+        <FontAwesomeIcon icon={faGithub} size="2x" />
     </a>
 )
 
@@ -87,7 +90,9 @@ const Navbar = ({ fullWidth, children }) => {
             <Container fluid={fullWidth}>
                 <NavbarToggler onClick={toggle} />
                 <NavbarBrand href="/" title="OpenDC" className={opendcBrand}>
-                    <img src="/img/logo.png" alt="OpenDC" />
+                    <div className="mb-n1">
+                        <Image src="/img/logo.png" layout="fixed" width={30} height={30} alt="OpenDC" />
+                    </div>
                 </NavbarBrand>
 
                 <Collapse isOpen={isOpen} navbar>
-- 
cgit v1.2.3