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/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
index 54605775..f652429d 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
@@ -2,10 +2,10 @@ import React from 'react'
 import GoogleLogin from 'react-google-login'
 import { useDispatch } from 'react-redux'
 import { logIn } from '../../actions/auth'
+import { Button } from 'reactstrap'
 import config from '../../config'
 
-const Login = (props) => {
-    const { visible } = props
+function Login({ visible, className }) {
     const dispatch = useDispatch()
 
     const onLogin = (payload) => dispatch(logIn(payload))
@@ -34,9 +34,9 @@ const Login = (props) => {
             onSuccess={onAuthResponse}
             onFailure={onAuthFailure}
             render={(renderProps) => (
-                <span onClick={renderProps.onClick} className="login btn btn-primary">
+                <Button color="primary" onClick={renderProps.onClick} className={className}>
                     <span className="fa fa-google" /> Login with Google
-                </span>
+                </Button>
             )}
         />
     )