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.
---
 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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

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 6a9ea00c..0d3217f9 100644
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Container, Jumbotron, Button } from 'reactstrap'
-import './JumbotronHeader.sass'
+import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss'
 
 const JumbotronHeader = () => (
-    <section className="jumbotron-header">
+    <section className={jumbotronHeader}>
         <Container>
-            <Jumbotron className="text-center">
+            <Jumbotron className={jumbotron}>
                 <h1>
-                    Open<span className="dc">DC</span>
+                    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" />
-- 
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.
---
 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

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

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


From 829be3c973f5ca837431c3ca10909412b675e668 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 15 Jul 2021 15:10:04 +0200
Subject: refactor(ui): Extract OpenDC landing page from web interface

This change extracts the landing page from the web interface in order to
separate the development of the two. This allows the landing page to be
developed independently of the actual OpenDC web application.
---
 .../src/components/home/JumbotronHeader.js         | 34 ----------------------
 1 file changed, 34 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js

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

diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
deleted file mode 100644
index 98aa0af2..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ /dev/null
@@ -1,34 +0,0 @@
-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}>
-        <Container>
-            <Jumbotron className={jumbotron}>
-                <h1>
-                    Open<span className={dc}>DC</span>
-                </h1>
-                <p className="lead">Collaborative Datacenter Simulation and Exploration for Everybody</p>
-                <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"
-                        target="_blank"
-                        href="https://atlarge-research.com/pdfs/ccgrid21-opendc-paper.pdf"
-                        color="warning"
-                    >
-                        Read about <strong>OpenDC 2.0</strong> <FontAwesomeIcon icon={faExternalLinkAlt} />
-                    </Button>
-                </p>
-            </Jumbotron>
-        </Container>
-    </section>
-)
-
-export default JumbotronHeader
-- 
cgit v1.2.3