refactor(web/ui): Drop dependency on Sass

This change updates the OpenDC web UI to not rely on Sass for
stylesheets. CSS in combination with PostCSS has become powerful enough
for our use-cases as indicated by the small differences between the CSS
and SCSS versions of our files.

By switching to CSS, we can make use of Turbopack to build the project,
which is a re-implementation of Webppack in Rust and is able to build
projects much faster.

9 files changed, 51 insertions, 53 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
index 8bf529b2..1b9fff72 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -5,7 +5,7 @@ import { Stage } from 'react-konva'
 import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
 import { ReactReduxContext } from 'react-redux'
 import useResizeObserver from 'use-resize-observer'
-import { mapContainer } from './MapStage.module.scss'
+import { mapContainer } from './MapStage.module.css'
 import MapLayer from './layers/MapLayer'
 import RoomHoverLayer from './layers/RoomHoverLayer'
 import ObjectHoverLayer from './layers/ObjectHoverLayer'
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css
index 47c3dde2..47c3dde2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
index f54b7c84..931ded94 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
@@ -22,7 +22,7 @@
 
 import PropTypes from 'prop-types'
 import { ChevronLeftIcon } from '@patternfly/react-icons'
-import { collapseContainer } from './Collapse.module.scss'
+import { collapseContainer } from './Collapse.module.css'
 import { Button } from '@patternfly/react-core'
 
 function Collapse({ onClick }) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css
index 0c1fac94..70fd465f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css
@@ -27,29 +27,29 @@
     bottom: 10%;
     margin: auto 0;
     height: 50px;
+}
 
-    button:global(.pf-m-tertiary) {
-        height: 100%;
-        padding: 2px;
+.collapseContainer > button:global(.pf-m-tertiary) {
+    height: 100%;
+    padding: 2px;
 
-        margin-right: var(--pf-global--spacer--xs);
-        margin-top: var(--pf-global--spacer--xs);
-        background-color: var(--pf-global--BackgroundColor--100);
-        border: none;
-        border-radius: var(--pf-global--BorderRadius--sm);
-        box-shadow: var(--pf-global--BoxShadow--sm);
+    margin-right: var(--pf-global--spacer--xs);
+    margin-top: var(--pf-global--spacer--xs);
+    background-color: var(--pf-global--BackgroundColor--100);
+    border: none;
+    border-radius: var(--pf-global--BorderRadius--sm);
+    box-shadow: var(--pf-global--BoxShadow--sm);
+}
 
-        &:not(:global(.pf-m-disabled)) {
-            background-color: var(--pf-global--BackgroundColor--100);
-        }
+.collapseContainer > button:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) {
+    background-color: var(--pf-global--BackgroundColor--100);
+}
 
-        &:after {
-            display: none;
-        }
+.collapseContainer > button:global(.pf-m-tertiary):after {
+    display: none;
+}
 
-        &:hover {
-            border: none;
-            box-shadow: var(--pf-global--BoxShadow--md);
-        }
-    }
+.collapseContainer > button:global(.pf-m-tertiary):hover {
+    border: none;
+    box-shadow: var(--pf-global--BoxShadow--md);
 }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
index 58d2ccc9..3ec893fb 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import { scaleIndicator } from './ScaleIndicator.module.scss'
+import { scaleIndicator } from './ScaleIndicator.module.css'
 
 function ScaleIndicator({ scale }) {
     return (
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css
index f19e0ff2..f19e0ff2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
index e7dc57c3..00aaf3e1 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { control, toolBar } from './Toolbar.module.scss'
+import { control, toolBar } from './Toolbar.module.css'
 import { Button } from '@patternfly/react-core'
 import { SearchPlusIcon, SearchMinusIcon, CameraIcon } from '@patternfly/react-icons'
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css
new file mode 100644
index 00000000..007389da
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css
@@ -0,0 +1,27 @@
+.toolBar {
+    position: absolute;
+    bottom: var(--pf-global--spacer--md);
+    left: var(--pf-global--spacer--xl);
+}
+
+.control:global(.pf-m-tertiary) {
+    margin-right: var(--pf-global--spacer--xs);
+    margin-top: var(--pf-global--spacer--xs);
+    background-color: var(--pf-global--BackgroundColor--100);
+    border: none;
+    border-radius: var(--pf-global--BorderRadius--sm);
+    box-shadow: var(--pf-global--BoxShadow--sm);
+}
+
+.control:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) {
+    background-color: var(--pf-global--BackgroundColor--100);
+}
+
+.control:global(.pf-m-tertiary):after {
+    display: none;
+}
+
+.control:global(.pf-m-tertiary):hover {
+    border: none;
+    box-shadow: var(--pf-global--BoxShadow--md);
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
deleted file mode 100644
index 0d505acc..00000000
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.toolBar {
-    position: absolute;
-    bottom: var(--pf-global--spacer--md);
-    left: var(--pf-global--spacer--xl);
-}
-
-.control {
-    &:global(.pf-m-tertiary) {
-        margin-right: var(--pf-global--spacer--xs);
-        margin-top: var(--pf-global--spacer--xs);
-        background-color: var(--pf-global--BackgroundColor--100);
-        border: none;
-        border-radius: var(--pf-global--BorderRadius--sm);
-        box-shadow: var(--pf-global--BoxShadow--sm);
-
-        &:not(:global(.pf-m-disabled)) {
-            background-color: var(--pf-global--BackgroundColor--100);
-        }
-
-        &:after {
-            display: none;
-        }
-
-        &:hover {
-            border: none;
-            box-shadow: var(--pf-global--BoxShadow--md);
-        }
-    }
-}