removed depreciated getMode and cleaned up code

Author: Cooperzilla

frontend/src/components/ApplyButton.tsx

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

frontend/src/components/ContactForm.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef } from 'react';
 import Modal from './Modal';
-import useModal from '../hooks/useModal';
-import sendEmails from '../services/emailService';
+import useModal from '@/hooks/useModal';
+import sendEmails from '@/services/emailService';
 import showNotif from './ToastNotif';
 import { Toaster } from 'sonner';
 

frontend/src/components/ContactUs.tsx

@@ -1,7 +1,7 @@
 import Aos from 'aos';
 import 'aos/dist/aos.css';
 import { useEffect } from 'react';
-import AOSInit from '../utils/aos';
+import AOSInit from '@/utils/aos';
 
 const ContactSection = () => {
 

frontend/src/components/DynamicGradient.tsx

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

frontend/src/components/ExploreAI.tsx

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

frontend/src/components/GoogleSignInButton/SignInButton.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import './styles.css'; 
+import './styles.scss'; 
 
 const GoogleSignInButton = ({ clientId, onSuccess, onFailure }) => {
   useEffect(() => {

frontend/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import "../../styles/App.scss";
+import "@/styles/App.scss";
 import "./Header.scss";
 import { useState, useEffect } from "react";
 import getMode from "../../utils/getMode";

frontend/src/components/Loading/Loading.tsx

@@ -1,4 +1,4 @@
-import './Loading.css';
+import './Loading.scss';
 
 const Loading = () => {
   return (

frontend/src/components/Login/ChangePassword.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { auth, updatePassword } from '../../firebaseConfig';
+import { auth, updatePassword } from '@/../firebaseConfig';
 
 const ChangePassword = () => {
   const [currentPassword, setCurrentPassword] = useState('');

frontend/src/components/Modal.tsx

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

frontend/src/components/Popup.tsx

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

frontend/src/components/ToastNotif.tsx

@@ -1,6 +1,6 @@
 import { toast } from 'sonner';
-import '../styles/ToastNotif.scss'; // Include any additional styles here
-import getMode from '../utils/getMode';
+import '@/styles/ToastNotif.scss'; // Include any additional styles here
+import getMode from '@/utils/getMode';
 
 // Function to show toast notification
 const showNotif = (message, type) => {

frontend/src/components/ui/aurora-background.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { cn } from "../../utils/cn";
+import { cn } from "@/utils/cn";
 import { ReactNode } from "react";
 
 interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {

frontend/src/components/ui/background-gradient.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "@/utils/cn";
 import { motion } from "framer-motion";
 
 export const BackgroundGradient = ({

frontend/src/components/ui/bento-grid.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "@/utils/cn";
 
 export const BentoGrid = ({
   className,

frontend/src/context/AuthContext.tsx

@@ -7,7 +7,7 @@ import {
  } from "firebase/auth";
 
 import { useState, useContext, createContext, useEffect } from "react";
-import { auth } from "../firebaseConfig";
+import { auth } from "@/firebaseConfig";
 
 const AuthContext = createContext();
 

frontend/src/routes/Dashboard.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
-import Sidebar from '../components/Dashboard/Sidebar';
-import Dash from '../components/Dashboard/Dashboard';
-import TodoList from '../components/Dashboard/TodoList';
+import Sidebar from '@/components/Dashboard/Sidebar';
+import Dash from '@/components/Dashboard/Dashboard';
+import TodoList from '@/components/Dashboard/TodoList';
 
 function Dashboard() {
   return (

frontend/src/routes/Inquiry.tsx

@@ -1,24 +1,22 @@
-import React from 'react';
+import React from "react";
 // import useModal from '../hooks/useModal';
 // import Modal from '../components/Modal';
 // import {Route} from 'react-router-dom';
-import ContactForm from '../components/ContactForm';
-import { createFileRoute } from '@tanstack/react-router'
-import { Helmet } from 'react-helmet-async';
-import getMode from '../utils/getMode';
+import ContactForm from "@/components/ContactForm";
+import { createFileRoute } from "@tanstack/react-router";
+import { Helmet } from "react-helmet-async";
 
 //form invalid  border-[]
-export const Route = createFileRoute('/Inquiry')({
+export const Route = createFileRoute("/Inquiry")({
   component: Inquiry,
-})
+});
 
 function Inquiry() {
-  var colorMode = getMode();
-  
   return (
-    <div data-scroll-section id='main-container'
-    className={(colorMode === "dark") ? "text-white" : "text-black"}
-    style={{ backgroundColor: (colorMode === 'dark') ? "#18181B" : "#f3f3f3" }}
+    <div
+      data-scroll-section
+      id="main-container"
+      className="text-white dark:text-black bg-[#18181B] dark:bg-[#f3f3f3]"
     >
       <Helmet>
         <title>LuminAI - Inquiry</title>
@@ -32,7 +30,7 @@ function Inquiry() {
         </form>
       </div>
     </div>
-  )
+  );
 }
 
 export default Inquiry;

frontend/src/routes/Login.tsx

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

frontend/src/routes/Staff.tsx

@@ -1,18 +1,18 @@
 import { useState, useEffect } from "react";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
-import { getItems } from "../services/directus";
+import { getItems } from "@/services/directus";
 
 import { createDirectus, rest, readItems } from "@directus/sdk";
 
 import AOS from "aos";
 import "aos/dist/aos.css";
 
-import getMode from "../utils/getMode";
-import MovingGradient from "../components/DynamicGradient";
-import { BackgroundGradient } from "../components/ui/background-gradient";
-import "../styles/App.scss";
-import "../styles/Staff.scss";
+import getMode from "@/utils/getMode";
+import MovingGradient from "@/components/DynamicGradient";
+import { BackgroundGradient } from "@/components/ui/background-gradient";
+import "@/styles/App.scss";
+import "@/styles/Staff.scss";
 
 export const Route = createFileRoute("/Staff")({
   component: Staff,

frontend/src/routes/Syllabus.tsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { createFileRoute } from '@tanstack/react-router';
-import getMode from '../utils/getMode';
+import getMode from '@/utils/getMode';
 import { Helmet } from 'react-helmet-async';
 
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 
-import '../styles/Syllabus.scss';
+import '@/styles/Syllabus.scss';
 
 export const Route = createFileRoute('/Syllabus')({
   component: Syllabus,
@@ -21,8 +21,7 @@ function Syllabus() {
 
   return (
     <div data-scroll-section id='main-container'
-      className={(colorMode === "dark") ? "text-white" : "text-black"}
-      style={{ backgroundColor: (colorMode === 'dark') ? "#18181B" : "#f3f3f3" }}
+      className="text-white dark:text-black bg-[#18181B] dark:bg-[#f3f3f3]"
     >
       <Helmet>
         <title>LuminAI - Syllabus</title>

frontend/src/routes/__root.jsx

@@ -5,14 +5,14 @@ import "locomotive-scroll/dist/locomotive-scroll.css";
 import AOS from "aos";
 import "aos/dist/aos.css";
 
-import AOSInit from "../utils/aos";
-// import Preloader from '../components/Preloader.jsx';
-
-import Header from "../components/Header/Header";
-import Footer from "../components/Footer";
-import getMode from "../utils/getMode";
-import "../components/Header/Header.scss";
-import "../styles/App.scss";
+import AOSInit from "@/utils/aos";
+// import Preloader from '@/components/Preloader.jsx';
+
+import Header from "@/components/Header/Header";
+import Footer from "@/components/Footer";
+import getMode from "@/utils/getMode";
+import "@/components/Header/Header.scss";
+import "@/styles/App.scss";
 
 export const Route = createRootRoute({
   component: Root,

frontend/src/routes/index.tsx

@@ -1,19 +1,19 @@
 import { motion, useAnimation } from "framer-motion";
-import { AuroraBackground } from "../components/ui/aurora-background";
+import { AuroraBackground } from "@/components/ui/aurora-background";
 
 import 'aos/dist/aos.css';
 
 import ApplyButton from '../components/ApplyButton';
-import '../styles/App.scss';
+import '@/styles/App.scss';
 // import Aos from 'locomotive-aos';
 
 import { Toaster } from 'sonner';
-import showNotif from '../components/ToastNotif';
-import getMode from '../utils/getMode';
+import showNotif from '@/components/ToastNotif';
+import getMode from '@/utils/getMode';
 import { createFileRoute } from '@tanstack/react-router'
 import { Helmet } from 'react-helmet-async';
-import ExploreAI from '../components/ExploreAI';
-import ContactUs from '../components/ContactUs';
+import ExploreAI from '@/components/ExploreAI';
+import ContactUs from '@/components/ContactUs';
 import { useEffect, useState } from "react";
 import { Typewriter } from "react-simple-typewriter";
 import ApplicationBanner from "@/components/ApplicationBanner/ApplicationBanner";