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.

28 files changed, 179 insertions, 140 deletions

diff --git a/opendc-web/opendc-web-ui/.gitignore b/opendc-web/opendc-web-ui/.gitignore
index 3340b9ee..54eada4c 100644
--- a/opendc-web/opendc-web-ui/.gitignore
+++ b/opendc-web/opendc-web-ui/.gitignore
@@ -24,7 +24,4 @@ yarn-error.log*
 # Environment variables
 .env.local
 
-# Sass output
-*.css
-
 /.next
diff --git a/opendc-web/opendc-web-ui/package-lock.json b/opendc-web/opendc-web-ui/package-lock.json
index 9da91f4f..db8d93aa 100644
--- a/opendc-web/opendc-web-ui/package-lock.json
+++ b/opendc-web/opendc-web-ui/package-lock.json
@@ -35,7 +35,6 @@
                 "redux-logger": "^3.0.6",
                 "redux-saga": "^1.2.1",
                 "redux-thunk": "^2.4.1",
-                "sass": "^1.55.0",
                 "svgsaver": "^0.9.0",
                 "use-resize-observer": "^9.0.2",
                 "uuid": "^9.0.0",
@@ -929,6 +928,8 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
             "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "normalize-path": "^3.0.0",
                 "picomatch": "^2.0.4"
@@ -1076,6 +1077,8 @@
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
             "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+            "optional": true,
+            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -1093,6 +1096,7 @@
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
             "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+            "devOptional": true,
             "dependencies": {
                 "fill-range": "^7.0.1"
             },
@@ -1187,6 +1191,8 @@
                     "url": "https://paulmillr.com/funding/"
                 }
             ],
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "anymatch": "~3.1.2",
                 "braces": "~3.0.2",
@@ -1207,6 +1213,8 @@
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
             "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "is-glob": "^4.0.1"
             },
@@ -2141,6 +2149,7 @@
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
             "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+            "devOptional": true,
             "dependencies": {
                 "to-regex-range": "^5.0.1"
             },
@@ -2217,6 +2226,7 @@
             "os": [
                 "darwin"
             ],
+            "peer": true,
             "engines": {
                 "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
             }
@@ -2459,7 +2469,9 @@
         "node_modules/immutable": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
-            "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+            "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+            "optional": true,
+            "peer": true
         },
         "node_modules/import-fresh": {
             "version": "3.3.0",
@@ -2538,6 +2550,8 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
             "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "binary-extensions": "^2.0.0"
             },
@@ -2604,6 +2618,7 @@
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
             "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "devOptional": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -2612,6 +2627,7 @@
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
             "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "devOptional": true,
             "dependencies": {
                 "is-extglob": "^2.1.1"
             },
@@ -2635,6 +2651,7 @@
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
             "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "devOptional": true,
             "engines": {
                 "node": ">=0.12.0"
             }
@@ -3091,6 +3108,8 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
             "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+            "optional": true,
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -3327,6 +3346,7 @@
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
             "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "devOptional": true,
             "engines": {
                 "node": ">=8.6"
             },
@@ -3624,6 +3644,8 @@
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
             "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "picomatch": "^2.2.1"
             },
@@ -3793,6 +3815,8 @@
             "version": "1.55.0",
             "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
             "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
@@ -4048,6 +4072,7 @@
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
             "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "devOptional": true,
             "dependencies": {
                 "is-number": "^7.0.0"
             },
@@ -5248,6 +5273,8 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
             "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+            "optional": true,
+            "peer": true,
             "requires": {
                 "normalize-path": "^3.0.0",
                 "picomatch": "^2.0.4"
@@ -5358,7 +5385,9 @@
         "binary-extensions": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-            "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+            "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+            "optional": true,
+            "peer": true
         },
         "brace-expansion": {
             "version": "1.1.11",
@@ -5373,6 +5402,7 @@
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
             "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+            "devOptional": true,
             "requires": {
                 "fill-range": "^7.0.1"
             }
@@ -5435,6 +5465,8 @@
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
             "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+            "optional": true,
+            "peer": true,
             "requires": {
                 "anymatch": "~3.1.2",
                 "braces": "~3.0.2",
@@ -5450,6 +5482,8 @@
                     "version": "5.1.2",
                     "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
                     "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+                    "optional": true,
+                    "peer": true,
                     "requires": {
                         "is-glob": "^4.0.1"
                     }
@@ -6174,6 +6208,7 @@
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
             "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+            "devOptional": true,
             "requires": {
                 "to-regex-range": "^5.0.1"
             }
@@ -6226,7 +6261,8 @@
             "version": "2.3.2",
             "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
             "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-            "optional": true
+            "optional": true,
+            "peer": true
         },
         "function-bind": {
             "version": "1.1.1",
@@ -6396,7 +6432,9 @@
         "immutable": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
-            "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+            "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+            "optional": true,
+            "peer": true
         },
         "import-fresh": {
             "version": "3.3.0",
@@ -6457,6 +6495,8 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
             "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+            "optional": true,
+            "peer": true,
             "requires": {
                 "binary-extensions": "^2.0.0"
             }
@@ -6498,12 +6538,14 @@
         "is-extglob": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "devOptional": true
         },
         "is-glob": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
             "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "devOptional": true,
             "requires": {
                 "is-extglob": "^2.1.1"
             }
@@ -6517,7 +6559,8 @@
         "is-number": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "devOptional": true
         },
         "is-number-object": {
             "version": "1.0.7",
@@ -6846,7 +6889,9 @@
         "normalize-path": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+            "optional": true,
+            "peer": true
         },
         "normalizr": {
             "version": "3.6.2",
@@ -7016,7 +7061,8 @@
         "picomatch": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "devOptional": true
         },
         "popper.js": {
             "version": "1.16.1",
@@ -7179,6 +7225,8 @@
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
             "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+            "optional": true,
+            "peer": true,
             "requires": {
                 "picomatch": "^2.2.1"
             }
@@ -7295,6 +7343,8 @@
             "version": "1.55.0",
             "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
             "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
+            "optional": true,
+            "peer": true,
             "requires": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
@@ -7479,6 +7529,7 @@
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
             "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "devOptional": true,
             "requires": {
                 "is-number": "^7.0.0"
             }
diff --git a/opendc-web/opendc-web-ui/package.json b/opendc-web/opendc-web-ui/package.json
index 49d5d0a5..864c7527 100644
--- a/opendc-web/opendc-web-ui/package.json
+++ b/opendc-web/opendc-web-ui/package.json
@@ -43,7 +43,6 @@
         "redux-logger": "^3.0.6",
         "redux-saga": "^1.2.1",
         "redux-thunk": "^2.4.1",
-        "sass": "^1.55.0",
         "svgsaver": "^0.9.0",
         "use-resize-observer": "^9.0.2",
         "uuid": "^9.0.0",
diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js
index c046f9c7..514dce2a 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/AppHeader.js
@@ -37,7 +37,7 @@ import AppHeaderTools from './AppHeaderTools'
 import AppHeaderUser from './AppHeaderUser'
 import ProjectSelector from './context/ProjectSelector'
 
-import styles from './AppHeader.module.scss'
+import styles from './AppHeader.module.css'
 
 export default function AppHeader({ nav }) {
     return (
diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss b/opendc-web/opendc-web-ui/src/components/AppHeader.module.css
index 73ef553c..9d5dbed1 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/AppHeader.module.css
@@ -28,17 +28,15 @@
     --pf-c-masthead--c-context-selector--Width: 200px;
 }
 
-.logo {
-    span {
-        margin-left: 8px;
-        color: #fff;
-        align-self: center;
-        font-weight: 600;
-        font-size: 0.9rem;
-    }
+.logo > span {
+    margin-left: 8px;
+    color: #fff;
+    align-self: center;
+    font-weight: 600;
+    font-size: 0.9rem;
+}
 
-    &:hover,
-    &:focus {
-        text-decoration: none;
-    }
+.logo:hover,
+.logo:focus > span {
+    --pf-global--link--TextDecoration: none;
 }
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js
index 5d3a6441..f3c25b79 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js
@@ -21,7 +21,7 @@
  */
 
 import PropTypes from 'prop-types'
-import { contextSelectionSection } from './ContextSelectionSection.module.scss'
+import { contextSelectionSection } from './ContextSelectionSection.module.css'
 
 function ContextSelectionSection({ children }) {
     return <section className={contextSelectionSection}>{children}</section>
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css
index 0e902af0..0e902af0 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
index 059cfea8..d2601008 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
@@ -24,7 +24,7 @@ import PropTypes from 'prop-types'
 import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core'
 import { useMemo, useState } from 'react'
 
-import styles from './ContextSelector.module.scss'
+import styles from './ContextSelector.module.css'
 
 function ContextSelector({ id, type = 'page', toggleText, items, onSelect, onToggle, isOpen, isFullHeight }) {
     const [searchValue, setSearchValue] = useState('')
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css
index 4f86ac64..7662d00c 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css
@@ -21,7 +21,7 @@
  */
 
 .pageSelector.pageSelector {
-    // Ensure this selector has precedence over the default one
+    /* Ensure this selector has precedence over the default one */
     margin-right: 20px;
 
     --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--lg);
@@ -31,16 +31,14 @@
     --pf-c-context-selector__toggle--PaddingLeft: 0;
     --pf-c-context-selector__toggle--BorderWidth: 0;
     --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--sm);
+}
 
-    & :global(.pf-c-context-selector__toggle) {
-        &:active,
-        &:focus-within,
-        &:global(.pf-m-active) {
-            --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
-        }
-    }
+.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):active,
+.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):focus-within,
+.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):global(.pf-m-active) {
+    --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
+}
 
-    &:global(.pf-m-expanded) > :global(.pf-c-context-selector__toggle) {
-        --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
-    }
+.pageSelector.pageSelector:global(.pf-m-expanded) > :global(.pf-c-context-selector__toggle) {
+    --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
 }
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 7c6d129c..5aaa56ac 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'
-import { filterPanel } from './FilterPanel.module.scss'
+import { filterPanel } from './FilterPanel.module.css'
 
 export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' }
 
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css
new file mode 100644
index 00000000..15c36821
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css
@@ -0,0 +1,7 @@
+.filterPanel {
+    display: flex;
+}
+
+.filterPanel > button {
+    flex: 1 !important;
+}
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
deleted file mode 100644
index 79cdf81a..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.filterPanel {
-    display: flex;
-
-    button {
-        flex: 1 !important;
-    }
-}
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);
-        }
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
index 5d9340b2..5aaa7834 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core'
 import { AngleLeftIcon } from '@patternfly/react-icons'
 import { useDispatch } from 'react-redux'
-import { backButton } from './TopologySidebar.module.scss'
+import { backButton } from './TopologySidebar.module.css'
 import RoomSidebar from './room/RoomSidebar'
 import RackSidebar from './rack/RackSidebar'
 import MachineSidebar from './machine/MachineSidebar'
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css
new file mode 100644
index 00000000..3853c625
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css
@@ -0,0 +1,35 @@
+/*!
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.backButton:global(.pf-c-button) {
+    align-self: center;
+    --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
+    color: var(--pf-global--Color--400);
+
+    --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
+    --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
+}
+
+.backButton:hover,
+.backButton:global(.pf-c-button):focus {
+    --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
deleted file mode 100644
index 45dc98da..00000000
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-/*!
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-.backButton {
-    &:global(.pf-c-button) {
-        align-self: center;
-        --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
-        color: var(--pf-global--Color--400);
-
-        --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
-        --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
-
-        &:hover,
-        &:focus {
-            --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
-        }
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
index 8f6ff135..cb7d3b68 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss'
+import { machineListContainer, sidebarContainer } from './RackSidebar.module.css'
 import RackNameContainer from './RackNameContainer'
 import AddPrefab from './AddPrefab'
 import DeleteRackContainer from './DeleteRackContainer'
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css
index f4c8829f..f4c8829f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css
diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js
index bac9a5af..62ce0539 100644
--- a/opendc-web/opendc-web-ui/src/pages/_app.js
+++ b/opendc-web/opendc-web-ui/src/pages/_app.js
@@ -43,7 +43,7 @@ import '@patternfly/react-styles/css/utilities/Sizing/sizing.css'
 import '@patternfly/react-styles/css/utilities/Spacing/spacing.css'
 import '@patternfly/react-styles/css/utilities/Text/text.css'
 import '@patternfly/react-styles/css/components/InlineEdit/inline-edit.css'
-import '../style/index.scss'
+import '../style/index.css'
 
 // This setup is necessary to forward the Auth0 context to the Redux context
 function Inner({ Component, pageProps }) {
diff --git a/opendc-web/opendc-web-ui/src/style/index.scss b/opendc-web/opendc-web-ui/src/style/index.css
index 7b7103a4..7b7103a4 100644
--- a/opendc-web/opendc-web-ui/src/style/index.scss
+++ b/opendc-web/opendc-web-ui/src/style/index.css