From 873ddacf5abafe43fbc2b6c1033e473c3366dc62 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 11 May 2021 15:40:11 +0200
Subject: ui: Move component styling into CSS modules

This change updates the frontend codebase by moving the component
styling into CSS module files as opposed to the global styles which we
used before. In addition, I have changed the syntax to the newer SCSS
syntax, which is more similar to CSS.

These changes reduces the styling conflicts that can occur between
components and allows us to migrate to systems that do not support
importing global styles in components. Moreover, we can benefit from
treeshaking using CSS modules.
---
 .../components/navigation/AppNavbarComponent.js    |  2 +-
 .../src/components/navigation/HomeNavbar.js        |  2 +-
 .../src/components/navigation/Navbar.js            |  8 ++---
 .../src/components/navigation/Navbar.module.scss   | 36 ++++++++++++++++++++++
 .../src/components/navigation/Navbar.sass          | 30 ------------------
 5 files changed, 42 insertions(+), 36 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass

(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 c5de3d0b..8c28c542 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome'
 import { Link } from 'react-router-dom'
 import { NavLink } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
-import './Navbar.sass'
+import {} from './Navbar.module.scss'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
index 08d222ea..46d01a25 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { NavItem, NavLink } from 'reactstrap'
 import Navbar from './Navbar'
-import './Navbar.sass'
+import {} from './Navbar.module.scss'
 
 const ScrollNavItem = ({ id, name }) => (
     <NavItem>
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 55f98900..bf18f1c4 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -14,7 +14,7 @@ import { userIsLoggedIn } from '../../auth/index'
 import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
-import './Navbar.sass'
+import { login, navbar, opendcBrand } from './Navbar.module.scss'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -59,7 +59,7 @@ export const LoggedInSection = () => {
             ) : (
                 <NavItem route="login">
                     <GitHubLink />
-                    <Login visible={true} />
+                    <Login visible={true} className={login} />
                 </NavItem>
             )}
         </Nav>
@@ -71,10 +71,10 @@ const Navbar = ({ fullWidth, children }) => {
     const toggle = () => setIsOpen(!isOpen)
 
     return (
-        <RNavbar fixed="top" color="light" light expand="lg" id="navbar">
+        <RNavbar fixed="top" color="light" light expand="lg" id="navbar" className={navbar}>
             <Container fluid={fullWidth}>
                 <NavbarToggler onClick={toggle} />
-                <NavbarBrand tag={Link} to="/" title="OpenDC" className="opendc-brand">
+                <NavbarBrand tag={Link} to="/" title="OpenDC" className={opendcBrand}>
                     <img src="/img/logo.png" alt="OpenDC" />
                 </NavbarBrand>
 
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
new file mode 100644
index 00000000..2ea59a0f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
@@ -0,0 +1,36 @@
+@import '../../style-globals/_mixins.scss';
+@import '../../style-globals/_variables.scss';
+
+.navbar {
+    border-top: $blue 3px solid;
+    border-bottom: $gray-semi-dark 1px solid;
+    color: $gray-very-dark;
+    background: #fafafb;
+}
+
+.opendcBrand {
+    display: inline-block;
+    color: $gray-very-dark;
+
+    transition: background $transition-length;
+
+    img {
+        position: relative;
+        bottom: 3px;
+        display: inline-block;
+        width: 30px;
+    }
+}
+
+.login {
+    height: 40px;
+    background: $blue;
+    border: none;
+    padding-top: 10px;
+
+    @include clickable;
+
+    &:hover {
+        background: $blue-dark;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass
deleted file mode 100644
index c9d2aad2..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass
+++ /dev/null
@@ -1,30 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.navbar
-    border-top: $blue 3px solid
-    border-bottom: $gray-semi-dark 1px solid
-    color: $gray-very-dark
-    background: #fafafb
-
-.opendc-brand
-    display: inline-block
-    color: $gray-very-dark
-
-    +transition(background, $transition-length)
-
-    img
-        position: relative
-        bottom: 3px
-        display: inline-block
-        width: 30px
-
-.login
-    height: 40px
-    background: $blue
-    border: none
-    padding-top: 10px
-    +clickable
-
-    &:hover
-        background: $blue-dark
-- 
cgit v1.2.3


From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 12 May 2021 22:42:12 +0200
Subject: ui: Migrate from CRA to Next.js

This change updates the web frontend to use Next.js instead of Create
React App (CRA). Next.js enables the possibility of rendering pages on
the server side (which reduces the time to first frame) and overall
provides a better development experience.

Future commits will try to futher optimize the implementation for
Next.js.
---
 .../components/navigation/AppNavbarComponent.js    | 20 +++++----
 .../src/components/navigation/LogoutButton.js      |  3 +-
 .../src/components/navigation/Navbar.js            | 47 ++++++++++++++--------
 3 files changed, 44 insertions(+), 26 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 8c28c542..7b1eaae2 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import { NavLink } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
 import {} from './Navbar.module.scss'
@@ -8,16 +8,20 @@ import {} from './Navbar.module.scss'
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
         <NavItem route="/projects">
-            <NavLink tag={Link} title="My Projects" to="/projects">
-                <FontAwesome name="list" className="mr-2" />
-                My Projects
-            </NavLink>
+            <Link href="/projects">
+                <NavLink title="My Projects">
+                    <FontAwesome name="list" className="mr-2" />
+                    My Projects
+                </NavLink>
+            </Link>
         </NavItem>
         {project ? (
             <NavItem>
-                <NavLink tag={Link} title="Current Project" to={`/projects/${project._id}`}>
-                    <span>{project.name}</span>
-                </NavLink>
+                <Link href={`/projects/${project._id}`}>
+                    <NavLink title="Current Project">
+                        <span>{project.name}</span>
+                    </NavLink>
+                </Link>
             </NavItem>
         ) : undefined}
     </Navbar>
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 78b02b44..0c0feeb1 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,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
-import { Link } from 'react-router-dom'
 import { NavLink } from 'reactstrap'
 
 const LogoutButton = ({ onLogout }) => (
-    <NavLink tag={Link} className="logout" title="Sign out" to="#" onClick={onLogout}>
+    <NavLink className="logout" title="Sign out" onClick={onLogout}>
         <FontAwesome name="power-off" 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 bf18f1c4..90f55665 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 import {
     Navbar as RNavbar,
     NavItem as RNavItem,
@@ -15,6 +16,7 @@ import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
+import { useAuth } from '../../auth/hook'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -24,32 +26,45 @@ const GitHubLink = () => (
         className="ml-2 mr-3 text-dark"
         style={{ position: 'relative', top: 7 }}
     >
-        <span className="fa fa-github fa-2x" />
+        <span aria-hidden className="fa fa-github fa-2x" />
     </a>
 )
 
 export const NavItem = ({ route, children }) => {
-    const location = useLocation()
-    return <RNavItem active={location.pathname === route}>{children}</RNavItem>
+    const router = useRouter()
+    const handleClick = (e) => {
+        e.preventDefault()
+        router.push(route)
+    }
+    return (
+        <RNavItem onClick={handleClick} active={router.asPath === route}>
+            {children}
+        </RNavItem>
+    )
 }
 
 export const LoggedInSection = () => {
-    const location = useLocation()
+    const router = useRouter()
+    const isLoggedIn = useAuth()
     return (
         <Nav navbar className="auth-links">
-            {userIsLoggedIn() ? (
+            {isLoggedIn ? (
                 [
-                    location.pathname === '/' ? (
+                    router.asPath === '/' ? (
                         <NavItem route="/projects" key="projects">
-                            <NavLink tag={Link} title="My Projects" to="/projects">
-                                My Projects
-                            </NavLink>
+                            <Link href="/projects">
+                                <NavLink title="My Projects" to="/projects">
+                                    My Projects
+                                </NavLink>
+                            </Link>
                         </NavItem>
                     ) : (
                         <NavItem route="/profile" key="profile">
-                            <NavLink tag={Link} title="My Profile" to="/profile">
-                                <ProfileName />
-                            </NavLink>
+                            <Link href="/profile">
+                                <NavLink title="My Profile">
+                                    <ProfileName />
+                                </NavLink>
+                            </Link>
                         </NavItem>
                     ),
                     <NavItem route="logout" key="logout">
@@ -57,10 +72,10 @@ export const LoggedInSection = () => {
                     </NavItem>,
                 ]
             ) : (
-                <NavItem route="login">
+                <RNavItem>
                     <GitHubLink />
                     <Login visible={true} className={login} />
-                </NavItem>
+                </RNavItem>
             )}
         </Nav>
     )
@@ -74,7 +89,7 @@ const Navbar = ({ fullWidth, children }) => {
         <RNavbar fixed="top" color="light" light expand="lg" id="navbar" className={navbar}>
             <Container fluid={fullWidth}>
                 <NavbarToggler onClick={toggle} />
-                <NavbarBrand tag={Link} to="/" title="OpenDC" className={opendcBrand}>
+                <NavbarBrand href="/" title="OpenDC" className={opendcBrand}>
                     <img src="/img/logo.png" alt="OpenDC" />
                 </NavbarBrand>
 
-- 
cgit v1.2.3


From 24147cba0f5723be3525e8f40d1954144841629b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 13:00:00 +0200
Subject: ui: Address technical dept in frontend

---
 opendc-web/opendc-web-ui/src/components/navigation/Navbar.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

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

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 90f55665..025d33a1 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -11,12 +11,11 @@ import {
     Nav,
     Container,
 } from 'reactstrap'
-import { userIsLoggedIn } from '../../auth/index'
 import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
-import { useAuth } from '../../auth/hook'
+import { useIsLoggedIn } from '../../auth/hook'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -45,7 +44,7 @@ export const NavItem = ({ route, children }) => {
 
 export const LoggedInSection = () => {
     const router = useRouter()
-    const isLoggedIn = useAuth()
+    const isLoggedIn = useIsLoggedIn()
     return (
         <Nav navbar className="auth-links">
             {isLoggedIn ? (
-- 
cgit v1.2.3


From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 17:07:58 +0200
Subject: ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.
---
 opendc-web/opendc-web-ui/src/components/navigation/Navbar.js          | 2 +-
 opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

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

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 025d33a1..f16a3feb 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -15,7 +15,7 @@ import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
-import { useIsLoggedIn } from '../../auth/hook'
+import { useIsLoggedIn } from '../../auth'
 
 export const NAVBAR_HEIGHT = 60
 
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
index 2ea59a0f..8b9e4c97 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
@@ -1,5 +1,5 @@
-@import '../../style-globals/_mixins.scss';
-@import '../../style-globals/_variables.scss';
+@import 'src/style/_mixins.scss';
+@import 'src/style/_variables.scss';
 
 .navbar {
     border-top: $blue 3px solid;
-- 
cgit v1.2.3


From a6865b86cc8d710374fc0b6cfcbd2b863f1942a9 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 23:18:02 +0200
Subject: ui: Migrate to Auth0 as Identity Provider

This change updates the frontend codebase to move away from the Google
login and instead use Auth0 as generic Identity Provider. This allows
users to login with other accounts as well.

Since Auth0 has a free tier, users can experiment themselves with OpenDC
locally without having to pay for the login functionality. The code has
been written so that we should be able to migrate away from Auth0 once
it is not a suitable Identity Provider for OpenDC anymore.
---
 .../opendc-web-ui/src/components/navigation/Navbar.js    | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

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

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 f16a3feb..5c9ea1b8 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -15,7 +15,7 @@ import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
-import { useIsLoggedIn } from '../../auth'
+import { useAuth } from '../../auth'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -44,10 +44,10 @@ export const NavItem = ({ route, children }) => {
 
 export const LoggedInSection = () => {
     const router = useRouter()
-    const isLoggedIn = useIsLoggedIn()
+    const { isAuthenticated } = useAuth()
     return (
         <Nav navbar className="auth-links">
-            {isLoggedIn ? (
+            {isAuthenticated ? (
                 [
                     router.asPath === '/' ? (
                         <NavItem route="/projects" key="projects">
@@ -58,12 +58,10 @@ export const LoggedInSection = () => {
                             </Link>
                         </NavItem>
                     ) : (
-                        <NavItem route="/profile" key="profile">
-                            <Link href="/profile">
-                                <NavLink title="My Profile">
-                                    <ProfileName />
-                                </NavLink>
-                            </Link>
+                        <NavItem key="profile">
+                            <NavLink title="My Profile">
+                                <ProfileName />
+                            </NavLink>
                         </NavItem>
                     ),
                     <NavItem route="logout" key="logout">
-- 
cgit v1.2.3


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