summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2021-05-17 12:16:10 +0200
committerFabian Mastenbroek <mail.fabianm@gmail.com>2021-05-18 15:46:43 +0200
commit53623fad76274e39206b8e073e371775ea96946b (patch)
treea57d23d9c1f6a924753dbb4a3a9bc9cbca5385dd /opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
parent688a25e560db3355e2a3ee369c2e6f4b55aab2a6 (diff)
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.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/home/SimulationSection.js')
-rw-r--r--opendc-web/opendc-web-ui/src/components/home/SimulationSection.js17
1 files changed, 14 insertions, 3 deletions
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>