Fixed: login page colour difference on dark mode

Author: joriordan332

src/views/Login.css

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Eclipse, Sun } from 'lucide-react';
 import { Context } from '../Context';
-import './Login.css';
 
 function Login() {
 	const { darkMode, setDarkMode } = useContext(Context);
@@ -22,37 +21,39 @@ function Login() {
 	};
 
 	return (
-		<div
-			className={`${darkMode && 'dark'} flex justify-center items-center h-screen`}
-		>
-			<div className="bg-transparent text-white  w-11/12 max-w-lg p-8 ">
-				<div className="flex justify-center items-center mb-6">
-					{darkMode ? (
-						<img src="grocerease-light.png" alt="Shopping app logo" />
-					) : (
-						<img src="grocerease.png" alt="Shopping app logo" />
-					)}
-				</div>
-				<div className="flex justify-center items-center h-2/5">
-					<div className="flex justify-center items-center bg-pink-500 hover:bg-pink-500 hover:bg-opacity-80 w-2/4 h-1/4 rounded-xl p-2">
-						<button type="button" onClick={signIn}>
-							Sign In
-						</button>
+		<div className={`${darkMode && 'dark'} min-h-screen`}>
+			<div className="flex justify-center items-center h-screen dark:text-white bg-white dark:bg-black">
+				<div className="bg-transparent text-white  w-11/12 max-w-lg p-8 ">
+					<div className="flex justify-center items-center mb-6">
+						{darkMode ? (
+							<img src="grocerease-light.png" alt="Shopping app logo" />
+						) : (
+							<img src="grocerease.png" alt="Shopping app logo" />
+						)}
+					</div>
+					<div className="flex justify-center items-center h-2/5">
+						<div className="flex justify-center items-center bg-pink-500 hover:bg-pink-500 hover:bg-opacity-80 w-2/4 h-1/4 rounded-xl p-2">
+							<button type="button" onClick={signIn}>
+								Sign In
+							</button>
+						</div>
 					</div>
 				</div>
-			</div>
-			<Button
-				onClick={toggleDarkMode}
-				className="fixed w-16 bottom-16 right-16 p-2 rounded-full text-primary-pink hover:text-primary-pink hover:text-opacity-60 font-semibold"
-			>
-				<abbr title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}>
-					<button
-						className={`${darkMode && 'dark'} rounded-full text-primary-pink hover:text-opacity-60`}
+				<Button
+					onClick={toggleDarkMode}
+					className="fixed w-16 bottom-16 right-16 p-2 rounded-full text-primary-pink hover:text-primary-pink hover:text-opacity-60 font-semibold"
+				>
+					<abbr
+						title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
 					>
-						{darkMode ? <Eclipse /> : <Sun />}
-					</button>
-				</abbr>
-			</Button>
+						<button
+							className={`${darkMode && 'dark'} rounded-full text-primary-pink hover:text-opacity-60`}
+						>
+							{darkMode ? <Eclipse /> : <Sun />}
+						</button>
+					</abbr>
+				</Button>
+			</div>
 		</div>
 	);
 }