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/home/ContactSection.js          | 21 +++++---
 .../src/components/home/IntroSection.js            | 10 ++--
 .../src/components/home/JumbotronHeader.js         |  9 +++-
 .../src/components/home/ScreenshotSection.js       | 12 ++++-
 .../src/components/home/SimulationSection.js       | 17 +++++--
 .../src/components/home/TeamSection.js             | 59 +++++++++++-----------
 .../src/components/home/TechnologiesSection.js     | 11 ++--
 7 files changed, 89 insertions(+), 50 deletions(-)

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

diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
index 25daaccf..60a7e6a3 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -1,8 +1,10 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
+import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExclamationTriangle, faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { contactSection, tudelftIcon } from './ContactSection.module.scss'
 
 const ContactSection = () => (
@@ -10,14 +12,14 @@ const ContactSection = () => (
         <Row className="justify-content-center">
             <Col md="4">
                 <a href="https://github.com/atlarge-research/opendc">
-                    <FontAwesome name="github" size="3x" className="mb-2" />
+                    <FontAwesomeIcon icon={faGithub} size="3x" className="mb-2" />
                     <div className="w-100" />
                     atlarge-research/opendc
                 </a>
             </Col>
             <Col md="4">
                 <a href="mailto:opendc@atlarge-research.com">
-                    <FontAwesome name="envelope" size="3x" className="mb-2" />
+                    <FontAwesomeIcon icon={faEnvelope} size="3x" className="mb-2" />
                     <div className="w-100" />
                     opendc@atlarge-research.com
                 </a>
@@ -25,7 +27,14 @@ const ContactSection = () => (
         </Row>
         <Row>
             <Col className="text-center">
-                <img src="img/tudelft-icon.png" className={`img-fluid ${tudelftIcon}`} height="100" alt="TU Delft" />
+                <Image
+                    src="/img/tudelft-icon.png"
+                    className={tudelftIcon}
+                    layout="intrinsic"
+                    width={162}
+                    height={100}
+                    alt="TU Delft"
+                />
             </Col>
         </Row>
         <Row>
@@ -39,7 +48,7 @@ const ContactSection = () => (
         </Row>
         <Row>
             <Col className="text-center disclaimer mt-5 small">
-                <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" />
+                <FontAwesomeIcon icon={faExclamationTriangle} size="2x" className="mr-2" />
                 <br />
                 <strong>Disclaimer: </strong>
                 OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable.
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index 7b467889..67e8cd8b 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Container, Row, Col } from 'reactstrap'
 
 const IntroSection = ({ className }) => (
@@ -14,9 +15,12 @@ const IntroSection = ({ className }) => (
                     </ul>
                 </Col>
                 <Col xl="4" lg="4" md="4" sm="8">
-                    <img
-                        src="img/datacenter-drawing.png"
-                        className="col-12 img-fluid"
+                    <Image
+                        src="/img/datacenter-drawing.png"
+                        className="col-12"
+                        layout="intrinsic"
+                        width={350}
+                        height={197}
                         alt="Schematic top-down view of a datacenter"
                     />
                     <p className="col-12 figure-caption text-center">
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
index 0d3217f9..98aa0af2 100644
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
@@ -1,6 +1,9 @@
 import React from 'react'
+import Image from 'next/image'
 import { Container, Jumbotron, Button } from 'reactstrap'
 import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 
 const JumbotronHeader = () => (
     <section className={jumbotronHeader}>
@@ -10,7 +13,9 @@ const JumbotronHeader = () => (
                     Open<span className={dc}>DC</span>
                 </h1>
                 <p className="lead">Collaborative Datacenter Simulation and Exploration for Everybody</p>
-                <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC" />
+                <div className="mt-5">
+                    <Image src="/img/logo.png" layout="intrinsic" height={110} width={110} alt="OpenDC" />
+                </div>
                 <p className="lead mt-5">
                     <Button
                         tag="a"
@@ -18,7 +23,7 @@ const JumbotronHeader = () => (
                         href="https://atlarge-research.com/pdfs/ccgrid21-opendc-paper.pdf"
                         color="warning"
                     >
-                        Read about <strong>OpenDC 2.0</strong> <i className="fa fa-external-link" />
+                        Read about <strong>OpenDC 2.0</strong> <FontAwesomeIcon icon={faExternalLinkAlt} />
                     </Button>
                 </p>
             </Jumbotron>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 4f634b28..9673b7b7 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 import { screenshot } from './ScreenshotSection.module.scss'
@@ -6,11 +7,18 @@ import { screenshot } from './ScreenshotSection.module.scss'
 const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsRight, children }) => (
     <ContentSection name={name} title={title} className={className}>
         <Row>
-            <Col xl="5" lg="5" md="5" sm="12" className={`text-left ${!imageIsRight ? 'order-1' : ''}`}>
+            <Col xl="5" lg="5" md="5" sm="12" className={`text-left my-auto ${!imageIsRight ? 'order-1' : ''}`}>
                 {children}
             </Col>
             <Col xl="7" lg="7" md="7" sm="12">
-                <img src={imageUrl} className={`col-12 ${screenshot}`} alt={caption} />
+                <Image
+                    src={imageUrl}
+                    className={`col-12 ${screenshot}`}
+                    layout="intrinsic"
+                    width={635}
+                    height={419}
+                    alt={caption}
+                />
                 <div className="row text-muted justify-content-center">{caption}</div>
             </Col>
         </Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
index 44ce905b..c154cc26 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Col, Row } from 'reactstrap'
 import ContentSection from './ContentSection'
 
@@ -18,9 +19,12 @@ const SimulationSection = ({ className }) => {
                     </ul>
                 </Col>
                 <Col xl="7" lg="7" md="7" sm="12">
-                    <img
+                    <Image
                         src="/img/screenshot-simulation.png"
-                        className="col-12 screenshot"
+                        className="col-12"
+                        layout="intrinsic"
+                        width={635}
+                        height={419}
                         alt="Running an experiment in OpenDC"
                     />
                     <Row className="text-muted justify-content-center">Running an experiment in OpenDC</Row>
@@ -39,7 +43,14 @@ const SimulationSection = ({ className }) => {
                 </Col>
 
                 <Col xl="7" lg="7" md="7" sm="12">
-                    <img src="/img/opendc-architecture.png" className="col-12 screenshot" alt="OpenDC's Architecture" />
+                    <Image
+                        src="/img/opendc-architecture.png"
+                        className="col-12"
+                        layout="intrinsic"
+                        width={635}
+                        height={232}
+                        alt="OpenDC's Architecture"
+                    />
                     <Row className="text-muted justify-content-center">OpenDC's Architecture</Row>
                 </Col>
             </Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
index 4e8a3906..bbbe241e 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
@@ -1,43 +1,44 @@
 import React from 'react'
+import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
 const TeamLead = ({ photoId, name, description }) => (
     <Col xl="3" lg="3" md="4" sm="6" className="justify-content-center">
-        <Col
-            tag="img"
-            src={'img/portraits/' + photoId + '.png'}
-            xl="10"
-            lg="10"
-            md="10"
-            sm="8"
-            col="5"
-            className="mb-2 mt-2"
-            alt={name}
-        />
-        <Col>
-            <h4>{name}</h4>
-            <div className="team-member-description">{description}</div>
-        </Col>
+        <Row>
+            <Col xl="10" lg="10" md="10" sm="8" col="5" className="my-2 mx-auto" alt={name}>
+                <Image
+                    src={'/img/portraits/' + photoId + '.png'}
+                    layout="intrinsic"
+                    width={182}
+                    height={182}
+                    alt={name}
+                />
+            </Col>
+            <Col>
+                <h4>{name}</h4>
+                <div className="team-member-description">{description}</div>
+            </Col>
+        </Row>
     </Col>
 )
 
 const TeamMember = ({ photoId, name }) => (
     <Col xl="2" lg="2" md="3" sm="4" className="justify-content-center">
-        <Col
-            tag="img"
-            src={'img/portraits/' + photoId + '.png'}
-            xl="10"
-            lg="10"
-            md="10"
-            sm="8"
-            col="5"
-            className="mb-2 mt-2"
-            alt={name}
-        />
-        <Col>
-            <h5>{name}</h5>
-        </Col>
+        <Row>
+            <Col xl="10" lg="10" md="10" sm="8" xs="5" className="my-2 mx-auto">
+                <Image
+                    src={'/img/portraits/' + photoId + '.png'}
+                    layout="intrinsic"
+                    width={100}
+                    height={100}
+                    alt={name}
+                />
+            </Col>
+            <Col>
+                <h5>{name}</h5>
+            </Col>
+        </Row>
     </Col>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index 6fdf4e5c..efedebb7 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -1,35 +1,36 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
 import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faWindowMaximize, faTv, faDatabase, faCogs } from '@fortawesome/free-solid-svg-icons'
 
 const TechnologiesSection = ({ className }) => (
     <ContentSection name="technologies" title="Technologies" className={className}>
         <ListGroup className="list-group text-left">
             <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="window-maximize" className="mr-2" />
+                    <FontAwesomeIcon icon={faWindowMaximize} className="mr-2" />
                     <strong className="">Browser</strong>
                 </span>
                 <span className="text-right">JavaScript, React, Redux, Konva</span>
             </ListGroupItem>
             <ListGroupItem color="warning" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="television" className="mr-2" />
+                    <FontAwesomeIcon icon={faTv} className="mr-2" />
                     <strong>Server</strong>
                 </span>
                 <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span>
             </ListGroupItem>
             <ListGroupItem color="success" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="database" className="mr-2" />
+                    <FontAwesomeIcon icon={faDatabase} className="mr-2" />
                     <strong>Database</strong>
                 </span>
                 <span className="text-right">MongoDB</span>
             </ListGroupItem>
             <ListGroupItem color="danger" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="cogs" className="mr-2" />
+                    <FontAwesomeIcon icon={faCogs} className="mr-2" />
                     <strong>Simulator</strong>
                 </span>
                 <span className="text-right">Kotlin</span>
-- 
cgit v1.2.3