summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/topologies/sidebar
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2022-11-13 13:17:34 +0000
committerFabian Mastenbroek <mail.fabianm@gmail.com>2022-11-13 13:17:34 +0000
commitfcb3a5980606a1ab7f15fa9185f9684a7702b24f (patch)
tree09bc65562a6533101e2f7d00b2a6f284e3bdeb70 /opendc-web/opendc-web-ui/src/components/topologies/sidebar
parent9d06fb04319a50c26599f2da5387a2d03bee15ec (diff)
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.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar')
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css (renamed from opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss)22
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css (renamed from opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss)0
4 files changed, 12 insertions, 14 deletions
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.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css
index 45dc98da..3853c625 100644
--- 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.css
@@ -20,18 +20,16 @@
* 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);
+.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);
+ --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);
- }
- }
+.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/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