From 3d39e5e4c486067c4c51b0d9c0e0783df1278393 Mon Sep 17 00:00:00 2001
From: Bhumika <sharmabhmi@gmail.com>
Date: Fri, 25 Oct 2024 16:57:40 +0530
Subject: [PATCH] Edited accordingly for light theme

---
 src/css/Auth.css         |  2 +-
 src/pages/auth/Login.jsx | 20 +++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/css/Auth.css b/src/css/Auth.css
index c0e3786..1fe1e8b 100644
--- a/src/css/Auth.css
+++ b/src/css/Auth.css
@@ -2,12 +2,12 @@
   width: auto;
   max-width: 500px;
   border-radius: 0.75rem;
-  background-color: rgba(17, 24, 39, 1);
   padding: 2rem;
   color: rgba(243, 244, 246, 1);
   margin: auto;
 }
 
+
 .title {
   text-align: center;
   font-size: 1.5rem;
diff --git a/src/pages/auth/Login.jsx b/src/pages/auth/Login.jsx
index 59713f7..0ae2229 100644
--- a/src/pages/auth/Login.jsx
+++ b/src/pages/auth/Login.jsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState ,useContext} from 'react';
 import axios from 'axios';
 import '../../css/Auth.css';
 import { FaGithub, FaGoogle, FaXTwitter, FaEye, FaEyeSlash } from 'react-icons/fa6';
+import { Context } from "../../context/Context";
 
 const URL = `${import.meta.env.VITE_BACKEND_URL}/api/auth/login`;
 
@@ -11,6 +12,7 @@ const Login = () => {
 	const [passwordVisible, setPasswordVisible] = useState(false);
 	const [error, setError] = useState('');
 	const [success, setSuccess] = useState('');
+  const { isDarkMode } = useContext(Context);
 
 	const togglePasswordVisibility = () => {
 		setPasswordVisible(!passwordVisible);
@@ -31,22 +33,22 @@ const Login = () => {
 	};
 
 	return (
-		<div className="form-container mb-4">
+		<div className="form-container mb-4" style={{ backgroundColor: isDarkMode ? "#111827" : "#A2CA71" }}>
 			<p className="title">Login</p>
 
 			<form className="form" onSubmit={handleSubmit}>
 				{error && <p className="error">{error}</p>}
 				{success && <p className="success">{success}</p>}
 				<div className="input-group">
-					<label htmlFor="email">Email</label>
-					<input type="email" name="email" id="email" placeholder="Enter you email" autoComplete='off'
+					<label htmlFor="email" style={{ color: isDarkMode ? "#9ca3af" : "#185519" }}>Email</label>
+					<input type="email" name="email" id="email" placeholder="Enter you email" autoComplete='off' style={{ backgroundColor: isDarkMode ? "#111827" : "#F6FCDF" , color: isDarkMode ? "#F3F4F6" : "#111827" ,borderColor:isDarkMode?"":""}}
 						value={email} onChange={(e) => setEmail(e.target.value)} required />
 				</div>
 
 				<div className="input-group">
-					<label htmlFor="password">Password</label>
+					<label htmlFor="password" style={{ color: isDarkMode ? "#9ca3af" : "#185519" }}>Password</label>
 					<div className="password-container">
-						<input type={passwordVisible ? "text" : "password"} name="password" id="password" placeholder="Enter you password"
+						<input type={passwordVisible ? "text" : "password"} name="password" id="password" placeholder="Enter you password" style={{ backgroundColor: isDarkMode ? "#111827" : "#F6FCDF" }}
 							value={password} onChange={(e) => setPassword(e.target.value)} required />
 						<button
 							type="button"
@@ -62,12 +64,12 @@ const Login = () => {
 					</div>
 				</div>
 
-				<button type="submit" className="sign">Sign in</button>
+				<button type="submit" className="sign" style={{ backgroundColor: isDarkMode ? "#A78BFA" : "#F6E96B" }}>Sign in</button>
 			</form>
 
 			<div className="social-message">
 				<div className="line"></div>
-				<p className="message">Login with social accounts</p>
+				<p className="message" style={{ color: isDarkMode ? "#9ca3af" : "#185519" }}>Login with social accounts</p>
 				<div className="line"></div>
 			</div>
 
@@ -77,7 +79,7 @@ const Login = () => {
 				<button aria-label="Log in with GitHub" className="icon"><FaGithub /></button>
 			</div>
 
-			<p className="signup">Don't have an account?
+			<p className="signup" style={{ color: isDarkMode ? "#9ca3af" : "#185519" }}>Don't have an account?
 				<a rel="noopener noreferrer" href="/auth/signup"> Sign up</a>
 			</p>
 		</div>