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, 4 insertions, 4 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index 55f98900..bf18f1c4 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -14,7 +14,7 @@ import { userIsLoggedIn } from '../../auth/index'
 import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
-import './Navbar.sass'
+import { login, navbar, opendcBrand } from './Navbar.module.scss'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -59,7 +59,7 @@ export const LoggedInSection = () => {
             ) : (
                 <NavItem route="login">
                     <GitHubLink />
-                    <Login visible={true} />
+                    <Login visible={true} className={login} />
                 </NavItem>
             )}
         </Nav>
@@ -71,10 +71,10 @@ const Navbar = ({ fullWidth, children }) => {
     const toggle = () => setIsOpen(!isOpen)
 
     return (
-        <RNavbar fixed="top" color="light" light expand="lg" id="navbar">
+        <RNavbar fixed="top" color="light" light expand="lg" id="navbar" className={navbar}>
             <Container fluid={fullWidth}>
                 <NavbarToggler onClick={toggle} />
-                <NavbarBrand tag={Link} to="/" title="OpenDC" className="opendc-brand">
+                <NavbarBrand tag={Link} to="/" title="OpenDC" className={opendcBrand}>
                     <img src="/img/logo.png" alt="OpenDC" />
                 </NavbarBrand>