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.

15 files changed, 135 insertions, 130 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