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.

18 files changed, 92 insertions, 76 deletions

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 d25a1bc4..25daaccf 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -3,10 +3,10 @@ import FontAwesome from 'react-fontawesome'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
-import './ContactSection.sass'
+import { contactSection, tudelftIcon } from './ContactSection.module.scss'
 
 const ContactSection = () => (
-    <ContentSection name="contact" title="Contact" className="contact-section">
+    <ContentSection name="contact" title="Contact" className={contactSection}>
         <Row className="justify-content-center">
             <Col md="4">
                 <a href="https://github.com/atlarge-research/opendc">
@@ -25,7 +25,7 @@ const ContactSection = () => (
         </Row>
         <Row>
             <Col className="text-center">
-                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" height="100" alt="TU Delft" />
+                <img src="img/tudelft-icon.png" className={`img-fluid ${tudelftIcon}`} height="100" alt="TU Delft" />
             </Col>
         </Row>
         <Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
new file mode 100644
index 00000000..9ab4fcb1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
@@ -0,0 +1,20 @@
+.contactSection {
+    background-color: #444;
+    color: #ddd;
+
+    a {
+        color: #ddd;
+
+        &:hover {
+            color: #fff;
+        }
+    }
+
+    .tudelftIcon {
+        height: 100px;
+    }
+
+    .disclaimer {
+        color: #cccccc;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass b/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass
deleted file mode 100644
index 997f8d98..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-.contact-section
-    background-color: #444
-    color: #ddd
-
-    a
-        color: #ddd
-
-    a:hover
-        color: #fff
-
-    .tudelft-icon
-        height: 100px
-
-    .disclaimer
-        color: #cccccc
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
index 3a8960d9..3e9ad50a 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
@@ -2,10 +2,10 @@ import React from 'react'
 import classNames from 'classnames'
 import { Container } from 'reactstrap'
 import PropTypes from 'prop-types'
-import './ContentSection.sass'
+import { contentSection } from './ContentSection.module.scss'
 
 const ContentSection = ({ name, title, children, className }) => (
-    <section id={name} className={classNames(className, name + '-section', 'content-section')}>
+    <section id={name} className={classNames(className, contentSection)}>
         <Container>
             <h1>{title}</h1>
             {children}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
new file mode 100644
index 00000000..3d150c93
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
@@ -0,0 +1,11 @@
+@import '../../style-globals/_variables.scss';
+
+.contentSection {
+    padding-top: 50px;
+    padding-bottom: 50px;
+    text-align: center;
+
+    h1 {
+        margin-bottom: 30px;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass b/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass
deleted file mode 100644
index a4c8bd66..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-@import ../../style-globals/_variables.sass
-
-.content-section
-    padding-top: 50px
-    padding-bottom: 150px
-    text-align: center
-
-    h1
-        margin-bottom: 30px
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 bc6ee83b..7b467889 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Container, Row, Col } from 'reactstrap'
 
-const IntroSection = () => (
-    <section id="intro" className="intro-section">
+const IntroSection = ({ className }) => (
+    <section id="intro" className={className}>
         <Container className="pt-5 pb-3">
             <Row className="justify-content-center">
                 <Col xl="4" lg="4" md="4" sm="8">
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" />
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
new file mode 100644
index 00000000..567b3e73
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
@@ -0,0 +1,31 @@
+.jumbotronHeader {
+    background: #00a6d6;
+}
+
+.jumbotron {
+    background-color: inherit;
+    margin-bottom: 0;
+    text-align: center;
+
+    padding-top: 120px;
+    padding-bottom: 120px;
+
+    img {
+        max-width: 110px;
+    }
+
+    h1 {
+        color: #fff;
+        font-size: 4.5em;
+
+        .dc {
+            color: #fff;
+            font-weight: bold;
+        }
+    }
+
+    :global(.lead) {
+        color: #fff;
+        font-size: 1.4em;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass
deleted file mode 100644
index 1b6a89fd..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass
+++ /dev/null
@@ -1,24 +0,0 @@
-.jumbotron-header
-    background: #00A6D6
-
-.jumbotron
-    background-color: inherit
-    margin-bottom: 0
-
-    padding-top: 120px
-    padding-bottom: 120px
-
-    img
-        max-width: 110px
-
-    h1
-        color: #fff
-        font-size: 4.5em
-
-        .dc
-            color: #fff
-            font-weight: bold
-
-    .lead
-        color: #fff
-        font-size: 1.4em
diff --git a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
index 643dca65..af36aa45 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
@@ -1,13 +1,14 @@
 import React from 'react'
 import ScreenshotSection from './ScreenshotSection'
 
-const ModelingSection = () => (
+const ModelingSection = ({ className }) => (
     <ScreenshotSection
         name="modeling"
         title="Datacenter Modeling"
         imageUrl="/img/screenshot-construction.png"
         caption="Building a datacenter in OpenDC"
         imageIsRight={true}
+        className={className}
     >
         <h3>Collaboratively...</h3>
         <ul>
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 33aab17f..4f634b28 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,16 +1,16 @@
 import React from 'react'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
-import './ScreenshotSection.sass'
+import { screenshot } from './ScreenshotSection.module.scss'
 
-const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
-    <ContentSection name={name} title={title}>
+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' : ''}`}>
                 {children}
             </Col>
             <Col xl="7" lg="7" md="7" sm="12">
-                <img src={imageUrl} className="col-12 screenshot" alt={caption} />
+                <img src={imageUrl} className={`col-12 ${screenshot}`} 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/ScreenshotSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
new file mode 100644
index 00000000..7e22de32
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
@@ -0,0 +1,5 @@
+.screenshot {
+    padding-left: 0;
+    padding-right: 0;
+    margin-bottom: 5px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
deleted file mode 100644
index 6b1a6ec4..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
+++ /dev/null
@@ -1,4 +0,0 @@
-.screenshot
-    padding-left: 0
-    padding-right: 0
-    margin-bottom: 5px
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 8e98717a..44ce905b 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -2,9 +2,9 @@ import React from 'react'
 import { Col, Row } from 'reactstrap'
 import ContentSection from './ContentSection'
 
-const SimulationSection = () => {
+const SimulationSection = ({ className }) => {
     return (
-        <ContentSection name="project" title="Datecenter Simulation">
+        <ContentSection name="project" title="Datecenter Simulation" className={className}>
             <Row>
                 <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto order-1">
                     <h3>Working with OpenDC:</h3>
diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
index 1624b4d2..9a4892ed 100644
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
@@ -21,8 +21,8 @@ const Stakeholder = ({ name, title, subtitle }) => (
     </Col>
 )
 
-const StakeholderSection = () => (
-    <ContentSection name="stakeholders" title="Stakeholders">
+const StakeholderSection = ({ className }) => (
+    <ContentSection name="stakeholders" title="Stakeholders" className={className}>
         <Row className="justify-content-center">
             <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" />
             <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" />
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 1ee1cbf5..4e8a3906 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
@@ -41,8 +41,8 @@ const TeamMember = ({ photoId, name }) => (
     </Col>
 )
 
-const TeamSection = () => (
-    <ContentSection name="team" title="OpenDC Team">
+const TeamSection = ({ className }) => (
+    <ContentSection name="team" title="OpenDC Team" className={className}>
         <Row className="justify-content-center">
             <TeamLead photoId="aiosup" name="Prof. dr. ir. Alexandru Iosup" description="Project Lead" />
             <TeamLead photoId="fmastenbroek" name="Fabian Mastenbroek" description="Technology Lead" />
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 efd77edf..6fdf4e5c 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -3,8 +3,8 @@ import FontAwesome from 'react-fontawesome'
 import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
 
-const TechnologiesSection = () => (
-    <ContentSection name="technologies" title="Technologies">
+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 }}>