Fixed Dark Mode Issue in Login and Signup Page

Trisha-tech · Aug 7, 2024 · 1ebb5ea · 1ebb5ea
1 parent bda8528
commit 1ebb5ea
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 33 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -28,18 +28,16 @@ function App() {
 
   useEffect(() => {
     if (darkMode) {
-      document.body.style.backgroundColor = '#121212';
-      document.body.style.color = 'black';
+      document.body.classList.add("dark")
     } else {
-      document.body.style.backgroundColor = 'white';
-      document.body.style.color = 'black';
+      document.body.classList.remove("dark")
     }
   }, [darkMode]);
 
   const appStyle = {
     backgroundColor: darkMode ? '#333' : '#f4f4f4',
     padding: '20px',
-    borderRadius: '8px',
+    // borderRadius: '8px',
   };
 
   return (

diff --git a/client/src/Components/SearchBar.js b/client/src/Components/SearchBar.js
@@ -11,7 +11,7 @@ const SearchBar = ({ onSearch }) => {
 
   return (
     <form onSubmit={handleSearch} className="w-full max-w-lg mx-auto my-8">
-      <div className="flex items-center border-b border-b-2 border-teal-500 py-2">
+      <div className="flex items-center border-b-2 border-teal-500 py-2">
         <input
           className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
           type="text"

diff --git a/client/src/Pages/LoginPage.jsx b/client/src/Pages/LoginPage.jsx
@@ -10,7 +10,7 @@ import Lottie from "lottie-react";
 import loginAnimation from "../Lottie-animation/loginAnimation.json";
 import axios from "axios";
 import toast, { Toaster } from "react-hot-toast";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../Context/AuthContext";
 import { useToast } from "../Context/ToastContext";
 
@@ -21,6 +21,7 @@ const LoginPage = () => {
   const [error, setError] = useState("");
   const { setUserLoggedIn } = useAuth();
   const { showToast } = useToast();
+
   let navigate = useNavigate();
 
   const handleSubmit = async (e) => {
@@ -76,26 +77,28 @@ const LoginPage = () => {
             }}
           >
             <form onSubmit={handleSubmit} className="fromRight">
-              <Typography variant="h5" align="center" gutterBottom>
+              <Typography variant="h5" align="center" gutterBottom className=" dark:text-white">
                 Login
               </Typography>
-              <TextField
-                label="email"
+              <input
+                placeholder="Email"
                 fullWidth
                 variant="outlined"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 margin="normal"
+                color="primary"
+                className="w-full p-3 mb-4 bg-transparent border border-black rounded-md dark:text-white"
               />
               <Box sx={{ position: "relative", display: "flex", alignItems: "center" }}>
-                <TextField
-                  fullWidth
+                <input
+                  placeholder="Password"
                   label="Password"
                   type={showPassword ? "text" : "password"} // Set input type dynamically
-                  variant="outlined"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   margin="normal"
+                  className="w-full p-3 bg-transparent border border-black rounded-md dark:text-white"
                 />
                 <IconButton
                   onClick={togglePasswordVisibility}
@@ -120,8 +123,8 @@ const LoginPage = () => {
               >
                 Login
               </Button>
-              <Typography align="center" sx={{ mt: 2, mr: 2 }}>
-                Don't have an account? <a href="/signup">Sign up</a>
+              <Typography align="center" sx={{ mt: 2, mr: 2 }}  className="text-black dark:text-white">
+                Don't have an account? <Link to="/signup">Sign up</Link>
               </Typography>
             </form>
           </Grid>

diff --git a/client/src/Pages/SignUpPage.jsx b/client/src/Pages/SignUpPage.jsx
@@ -2,16 +2,21 @@
 import React, { useState } from "react";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
-import { Box, Container, Grid, Typography } from "@mui/material";
+import { Box, Container, Grid, IconButton, Typography } from "@mui/material";
+import VisibilityIcon from "@mui/icons-material/Visibility"; // Import VisibilityIcon
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; // Import VisibilityOffIcon
 import Lottie from "lottie-react";
 import loginAnimation from '../Lottie-animation/loginAnimation.json'
 import axios from "axios";
 import toast, { Toaster } from "react-hot-toast"
 import { useNavigate } from "react-router-dom";
+
+
 const SignUpPage = () => {
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
+    const [showPassword, setShowPassword] = useState(false);
     // const [phone, setPhone] = useState("");
     // const [address, setAddress] = useState("");
     const [error, setError] = useState(""); //state to store error message
@@ -40,6 +45,10 @@ const SignUpPage = () => {
         }
     }
 
+    const togglePasswordVisibility = () => {
+        setShowPassword(!showPassword);
+    };
+
     return (
         <Container maxWidth="xl">
             <Toaster/>
@@ -63,34 +72,42 @@ const SignUpPage = () => {
                     >
 
                         <form onSubmit={handleSubmit}>
-                            <Typography variant="h5" align="center" gutterBottom>
+                            <Typography variant="h5" align="center" gutterBottom className="dark:text-white">
                                 Register
                             </Typography>
-                            <TextField
-                                label="Name"
-                                fullWidth
+                            <input
+                                placeholder="Name"
                                 variant="outlined"
                                 value={name}
                                 onChange={(e) => setName(e.target.value)}
                                 margin="normal"
+                                className="w-full mb-4 p-3 bg-transparent border border-black rounded-md dark:text-white"
                             />
-                            <TextField
-                                label="Email"
-                                fullWidth
+                            <input 
+                                placeholder="Email"
                                 variant="outlined"
                                 value={email}
                                 onChange={(e) => setEmail(e.target.value)}
                                 margin="normal"
+                                className="w-full mb-4 p-3 bg-transparent border border-black rounded-md dark:text-white"
                             />
-                            <TextField
-                                fullWidth
-                                label="Password"
-                                type="password"
-                                variant="outlined"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                margin="normal"
-                            />
+                            <Box sx={{ position: "relative", display: "flex", alignItems: "center" }}>
+                                <input 
+                                    placeholder="Password"
+                                    variant="outlined"
+                                    value={password}
+                                    type={showPassword ? "text" : "password"} // Set input type dynamically
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    className="w-full p-3 bg-transparent border border-black rounded-md dark:text-white"
+                                    margin="normal"
+                                />
+                                <IconButton
+                                    onClick={togglePasswordVisibility}
+                                    sx={{ position: "absolute", right: "10px", top: "50%", transform: "translateY(-50%)" }}
+                                    >
+                                    {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
+                                </IconButton>
+                            </Box>
                             {/* <TextField
                                 label="Phone"
                                 fullWidth

diff --git a/client/src/index.js b/client/src/index.js
@@ -54,7 +54,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <AuthContextProvider>
     <ToastContextProvider>
-        <App/>
+      <App/>
     </ToastContextProvider>
   </AuthContextProvider>
 );

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'selector',
   content: [
     './index.html',
     './src/**/*.{js,ts,jsx,tsx}'