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.

4 files changed, 11 insertions, 13 deletions

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;
 }