add scss and remove styled component

frontend/src/App.jsx

@@ -1,6 +1,6 @@
 import { MetaProvider } from '@solidjs/meta'
 import { Toaster } from 'solid-toast'
-import './App.css'
+import './App.scss'
 import { SiteContextProvider } from './context/SiteContext'
 
 function App(props) {

frontend/src/App.scss

@@ -14,11 +14,17 @@
   overflow: hidden;
 }
 
-#main-page.login-page {
-  height: 100svh;
-}
-
 #main-page .main-content {
   max-height: calc(100svh - 64px);
   overflow-y: auto;
 }
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}

frontend/src/components/Navbar/Navbar.jsx

@@ -1,5 +1,3 @@
-// import { styled } from 'solid-styled-components'
-
 import { useSiteContext } from '@context/SiteContext'
 import useAuth from '@hooks/useAuth'
 import { NAV_ROUTES } from '@routes/routes'
@@ -7,6 +5,7 @@ import { A } from '@solidjs/router'
 import { IconLogout, IconTriangle } from '@tabler/icons-solidjs'
 import { For, Show } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
+import './navbar.scss'
 
 export default function Navbar() {
   const { store, setAuth } = useSiteContext()

frontend/src/components/Navbar/index.js

@@ -0,0 +1 @@
+export { default } from './Navbar'

frontend/src/index.jsx

@@ -3,9 +3,8 @@ import { Route, Router } from '@solidjs/router'
 import { For, lazy } from 'solid-js'
 import { render } from 'solid-js/web'
 import App from './App'
-import './index.css'
+import './index.scss'
 import { ROUTES } from './routes'
-import './styles/fuware.scss'
 
 const root = document.getElementById('root')
 

frontend/src/index.scss

@@ -24,12 +24,3 @@ body {
   min-height: 100vh;
   font-size: 14px;
 }
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}

frontend/src/pages/Login/Login.jsx

@@ -4,83 +4,13 @@ import { useNavigate } from '@solidjs/router'
 import { Field, useFormHandler } from 'solid-form-handler'
 import { yupSchema } from 'solid-form-handler/yup'
 import { Show, onMount } from 'solid-js'
-import { styled } from 'solid-styled-components'
 import * as yup from 'yup'
+import './login.scss'
 
 import logo from '@assets/logo-fuware.svg'
 import useAuth from '@hooks/useAuth'
 import useToast from '@hooks/useToast'
 
-const LoginPage = styled('div')`
-  width: 100%;
-  height: 100svh;
-  display: flex;
-  padding-left: 15px;
-  padding-right: 15px;
-  background: #fff url('/images/bg-login.jpg') no-repeat fixed center;
-  background-size: cover;
-  place-items: center;
-
-  .login-wrap {
-    width: 40%;
-    max-width: 500px;
-    min-width: 320px;
-    margin: 0 auto;
-    overflow: hidden;
-    position: relative;
-
-    &:after {
-      content: '';
-      display: block;
-      width: 500px;
-      height: 500px;
-      border-radius: 15px;
-      position: absolute;
-      z-index: 2;
-      top: -120px;
-      left: -285px;
-      background: #10b981;
-      transform: rotate(45deg);
-    }
-
-    &:before {
-      content: '';
-      display: block;
-      width: 500px;
-      height: 500px;
-      border-radius: 15px;
-      position: absolute;
-      z-index: 2;
-      top: -40px;
-      left: -130px;
-      background: #ff6600;
-      transform: rotate(20deg);
-    }
-
-    .card-body {
-      position: relative;
-      z-index: 4;
-    }
-
-    .logo {
-      position: relative;
-      z-index: 4;
-      display: block;
-      width: 40%;
-      max-width: 150px;
-      min-width: 100px;
-      margin: 0 auto;
-      margin-top: 15px;
-    }
-
-    .login-box {
-      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25);
-      border-radius: 5px;
-      padding: 1rem;
-    }
-  }
-`
-
 const loginSchema = yup.object({
   username: yup.string().required('Username is required'),
   password: yup.string().required('Password is required'),
@@ -125,7 +55,7 @@ export default function Login() {
   }
 
   return (
-    <LoginPage>
+    <div class="login-page">
       <div class="card glass card-compact login-wrap shadow-xl">
         <div class="h-44">
           <picture class="logo">
@@ -218,6 +148,6 @@ export default function Login() {
           </form>
         </div>
       </div>
-    </LoginPage>
+    </div>
   )
 }

frontend/src/pages/Login/index.js

@@ -0,0 +1 @@
+export { default } from './Login'

frontend/src/pages/Login/login.scss

@@ -0,0 +1,69 @@
+.login-page {
+  width: 100%;
+  height: 100svh;
+  display: flex;
+  padding-left: 15px;
+  padding-right: 15px;
+  background: #fff url('/images/bg-login.jpg') no-repeat fixed center;
+  background-size: cover;
+  place-items: center;
+
+  .login-wrap {
+    width: 40%;
+    max-width: 500px;
+    min-width: 320px;
+    margin: 0 auto;
+    overflow: hidden;
+    position: relative;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 500px;
+      height: 500px;
+      border-radius: 15px;
+      position: absolute;
+      z-index: 2;
+      top: -120px;
+      left: -285px;
+      background: #10b981;
+      transform: rotate(45deg);
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      width: 500px;
+      height: 500px;
+      border-radius: 15px;
+      position: absolute;
+      z-index: 2;
+      top: -40px;
+      left: -130px;
+      background: #ff6600;
+      transform: rotate(20deg);
+    }
+
+    .card-body {
+      position: relative;
+      z-index: 4;
+    }
+
+    .logo {
+      position: relative;
+      z-index: 4;
+      display: block;
+      width: 40%;
+      max-width: 150px;
+      min-width: 100px;
+      margin: 0 auto;
+      margin-top: 15px;
+    }
+
+    .login-box {
+      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25);
+      border-radius: 5px;
+      padding: 1rem;
+    }
+  }
+}