Removed button within button

the-collab-lab · Oct 19, 2024 · d60efa0 · d60efa0
1 parent 038e362
commit d60efa0
Showing 1 changed file with 29 additions and 30 deletions.
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
@@ -4,6 +4,7 @@ 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);
@@ -21,39 +22,37 @@ function Login() {
 	};
 
 	return (
-		<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
+			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>
-				<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`}
-						>
-							{darkMode ? <Eclipse /> : <Sun />}
+				<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>
-					</abbr>
-				</Button>
+					</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'}>
+					{darkMode ? (
+						<Eclipse className="w-8 h-8" />
+					) : (
+						<Sun className="w-8 h-8" />
+					)}
+				</abbr>
+			</Button>
 		</div>
 	);
 }