Incorporate light/dark mode to Loading component

the-collab-lab · Oct 16, 2024 · 5aaef21 · 5aaef21
1 parent d72c30c
commit 5aaef21
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 27 deletions.
diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
@@ -1,18 +1,11 @@
-import logo from '../assets/logo.png';
-
 export function Loading() {
 	return (
-		<div className="flex flex-col items-center justify-center min-h-screen p-4 bg-bgPrimary">
+		<div className="flex flex-col items-center justify-center min-h-screen p-4 bg-bgPrimary dark:bg-bgPrimaryDark">
 			<div className="flex flex-col items-center animate-fadeIn">
-				<img
-					src={logo}
-					alt="CollabShop Logo, a collaboration platform for grocery shopping."
-					className="w-64 sm:w-72 md:w-80 lg:w-96 h-auto mb-6 max-w-full rounded-lg shadow-sm transform hover:scale-105 transition-all duration-300 ease-in-out"
-				/>
-				<h2 className="text-txtPrimary text-sm sm:text-base md:text-lg font-semibold mb-2">
+				<h2 className="text-txtPrimary dark:text-txtPrimaryDark text-sm sm:text-base md:text-lg font-semibold mb-2">
 					Please hold on while we prepare your experience.
 				</h2>
-				<div className="w-10 h-10 border-t-4 border-blue-300 rounded-full animate-spin"></div>
+				<div className="w-10 h-10 border-t-4 border-blue-300 dark:border-blue-500 rounded-full animate-spin"></div>
 			</div>
 		</div>
 	);

diff --git a/src/views/Team.jsx b/src/views/Team.jsx
@@ -1,13 +1,11 @@
 import { FaGithub, FaLinkedin, FaGlobe } from 'react-icons/fa';
-import { Loading } from '../components/Loading';
 import doribelAvatar from '../assets/avatars/doribelAvatar.jpg';
 import nicholasAvatar from '../assets/avatars/nicholasAvatar.png';
 import shuvekshaAvatar from '../assets/avatars/shuvekshaAvatar.jpg';
 import stacyAvatar from '../assets/avatars/stacyAvatar.jpg';
 import ejAvatar from '../assets/avatars/ejAvatar.png';
 import jennyAvatar from '../assets/avatars/jennyAvatar.jpg';
 import meganAvatar from '../assets/avatars/meganAvatar.jpg';
-import { useEffect, useState } from 'react';
 
 const developers = [
 	{
@@ -64,21 +62,6 @@ const mentors = [
 ];
 
 export function Team() {
-	/* This will be removed once the Logo ticket is finalized to ensure the UI is correct. */
-	const [isLoading, setIsLoading] = useState(true);
-
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setIsLoading(false);
-		}, 3000);
-
-		return () => clearTimeout(timer);
-	}, []);
-
-	if (isLoading) {
-		return <Loading />;
-	}
-
 	return (
 		<div className="bg-bgPrimary dark:bg-bgPrimaryDark p-10 text-center text-txtPrimary dark:text-txtPrimaryDark">
 			<h1 className="mb-5 text-4xl font-bold">