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.

6 files changed, 40 insertions, 29 deletions

diff --git a/opendc-web/opendc-web-ui/src/pages/Home.js b/opendc-web/opendc-web-ui/src/pages/Home.js
index fb383426..ee930fbe 100644
--- a/opendc-web/opendc-web-ui/src/pages/Home.js
+++ b/opendc-web/opendc-web-ui/src/pages/Home.js
@@ -8,7 +8,14 @@ import StakeholderSection from '../components/home/StakeholderSection'
 import TeamSection from '../components/home/TeamSection'
 import TechnologiesSection from '../components/home/TechnologiesSection'
 import HomeNavbar from '../components/navigation/HomeNavbar'
-import './Home.sass'
+import {
+    introSection,
+    stakeholderSection,
+    modelingSection,
+    simulationSection,
+    technologiesSection,
+    teamSection,
+} from './Home.module.scss'
 import { useDocumentTitle } from '../util/hooks'
 
 function Home() {
@@ -18,12 +25,12 @@ function Home() {
             <HomeNavbar />
             <div className="body-wrapper page-container">
                 <JumbotronHeader />
-                <IntroSection />
-                <StakeholderSection />
-                <ModelingSection />
-                <SimulationSection />
-                <TechnologiesSection />
-                <TeamSection />
+                <IntroSection className={introSection} />
+                <StakeholderSection className={stakeholderSection} />
+                <ModelingSection className={modelingSection} />
+                <SimulationSection className={simulationSection} />
+                <TechnologiesSection className={technologiesSection} />
+                <TeamSection className={teamSection} />
                 <ContactSection />
             </div>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.module.scss b/opendc-web/opendc-web-ui/src/pages/Home.module.scss
new file mode 100644
index 00000000..aed1d88f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/Home.module.scss
@@ -0,0 +1,16 @@
+.bodyWrapper {
+    position: relative;
+    overflow-y: hidden;
+}
+
+.introSection,
+.modelingSection,
+.technologiesSection {
+    background-color: #fff;
+}
+
+.stakeholderSection,
+.simulationSection,
+.teamSection {
+    background-color: #f2f2f2;
+}
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.sass b/opendc-web/opendc-web-ui/src/pages/Home.sass
deleted file mode 100644
index 79cb9698..00000000
--- a/opendc-web/opendc-web-ui/src/pages/Home.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-.body-wrapper
-    position: relative
-    overflow-y: hidden
-
-.intro-section, .modeling-section, .technologies-section
-    background-color: #fff
-
-.stakeholder-section, .simulation-section, .team-section
-    background-color: #f2f2f2
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.js b/opendc-web/opendc-web-ui/src/pages/NotFound.js
index b933ffa5..409ffa0e 100644
--- a/opendc-web/opendc-web-ui/src/pages/NotFound.js
+++ b/opendc-web/opendc-web-ui/src/pages/NotFound.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import TerminalWindow from '../components/not-found/TerminalWindow'
-import './NotFound.sass'
+import style from './NotFound.module.scss'
 import { useDocumentTitle } from '../util/hooks'
 
 const NotFound = () => {
     useDocumentTitle('Page Not Found - OpenDC')
     return (
-        <div className="not-found-backdrop">
+        <div className={style['not-found-backdrop']}>
             <TerminalWindow />
         </div>
     )
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss b/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
new file mode 100644
index 00000000..e91c2780
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
@@ -0,0 +1,8 @@
+.not-found-backdrop {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+
+    background-image: linear-gradient(135deg, #00678a, #008fbf, #00a6d6);
+}
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.sass b/opendc-web/opendc-web-ui/src/pages/NotFound.sass
deleted file mode 100644
index 59231f7a..00000000
--- a/opendc-web/opendc-web-ui/src/pages/NotFound.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-.not-found-backdrop
-    position: absolute
-    left: 0
-    top: 0
-
-    margin: 0
-    padding: 0
-    width: 100%
-    height: 100%
-
-    background-image: linear-gradient(135deg, #00678a, #008fbf, #00A6D6)