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.

1 files changed, 35 insertions, 43 deletions

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