Merge pull request #119 from Athaxv/css-input-error-#98

Css input error #98
Bitbox-Connect · Oct 16, 2024 · a61248d · a61248d
2 parents 289e1e1 + d151370
commit a61248d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 13 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/src/component/Login.jsx b/client/src/component/Login.jsx
@@ -6,7 +6,7 @@ import "./css/Login.css";
 
 const host = "http://localhost:5000";
 
-const Login = (props) => {
+const Login = ({mode}) => {
   const [credentials, setCredentials] = useState({ email: "", password: "" });
   const [forgotPasswordModalVisible, setForgotPasswordModalVisible] =
     useState(false);
@@ -84,7 +84,11 @@ const Login = (props) => {
             name="email"
             aria-describedby="emailHelp"
             autoComplete="on"
-            style={{ backgroundColor: props.mode === 'dark' ? '#333' : '#fff', color: props.mode === 'dark' ? '#fff' : '#000' }}
+            style={{
+              backgroundColor: mode === 'dark' ? 'black' : 'white',
+              color: mode === 'dark' ? 'white' : 'black',
+            }}
+
           />
           <i className="fa-solid fa-user"></i>
         </div>
@@ -98,9 +102,15 @@ const Login = (props) => {
             onChange={onChange}
             name="password"
             autoComplete="on"
-            style={{ backgroundColor: props.mode === 'dark' ? '#333' : '#fff', color: props.mode === 'dark' ? '#fff' : '#000' }}
+            style={{
+              backgroundColor: mode === 'dark' ? 'black' : 'white',
+              color: mode === 'dark' ? 'white' : 'black',
+            }}
           />
-          <i className="fa-solid fa-lock"></i>
+          <i className="fa-solid fa-lock"  style={{
+        backgroundColor: mode === 'dark' ? 'black' : 'white',
+        color: mode === 'dark' ? 'white' : 'black',
+      }}></i>
         </div>
         <Button className="submit" type="submit">
           Login

diff --git a/client/src/component/Signup.jsx b/client/src/component/Signup.jsx
@@ -2,14 +2,15 @@ import { Eye, EyeOff} from "lucide-react";
 import PropTypes from "prop-types";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import {  Input  } from "antd";
 import "./css/Login.css";
 import { registerValidation } from "../validations/validation";
 
 // import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
 // import { auth } from '../component/Firebase/Setup';
 const host = "http://localhost:5000";
 
-const Signup = (props) => {
+const Signup = ({mode}) => {
   // const [value, setValue] = useState('');
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
@@ -263,7 +264,7 @@ const Signup = (props) => {
         <h1 className="title">Sign Up</h1>
         <span className="title-line"></span>
         <div className="inp">
-          <input
+          <Input
             type="text"
             className="input"
             placeholder="Name"
@@ -273,9 +274,16 @@ const Signup = (props) => {
             id="name"
             autoComplete="on"
             value={name}
+            style={{
+              backgroundColor: mode === 'dark' ? 'black' : 'white',
+              color: mode === 'dark' ? 'white' : 'black',
+            }}
           />
           {errors.name && <div className="text-danger">{errors.name}</div>}
-          <i className="fa-solid fa-user"></i>
+          <i className="fa-solid fa-user"  style={{
+        backgroundColor: mode === 'dark' ? 'black' : 'white',
+        color: mode === 'dark' ? 'white' : 'black',
+      }}></i>
         </div>
         <div className="inp">
           <input
@@ -288,11 +296,18 @@ const Signup = (props) => {
             aria-describedby="emailHelp"
             autoComplete="on"
             value={email}
+            style={{
+              backgroundColor: mode === 'dark' ? 'black' : 'white',
+              color: mode === 'dark' ? 'white' : 'black',
+            }}
           />
           {errors.email && <div className="text-danger">{errors.email}</div>}
           <i className="fa-solid fa-user"></i>
         </div>
-        <div className="inp">
+        <div className="inp"  style={{
+        backgroundColor: mode === 'dark' ? 'black' : 'white',
+        color: mode === 'dark' ? 'white' : 'black',
+      }}>
           <input
             type={showPassword ? "text" : "password"}
             className="input"
@@ -303,9 +318,16 @@ const Signup = (props) => {
             minLength={5}
             autoComplete="on"
             value={password}
+            style={{
+              backgroundColor: mode === 'dark' ? 'black' : 'white',
+              color: mode === 'dark' ? 'white' : 'black',
+            }}
           />
           {errors.password && (
-            <div className="text-danger">{errors.password}</div>
+            <div className="text-danger"  style={{
+              backgroundColor: mode === 'dark' ? 'black' : 'white',
+              color: mode === 'dark' ? 'white' : 'black',
+            }}>{errors.password}</div>
           )}
           <button
             type="button"
@@ -318,7 +340,10 @@ const Signup = (props) => {
               <Eye className="w-5 h-5" />
             )}
           </button>
-          <i className="fa-solid fa-user"></i>
+          <i className="fa-solid fa-user"  style={{
+        backgroundColor: mode === 'dark' ? 'black' : 'white',
+        color: mode === 'dark' ? 'white' : 'black',
+      }}></i>
         </div>
         <div className="inp">
           <input

diff --git a/client/src/component/css/Login.css b/client/src/component/css/Login.css
@@ -59,11 +59,14 @@ body{
     font-size: 17px;
 }
 
+
+
 /*Changed this for dark-mode input toggle (by anothercoder-nik)*/
-.dark-mode .input {
+/* .dark-mode .input {
     color: #ffffff; /* White text for dark mode */
-    background: #000000; /* Black background for dark mode */
-}
+/*     background: #000000; /* Black background for dark mode */ 
+/* } */ 
+
 .submit{
     border: none;
     outline: none;