change to scss and various other edits

Co-authored-by: Cooperzilla <[email protected]>

Author: SamGu-NRX

frontend/package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "gh-pages": "^6.1.1",
     "postcss": "^8.4.38",
+    "sass": "^1.77.6",
     "tailwindcss": "^3.4.4",
     "vite": "^5.3.2"
   },

frontend/pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import React from 'react';
 import useModal from '../hooks/useModal';
 import Modal from './Modal';
-import '../styles/Button.css';
+import '../styles/Button.scss';
 
 const ApplyButton = () => {
   const { isOpen, openModal, closeModal } = useModal();

frontend/src/components/ApplyButton.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import '../styles/Gradient.css';
+import '../styles/Gradient.scss';
 
 function MovingGradient() {
   const [gradient, setGradient] = useState('');

frontend/src/components/DynamicGradient.jsx

@@ -1,5 +1,5 @@
-import '../styles/ExploreAI.css';
-import '../styles/App.css';
+import '../styles/ExploreAI.scss';
+import '../styles/App.scss';
 import PropTypes from 'prop-types';
 
 // Background Component

frontend/src/components/ExploreAI.jsx

@@ -1,5 +1,5 @@
-import "../../styles/App.css";
-import "./Header.css";
+import "../../styles/App.scss";
+import "./Header.scss";
 import getMode from "../../utils/getMode";
 import { Link } from "@tanstack/react-router";
 

frontend/src/components/GoogleSignInButton/styles.css frontend/src/components/GoogleSignInButton/styles.scss

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import '../styles/Button.css';
+import '../styles/Button.scss';
 
 const Modal = ({modalType = 'Confirm',
   isOpen, onClose,

frontend/src/components/Header/Header.jsx

@@ -42,7 +42,7 @@
 
 
 import { useState, useEffect } from 'react';
-import '../styles/Popup.css';
+import '../styles/Popup.scss';
 
 const Popup = () => {
     const [isVisible, setIsVisible] = useState(false);

frontend/src/components/Header/Header.css frontend/src/components/Header/Header.scss

@@ -1,5 +1,5 @@
 import { toast } from 'sonner';
-import '../styles/ToastNotif.css'; // Include any additional styles here
+import '../styles/ToastNotif.scss'; // Include any additional styles here
 import getMode from '../utils/getMode';
 
 // Function to show toast notification

frontend/src/components/Loading/Loading.css frontend/src/components/Loading/Loading.scss

@@ -2,8 +2,8 @@ import React, { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
-import './styles/tailwind.css';
-import './styles/App.css';
+import './styles/tailwind.scss';
+import './styles/App.scss';
 import { HelmetProvider } from 'react-helmet-async';
 import { AuthContextProvider } from './context/AuthContext';
 

frontend/src/components/Modal.jsx

@@ -15,6 +15,7 @@ import { Route as SyllabusImport } from './routes/Syllabus'
 import { Route as StaffImport } from './routes/Staff'
 import { Route as LoginImport } from './routes/Login'
 import { Route as InquiryImport } from './routes/Inquiry'
+import { Route as DashboardImport } from './routes/Dashboard'
 import { Route as IndexImport } from './routes/index'
 
 // Create/Update Routes
@@ -39,6 +40,11 @@ const InquiryRoute = InquiryImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const DashboardRoute = DashboardImport.update({
+  path: '/Dashboard',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const IndexRoute = IndexImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
@@ -55,6 +61,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
+    '/Dashboard': {
+      id: '/Dashboard'
+      path: '/Dashboard'
+      fullPath: '/Dashboard'
+      preLoaderRoute: typeof DashboardImport
+      parentRoute: typeof rootRoute
+    }
     '/Inquiry': {
       id: '/Inquiry'
       path: '/Inquiry'
@@ -90,6 +103,7 @@ declare module '@tanstack/react-router' {
 
 export const routeTree = rootRoute.addChildren({
   IndexRoute,
+  DashboardRoute,
   InquiryRoute,
   LoginRoute,
   StaffRoute,
@@ -105,6 +119,7 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.jsx",
       "children": [
         "/",
+        "/Dashboard",
         "/Inquiry",
         "/Login",
         "/Staff",
@@ -114,6 +129,9 @@ export const routeTree = rootRoute.addChildren({
     "/": {
       "filePath": "index.jsx"
     },
+    "/Dashboard": {
+      "filePath": "Dashboard.jsx"
+    },
     "/Inquiry": {
       "filePath": "Inquiry.jsx"
     },

frontend/src/components/Popup.jsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/Dashboard')({
+  component: () => <div>Hello /Dashboard!</div>
+})

frontend/src/components/ToastNotif.jsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import SignIn from '../components/Login/SignIn'
 import { GoogleButton } from 'react-google-button'
 import { UserAuth } from '../context/AuthContext';
-import '../styles/Login.css';
+import '../styles/Login.scss';
 
 export const Route = createFileRoute('/Login')({
     component: Login,