Changed the ui of the website

Author: a3ryk

package.json

@@ -10,10 +10,13 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.1.4",
     "@tailwindcss/line-clamp": "^0.4.4",
     "animate.css": "^4.1.1",
     "autoprefixer": "^10.4.16",
     "axios": "^1.4.0",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "chart.js": "^4.4.3",
     "dotenv": "^16.3.1",
     "eslint": "8.46.0",
@@ -34,7 +37,9 @@
     "react-transition-group": "^4.4.5",
     "sharp": "^0.33.1",
     "socket.io-client": "^4.7.5",
-    "tailwindcss": "^3.3.3"
+    "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss": "^3.3.3",
+    "typewriter-effect": "^2.21.0"
   },
   "main": "index.js",
   "repository": "https://github.com/WaifuAPI/website.git",

public/logo512.png

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 import "tailwindcss/tailwind.css";
 import "../styles/globals.css";
+import "tailwind-scrollbar";
 import Head from "next/head";
 import Script from "next/script";
 

src/pages/_app.js

@@ -1,9 +1,11 @@
-import Link from 'next/link'
-import { useEffect } from 'react';
-import { toast, ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 const ErrorPage = ({ message }) => {
+  const [theme, setTheme] = useState("dark"); // Default to light theme
+
   useEffect(() => {
     // Display toast notification when component mounts
     const toastId = toast.error('Click "Re-authenticate" to continue.', {
@@ -17,18 +19,22 @@ const ErrorPage = ({ message }) => {
   }, []);
 
   const handleReauthClick = () => {
-    toast.info('Re-authenticating...', {
+    toast.info("Re-authenticating...", {
       autoClose: 2000,
     });
 
     setTimeout(() => {
       // Redirect to the dashboard page after waiting
-      window.location.href = '/dashboard';
+      window.location.href = "/dashboard";
     }, 3000);
   };
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-white text-black">
+    <div
+      className={`flex flex-col items-center justify-center min-h-screen  ${
+        theme === "dark" ? "bg-gray-900 text-white" : "bg-white text-black"
+      }`}
+    >
       <p className="text-lg mb-6">{message}</p>
       <div className="flex space-x-4 mt-4">
         <button
@@ -44,7 +50,11 @@ const ErrorPage = ({ message }) => {
           Home
         </Link>
       </div>
-      <ToastContainer position="bottom-right" autoClose={3000} />
+      <ToastContainer
+        position="bottom-right"
+        autoClose={3000}
+        theme={theme === "dark" ? "dark" : "light"}
+      />
     </div>
   );
 };