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.

64 files changed, 516 insertions, 506 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
index 7cbb45c0..13226602 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import './ScaleIndicatorComponent.sass'
+import { scaleIndicator } from './ScaleIndicatorComponent.module.scss'
 
 const ScaleIndicatorComponent = ({ scale }) => (
-    <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
+    <div className={scaleIndicator} style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
         {TILE_SIZE_IN_METERS}m
     </div>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss
new file mode 100644
index 00000000..f19e0ff2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss
@@ -0,0 +1,10 @@
+.scaleIndicator {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 50;
+
+    border: solid 2px #212529;
+    border-top: none;
+    border-left: none;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.sass b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.sass
deleted file mode 100644
index 03a72c99..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-.scale-indicator
-    position: absolute
-    right: 10px
-    bottom: 10px
-    z-index: 50
-
-    border: solid 2px #212529
-    border-top: none
-    border-left: none
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js
index f372734d..d2f70953 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer'
 import ExportCanvasComponent from './ExportCanvasComponent'
-import './ToolPanelComponent.sass'
+import { toolPanel } from './ToolPanelComponent.module.scss'
 
 const ToolPanelComponent = () => (
-    <div className="tool-panel">
+    <div className={toolPanel}>
         <ZoomControlContainer />
         <ExportCanvasComponent />
     </div>
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss
new file mode 100644
index 00000000..970b1ce2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss
@@ -0,0 +1,6 @@
+.toolPanel {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    z-index: 50;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.sass b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.sass
deleted file mode 100644
index 8b27d24a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-.tool-panel
-    position: absolute
-    left: 10px
-    bottom: 10px
-    z-index: 50
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
index f7368f54..64e95014 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
@@ -1,53 +1,45 @@
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import React from 'react'
-import './Sidebar.sass'
+import React, { useState } from 'react'
+import { collapseButton, collapseButtonRight, sidebar, sidebarRight } from './Sidebar.module.scss'
 
-class Sidebar extends React.Component {
-    static propTypes = {
-        isRight: PropTypes.bool.isRequired,
-        collapsible: PropTypes.bool,
-    }
+function Sidebar({ isRight, collapsible = true, children }) {
+    const [isCollapsed, setCollapsed] = useState(false)
 
-    static defaultProps = {
-        collapsible: true,
-    }
+    const button = (
+        <div
+            className={classNames(collapseButton, {
+                [collapseButtonRight]: isRight,
+            })}
+            onClick={() => setCollapsed(!isCollapsed)}
+        >
+            {(isCollapsed && isRight) || (!isCollapsed && !isRight) ? (
+                <span className="fa fa-angle-left" title={isRight ? 'Expand' : 'Collapse'} />
+            ) : (
+                <span className="fa fa-angle-right" title={isRight ? 'Collapse' : 'Expand'} />
+            )}
+        </div>
+    )
 
-    state = {
-        collapsed: false,
+    if (isCollapsed) {
+        return button
     }
+    return (
+        <div
+            className={classNames(`${sidebar} p-3 h-100`, {
+                [sidebarRight]: isRight,
+            })}
+            onWheel={(e) => e.stopPropagation()}
+        >
+            {children}
+            {collapsible && button}
+        </div>
+    )
+}
 
-    render() {
-        const collapseButton = (
-            <div
-                className={classNames('sidebar-collapse-button', {
-                    'sidebar-collapse-button-right': this.props.isRight,
-                })}
-                onClick={() => this.setState({ collapsed: !this.state.collapsed })}
-            >
-                {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ? (
-                    <span className="fa fa-angle-left" title={this.props.isRight ? 'Expand' : 'Collapse'} />
-                ) : (
-                    <span className="fa fa-angle-right" title={this.props.isRight ? 'Collapse' : 'Expand'} />
-                )}
-            </div>
-        )
-
-        if (this.state.collapsed) {
-            return collapseButton
-        }
-        return (
-            <div
-                className={classNames('sidebar p-3 h-100', {
-                    'sidebar-right': this.props.isRight,
-                })}
-                onWheel={(e) => e.stopPropagation()}
-            >
-                {this.props.children}
-                {this.props.collapsible && collapseButton}
-            </div>
-        )
-    }
+Sidebar.propTypes = {
+    isRight: PropTypes.bool.isRequired,
+    collapsible: PropTypes.bool,
 }
 
 export default Sidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
new file mode 100644
index 00000000..d6be4d9b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
@@ -0,0 +1,57 @@
+@import '../../../style-globals/_variables.scss';
+@import '../../../style-globals/_mixins.scss';
+
+.collapseButton {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    padding: 5px 7px;
+
+    background: white;
+    border: solid 1px $gray-semi-light;
+    z-index: 99;
+
+    @include clickable;
+    border-radius: 5px;
+    transition: background 200ms;
+
+    &.collapseButtonRight {
+        left: auto;
+        right: 5px;
+        top: 5px;
+    }
+
+    &:hover {
+        background: #eeeeee;
+    }
+}
+
+.sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $side-bar-width;
+
+    z-index: 100;
+    background: white;
+
+    border-right: $gray-semi-dark 1px solid;
+
+    .collapseButton {
+        left: auto;
+        right: -25px;
+    }
+}
+
+.sidebarRight {
+    left: auto;
+    right: 0;
+
+    border-left: $gray-semi-dark 1px solid;
+    border-right: none;
+
+    .collapseButtonRight {
+        left: -25px;
+        right: auto;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass
deleted file mode 100644
index b8e15716..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass
+++ /dev/null
@@ -1,50 +0,0 @@
-@import ../../../style-globals/_variables.sass
-@import ../../../style-globals/_mixins.sass
-
-.sidebar-collapse-button
-    position: absolute
-    left: 5px
-    top: 5px
-    padding: 5px 7px
-
-    background: white
-    border: solid 1px $gray-semi-light
-    z-index: 99
-
-    +clickable
-    +border-radius(5px)
-    +transition(background, 200ms)
-
-    &.sidebar-collapse-button-right
-        left: auto
-        right: 5px
-        top: 5px
-
-    &:hover
-        background: #eeeeee
-
-.sidebar
-    position: absolute
-    top: 0
-    left: 0
-    width: $side-bar-width
-
-    z-index: 100
-    background: white
-
-    border-right: $gray-semi-dark 1px solid
-
-    .sidebar-collapse-button
-        left: auto
-        right: -25px
-
-.sidebar-right
-    left: auto
-    right: 0
-
-    border-left: $gray-semi-dark 1px solid
-    border-right: none
-
-    .sidebar-collapse-button-right
-        left: -25px
-        right: auto
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
index 12be26bd..1c07d237 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
 import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
-import './MachineListComponent.sass'
+import { machineList } from './MachineListComponent.module.scss'
 
 const MachineListComponent = ({ machineIds }) => {
     return (
-        <ul className="list-group machine-list">
+        <ul className={`list-group ${machineList}`}>
             {machineIds.map((machineId, index) => {
                 if (machineId === null) {
                     return <EmptySlotContainer key={index} position={index + 1} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
new file mode 100644
index 00000000..f075aac9
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
@@ -0,0 +1,3 @@
+.machineList li {
+    min-height: 64px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass
deleted file mode 100644
index 11b82c93..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-.machine-list li
-    min-height: 64px
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index ca41bf57..74313bf7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -3,19 +3,19 @@ import BackToRoomContainer from '../../../../../containers/app/sidebars/topology
 import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer'
 import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer'
 import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer'
-import './RackSidebarComponent.sass'
+import { sidebarContainer, sidebarHeaderContainer, machineListContainer } from './RackSidebarComponent.module.scss'
 import AddPrefabContainer from '../../../../../containers/app/sidebars/topology/rack/AddPrefabContainer'
 
 const RackSidebarComponent = () => {
     return (
-        <div className="rack-sidebar-container flex-column">
-            <div className="rack-sidebar-header-container">
+        <div className={`${sidebarContainer} flex-column`}>
+            <div className={sidebarHeaderContainer}>
                 <RackNameContainer />
                 <BackToRoomContainer />
                 <AddPrefabContainer />
                 <DeleteRackContainer />
             </div>
-            <div className="machine-list-container mt-2">
+            <div className={`${machineListContainer} mt-2`}>
                 <MachineListContainer />
             </div>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
new file mode 100644
index 00000000..8ce3836a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
@@ -0,0 +1,14 @@
+.sidebarContainer {
+    display: flex;
+    height: 100%;
+    max-height: 100%;
+}
+
+.sidebarHeaderContainer {
+    flex: 0;
+}
+
+.machineListContainer {
+    flex: 1;
+    overflow-y: scroll;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
deleted file mode 100644
index 29fec02a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-.rack-sidebar-container
-    display: flex
-    height: 100%
-    max-height: 100%
-
-.rack-sidebar-header-container
-    flex: 0
-
-.machine-list-container
-    flex: 1
-    overflow-y: scroll
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 }}>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
index c5de3d0b..8c28c542 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome'
 import { Link } from 'react-router-dom'
 import { NavLink } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
-import './Navbar.sass'
+import {} from './Navbar.module.scss'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
index 08d222ea..46d01a25 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { NavItem, NavLink } from 'reactstrap'
 import Navbar from './Navbar'
-import './Navbar.sass'
+import {} from './Navbar.module.scss'
 
 const ScrollNavItem = ({ id, name }) => (
     <NavItem>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index 55f98900..bf18f1c4 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -14,7 +14,7 @@ import { userIsLoggedIn } from '../../auth/index'
 import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
-import './Navbar.sass'
+import { login, navbar, opendcBrand } from './Navbar.module.scss'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -59,7 +59,7 @@ export const LoggedInSection = () => {
             ) : (
                 <NavItem route="login">
                     <GitHubLink />
-                    <Login visible={true} />
+                    <Login visible={true} className={login} />
                 </NavItem>
             )}
         </Nav>
@@ -71,10 +71,10 @@ const Navbar = ({ fullWidth, children }) => {
     const toggle = () => setIsOpen(!isOpen)
 
     return (
-        <RNavbar fixed="top" color="light" light expand="lg" id="navbar">
+        <RNavbar fixed="top" color="light" light expand="lg" id="navbar" className={navbar}>
             <Container fluid={fullWidth}>
                 <NavbarToggler onClick={toggle} />
-                <NavbarBrand tag={Link} to="/" title="OpenDC" className="opendc-brand">
+                <NavbarBrand tag={Link} to="/" title="OpenDC" className={opendcBrand}>
                     <img src="/img/logo.png" alt="OpenDC" />
                 </NavbarBrand>
 
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
new file mode 100644
index 00000000..2ea59a0f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
@@ -0,0 +1,36 @@
+@import '../../style-globals/_mixins.scss';
+@import '../../style-globals/_variables.scss';
+
+.navbar {
+    border-top: $blue 3px solid;
+    border-bottom: $gray-semi-dark 1px solid;
+    color: $gray-very-dark;
+    background: #fafafb;
+}
+
+.opendcBrand {
+    display: inline-block;
+    color: $gray-very-dark;
+
+    transition: background $transition-length;
+
+    img {
+        position: relative;
+        bottom: 3px;
+        display: inline-block;
+        width: 30px;
+    }
+}
+
+.login {
+    height: 40px;
+    background: $blue;
+    border: none;
+    padding-top: 10px;
+
+    @include clickable;
+
+    &:hover {
+        background: $blue-dark;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass
deleted file mode 100644
index c9d2aad2..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass
+++ /dev/null
@@ -1,30 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.navbar
-    border-top: $blue 3px solid
-    border-bottom: $gray-semi-dark 1px solid
-    color: $gray-very-dark
-    background: #fafafb
-
-.opendc-brand
-    display: inline-block
-    color: $gray-very-dark
-
-    +transition(background, $transition-length)
-
-    img
-        position: relative
-        bottom: 3px
-        display: inline-block
-        width: 30px
-
-.login
-    height: 40px
-    background: $blue
-    border: none
-    padding-top: 10px
-    +clickable
-
-    &:hover
-        background: $blue-dark
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
index dbdba212..03a4894b 100644
--- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
+++ b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import './BlinkingCursor.sass'
+import { blinkingCursor } from './BlinkingCursor.module.scss'
 
-const BlinkingCursor = () => <span className="blinking-cursor">_</span>
+const BlinkingCursor = () => <span className={blinkingCursor}>_</span>
 
 export default BlinkingCursor
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
new file mode 100644
index 00000000..aba0c604
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
@@ -0,0 +1,13 @@
+.blinkingCursor {
+    animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+    from,
+    to {
+        color: #eeeeee;
+    }
+    50% {
+        color: #333333;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.sass b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.sass
deleted file mode 100644
index ad91df85..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.sass
+++ /dev/null
@@ -1,35 +0,0 @@
-.blinking-cursor
-    -webkit-animation: 1s blink step-end infinite
-    -moz-animation: 1s blink step-end infinite
-    -o-animation: 1s blink step-end infinite
-    animation: 1s blink step-end infinite
-
-@keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
-
-@-moz-keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
-
-@-webkit-keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
-
-@-ms-keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
-
-@-o-keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
index bcc522c9..6ded4350 100644
--- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
+++ b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import './CodeBlock.sass'
+import { codeBlock } from './CodeBlock.module.scss'
 
 const CodeBlock = () => {
     const textBlock =
@@ -22,7 +22,7 @@ const CodeBlock = () => {
         }
     }
 
-    return <div className="code-block" dangerouslySetInnerHTML={{ __html: textBlock }} />
+    return <div className={codeBlock} dangerouslySetInnerHTML={{ __html: textBlock }} />
 }
 
 export default CodeBlock
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
new file mode 100644
index 00000000..8af3ee6d
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
@@ -0,0 +1,4 @@
+.codeBlock {
+    white-space: pre-wrap;
+    margin-top: 60px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.sass b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.sass
deleted file mode 100644
index e452f917..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-.code-block
-    white-space: pre-wrap
-    margin-top: 60px
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
index a25e558a..b38fc183 100644
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
+++ b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
@@ -2,13 +2,13 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import BlinkingCursor from './BlinkingCursor'
 import CodeBlock from './CodeBlock'
-import './TerminalWindow.sass'
+import { terminalWindow, terminalHeader, terminalBody, segfault, subTitle, homeBtn } from './TerminalWindow.module.scss'
 
 const TerminalWindow = () => (
-    <div className="terminal-window">
-        <div className="terminal-header">Terminal -- bash</div>
-        <div className="terminal-body">
-            <div className="segfault">
+    <div className={terminalWindow}>
+        <div className={terminalHeader}>Terminal -- bash</div>
+        <div className={terminalBody}>
+            <div className={segfault}>
                 $ status
                 <br />
                 opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4
@@ -19,11 +19,11 @@ const TerminalWindow = () => (
                 <br />
             </div>
             <CodeBlock />
-            <div className="sub-title">
+            <div className={subTitle}>
                 Got lost?
                 <BlinkingCursor />
             </div>
-            <Link to="/" className="home-btn">
+            <Link to="/" className={homeBtn}>
                 <span className="fa fa-home" /> GET ME BACK TO OPENDC
             </Link>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
new file mode 100644
index 00000000..614852d3
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
@@ -0,0 +1,61 @@
+.terminalWindow {
+    display: block;
+    align-self: center;
+
+    margin: auto;
+
+    user-select: none;
+    cursor: default;
+
+    overflow: hidden;
+
+    box-shadow: 5px 5px 20px #444444;
+}
+
+.terminalHeader {
+    font-family: monospace;
+    background: #cccccc;
+    color: #444444;
+    height: 30px;
+    line-height: 30px;
+    padding-left: 10px;
+
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+}
+
+.terminalBody {
+    font-family: monospace;
+    text-align: center;
+    background-color: #333333;
+    color: #eeeeee;
+    padding: 10px;
+
+    height: 100%;
+}
+
+.segfault {
+    text-align: left;
+}
+
+.subTitle {
+    margin-top: 20px;
+}
+
+.homeBtn {
+    margin-top: 10px;
+    padding: 5px;
+    display: inline-block;
+    border: 1px solid #eeeeee;
+    color: #eeeeee;
+    text-decoration: none;
+    cursor: pointer;
+
+    transition: all 200ms;
+
+    &:hover,
+    &:active {
+        background: #eeeeee;
+        color: #333333;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.sass b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.sass
deleted file mode 100644
index 7f05335a..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.sass
+++ /dev/null
@@ -1,70 +0,0 @@
-.terminal-window
-    width: 600px
-    height: 400px
-    display: block
-
-    position: absolute
-    top: 0
-    bottom: 0
-    left: 0
-    right: 0
-
-    margin: auto
-
-    -webkit-user-select: none
-    -moz-user-select: none
-    -ms-user-select: none
-    user-select: none
-    cursor: default
-
-    overflow: hidden
-
-    box-shadow: 5px 5px 20px #444444
-
-.terminal-header
-    font-family: monospace
-    background: #cccccc
-    color: #444444
-    height: 30px
-    line-height: 30px
-    padding-left: 10px
-
-    border-top-left-radius: 7px
-    border-top-right-radius: 7px
-
-.terminal-body
-    font-family: monospace
-    text-align: center
-    background-color: #333333
-    color: #eeeeee
-    padding: 10px
-
-    height: 100%
-
-.segfault
-    text-align: left
-
-.sub-title
-    margin-top: 20px
-
-.home-btn
-    margin-top: 10px
-    padding: 5px
-    display: inline-block
-    border: 1px solid #eeeeee
-    color: #eeeeee
-    text-decoration: none
-    cursor: pointer
-
-    -webkit-transition: all 200ms
-    -moz-transition: all 200ms
-    -o-transition: all 200ms
-    transition: all 200ms
-
-.home-btn:hover
-    background: #eeeeee
-    color: #333333
-
-.home-btn:active
-    background: #333333
-    color: #eeeeee
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
index 2b9795d0..89b483fb 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import FilterLink from '../../containers/projects/FilterLink'
-import './FilterPanel.sass'
+import { filterPanel } from './FilterPanel.module.scss'
 
 const FilterPanel = () => (
-    <div className="btn-group filter-panel mb-2">
+    <div className={`btn-group ${filterPanel} mb-2`}>
         <FilterLink filter="SHOW_ALL">All Projects</FilterLink>
         <FilterLink filter="SHOW_OWN">My Projects</FilterLink>
         <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
new file mode 100644
index 00000000..79cdf81a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
@@ -0,0 +1,7 @@
+.filterPanel {
+    display: flex;
+
+    button {
+        flex: 1 !important;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
deleted file mode 100644
index f71cf6c8..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-.filter-panel
-    display: flex
-
-    button
-        flex: 1 !important
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
index 54605775..f652429d 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
@@ -2,10 +2,10 @@ import React from 'react'
 import GoogleLogin from 'react-google-login'
 import { useDispatch } from 'react-redux'
 import { logIn } from '../../actions/auth'
+import { Button } from 'reactstrap'
 import config from '../../config'
 
-const Login = (props) => {
-    const { visible } = props
+function Login({ visible, className }) {
     const dispatch = useDispatch()
 
     const onLogin = (payload) => dispatch(logIn(payload))
@@ -34,9 +34,9 @@ const Login = (props) => {
             onSuccess={onAuthResponse}
             onFailure={onAuthFailure}
             render={(renderProps) => (
-                <span onClick={renderProps.onClick} className="login btn btn-primary">
+                <Button color="primary" onClick={renderProps.onClick} className={className}>
                     <span className="fa fa-google" /> Login with Google
-                </span>
+                </Button>
             )}
         />
     )
diff --git a/opendc-web/opendc-web-ui/src/index.js b/opendc-web/opendc-web-ui/src/index.js
index ae3a5ddc..d40d17a2 100644
--- a/opendc-web/opendc-web-ui/src/index.js
+++ b/opendc-web/opendc-web-ui/src/index.js
@@ -4,7 +4,7 @@ import * as Sentry from '@sentry/react'
 import { Integrations } from '@sentry/tracing'
 import { Provider } from 'react-redux'
 import { setupSocketConnection } from './api/socket'
-import './index.sass'
+import './index.scss'
 import Routes from './routes'
 import config from './config'
 import configureStore from './store/configure-store'
diff --git a/opendc-web/opendc-web-ui/src/index.sass b/opendc-web/opendc-web-ui/src/index.sass
deleted file mode 100644
index a78f7a19..00000000
--- a/opendc-web/opendc-web-ui/src/index.sass
+++ /dev/null
@@ -1,52 +0,0 @@
-@import "~bootstrap/scss/bootstrap"
-
-@import ./style-globals/_mixins.sass
-@import ./style-globals/_variables.sass
-
-html, body, #root
-    margin: 0
-    padding: 0
-    width: 100%
-    height: 100%
-
-    font-family: Roboto, Helvetica, Verdana, sans-serif
-    background: #eee
-
-    // Scroll padding for top navbar
-    scroll-padding-top: 60px
-
-.full-height
-    position: relative
-    height: 100% !important
-
-.page-container
-    padding-top: 60px
-
-.text-page-container
-    padding-top: 80px
-    display: flex
-    flex-flow: column
-
-.vertically-expanding-container
-    flex: 1 1 auto
-    overflow-y: auto
-
-.bottom-btn-container
-    flex: 0 1 auto
-    padding: 20px 0
-
-.btn, .list-group-item-action, .clickable
-    +clickable
-
-.btn-circle
-    +border-radius(50%)
-
-a, a:hover
-    text-decoration: none
-
-.app-page-container
-    padding-left: $side-bar-width
-    padding-top: 15px
-
-.w-70
-    width: 70% !important
diff --git a/opendc-web/opendc-web-ui/src/index.scss b/opendc-web/opendc-web-ui/src/index.scss
new file mode 100644
index 00000000..0c1ddff4
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/index.scss
@@ -0,0 +1,68 @@
+@import '~bootstrap/scss/bootstrap';
+
+@import './style-globals/_mixins.scss';
+@import './style-globals/_variables.scss';
+
+html,
+body,
+#root {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+
+    font-family: Roboto, Helvetica, Verdana, sans-serif;
+    background: #eee;
+
+    // Scroll padding for top navbar
+    scroll-padding-top: 60px;
+}
+
+.full-height {
+    position: relative;
+    height: 100% !important;
+}
+
+.page-container {
+    padding-top: 60px;
+}
+
+.text-page-container {
+    padding-top: 80px;
+    display: flex;
+    flex-flow: column;
+}
+
+.vertically-expanding-container {
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
+
+.bottom-btn-container {
+    flex: 0 1 auto;
+    padding: 20px 0;
+}
+
+.btn,
+.list-group-item-action,
+.clickable {
+    @include clickable;
+}
+
+.btn-circle {
+    border-radius: 50%;
+}
+
+a,
+a:hover {
+    text-decoration: none;
+}
+
+.app-page-container {
+    padding-left: $side-bar-width;
+    padding-top: 15px;
+}
+
+.w-70 {
+    width: 70% !important;
+}
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)
diff --git a/opendc-web/opendc-web-ui/src/style-globals/_mixins.sass b/opendc-web/opendc-web-ui/src/style-globals/_mixins.sass
deleted file mode 100644
index d0a8d1ac..00000000
--- a/opendc-web/opendc-web-ui/src/style-globals/_mixins.sass
+++ /dev/null
@@ -1,21 +0,0 @@
-=transition($property, $time)
-    -webkit-transition: $property $time
-    -moz-transition: $property $time
-    -o-transition: $property $time
-    transition: $property $time
-
-=user-select
-    -webkit-user-select: none
-    -moz-user-select: none
-    -ms-user-select: none
-    user-select: none
-
-=border-radius($length)
-    -webkit-border-radius: $length
-    -moz-border-radius: $length
-    border-radius: $length
-
-/* General Button Abstractions */
-=clickable
-    cursor: pointer
-    +user-select
diff --git a/opendc-web/opendc-web-ui/src/style-globals/_mixins.scss b/opendc-web/opendc-web-ui/src/style-globals/_mixins.scss
new file mode 100644
index 00000000..5f103cd7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/style-globals/_mixins.scss
@@ -0,0 +1,5 @@
+/* General Button Abstractions */
+@mixin clickable {
+    cursor: pointer;
+    user-select: none;
+}
diff --git a/opendc-web/opendc-web-ui/src/style-globals/_variables.sass b/opendc-web/opendc-web-ui/src/style-globals/_variables.sass
deleted file mode 100644
index 7553caa0..00000000
--- a/opendc-web/opendc-web-ui/src/style-globals/_variables.sass
+++ /dev/null
@@ -1,31 +0,0 @@
-// Sizes and Margins
-$document-padding: 20px
-$inter-element-margin: 5px
-$standard-border-radius: 5px
-$side-menu-width: 350px
-$color-indicator-width: 140px
-
-$global-padding: 30px
-$side-bar-width: 350px
-$navbar-height: 50px
-$navbar-padding: 10px
-
-// Durations
-$transition-length: 150ms
-
-// Colors
-$gray-very-dark: #5c5c5c
-$gray-dark: #aaa
-$gray-semi-dark: #bbb
-$gray-semi-light: #ccc
-$gray-light: #ddd
-$gray-very-light: #eee
-$blue: #00A6D6
-$blue-dark: #0087b5
-$blue-very-dark: #006182
-$blue-light: #deebf7
-
-// Media queries
-$screen-sm: 768px
-$screen-md: 992px
-$screen-lg: 1200px
diff --git a/opendc-web/opendc-web-ui/src/style-globals/_variables.scss b/opendc-web/opendc-web-ui/src/style-globals/_variables.scss
new file mode 100644
index 00000000..e3df6cbd
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/style-globals/_variables.scss
@@ -0,0 +1,31 @@
+// Sizes and Margins
+$document-padding: 20px;
+$inter-element-margin: 5px;
+$standard-border-radius: 5px;
+$side-menu-width: 350px;
+$color-indicator-width: 140px;
+
+$global-padding: 30px;
+$side-bar-width: 350px;
+$navbar-height: 50px;
+$navbar-padding: 10px;
+
+// Durations
+$transition-length: 150ms;
+
+// Colors
+$gray-very-dark: #5c5c5c;
+$gray-dark: #aaa;
+$gray-semi-dark: #bbb;
+$gray-semi-light: #ccc;
+$gray-light: #ddd;
+$gray-very-light: #eee;
+$blue: #00a6d6;
+$blue-dark: #0087b5;
+$blue-very-dark: #006182;
+$blue-light: #deebf7;
+
+// Media queries
+$screen-sm: 768px;
+$screen-md: 992px;
+$screen-lg: 1200px;