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/SimulationSection.js            | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

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

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>
-- 
cgit v1.2.3