fixed login but design is bruh

src/App.tsx

@@ -1,7 +1,14 @@
 import { BrowserRouter as Router, Routes, Route, Navigate, Outlet, useLocation } from 'react-router-dom';
-import {useContext, useEffect, useState } from "react";
+import {useEffect, useState } from "react";
 
-import AuthContext, { AuthProvider } from "./auth/auth-provider"
+import { ToastContainer } from "react-toastify";
+import {
+  argbFromHex,
+  themeFromSourceColor,
+  applyTheme,
+} from "@material/material-color-utilities";
+
+import { AuthProvider } from "./auth/auth-provider"
 import ping from "./auth/ping";
 
 import Login from "./pages/login/login"
@@ -14,8 +21,22 @@ import useAuth from './auth/auth';
 
 
 function App() {
+  const theme = themeFromSourceColor(argbFromHex("ffddaf"));
+  const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  applyTheme(theme, { target: document.body, dark: systemDark });
   return (
     <AuthProvider>
+    <>
+      <ToastContainer
+        position="top-right"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick={false}
+        rtl={false}
+        theme={"light"}
+        // transition={Bounce}
+      />
       <Router>
         <Routes>
           <Route path="/login" element={<Login />} />
@@ -30,13 +51,14 @@ function App() {
           <Route path="*" element={<div>404</div>} />
         </Routes>
       </Router>
+    </>
     </AuthProvider>
   );
 }
 
 
 const PrivateRoute = () => {
-  const { token } = useAuth();
+  const { token, loading } = useAuth();
   const location = useLocation();
   const [checked, setChecked] = useState(false);
   const [isValid, setIsValid] = useState(false);
@@ -49,14 +71,15 @@ const PrivateRoute = () => {
         return;
       }
       const result = await ping(token);
-      console.log(result)
       setIsValid(result);
       setChecked(true);
     };
-    checkAuth();
-  }, [token]);
+    if (!loading) {
+      checkAuth();
+    }
+  }, [token, loading]);
 
-  if (!checked) {
+  if (loading || !checked) {
     return <div>Checking server availability...</div>;
   }