From 82085790d44d31d654aacc226e8f9785eb15af88 Mon Sep 17 00:00:00 2001
From: Sourabh782 <sourabhsinghrawat782@gmail.com>
Date: Sun, 10 Nov 2024 14:06:30 +0530
Subject: [PATCH 1/2] fixed dark mode issue in signup page

---
 client/src/App.jsx              |  8 +++-----
 client/src/component/Signup.jsx | 34 ++++++++++++++++-----------------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 75a1835..ebf5dc8 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -121,7 +121,6 @@ function App() {
       <Cursor />
       <ProjectState>
         <ProfileState>
-        <Router>
           <LoadingBar color="blue" progress={progress} onLoaderFinished={() => setProgress(0)} />
           <div className="alert-container"> <Alert alert={alert} /> </div>
           <ProgressBar mode={mode} />
@@ -132,7 +131,7 @@ function App() {
               <Route exact path="/contributors" element={<Contributors mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path="/discussion" element={<Discussion mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path="/community" element={<Community mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-              <Route exact path="/ai" element={ <Ai mode={mode} setProgress={setProgress} showAlert={showAlert} /> } />
+              {/* <Route exact path="/ai" element={ <Ai mode={mode} setProgress={setProgress} showAlert={showAlert} /> } /> */}
               <Route exact path="/about" element={<About mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path="/feedback" element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path="/blog" element={<BlogPage mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
@@ -146,18 +145,17 @@ function App() {
               <Route exact path='/reset-password' element={<ResetPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/codeofconduct' element={<CodeOfConduct mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/contactus' element={<ContactUs mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-              <Route exact path='/myprofile' element={<MyProfile mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
+              {/* <Route exact path='/myprofile' element={<MyProfile mode={mode} setProgress={setProgress} showAlert={showAlert} />} /> */}
               <Route exact path='/feedback' element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/privacypolicy' element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/termofuse' element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/uploadProject' element={<UploadProject mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/createBlogPost' element={<CreateBlog />} />
-              <Route exact path="/faq" element={ <Faq mode={mode} setProgress={setProgress} showAlert={showAlert} /> } />
+              {/* <Route exact path="/faq" element={ <Faq mode={mode} setProgress={setProgress} showAlert={showAlert} /> } /> */}
               <Route exact path='/read-more-blog/:id' element={<ReadMoreBlog mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
               <Route exact path='/*' element={<NotFound />} />
             </Routes>
           </Layout>
-        </Router>
         </ProfileState>
       </ProjectState>
     </div>
diff --git a/client/src/component/Signup.jsx b/client/src/component/Signup.jsx
index 96a8879..3d78d43 100644
--- a/client/src/component/Signup.jsx
+++ b/client/src/component/Signup.jsx
@@ -124,13 +124,13 @@ const Signup = ({ mode }) => {
       <div
         className="signup-wrapper"
         style={{
-          backgroundColor: mode === "dark" ? "black" : "white",
+          backgroundColor: mode === "dark" ? "black" : "#fff",
         }}
       >
         <div
           className="signup-form"
           style={{
-            color: mode === "dark" ? "white" : "black",
+            color: mode === "dark" ? "#fff" : "black",
           }}
         >
           <h2
@@ -144,12 +144,12 @@ const Signup = ({ mode }) => {
 
           <form className="w-3/4" onSubmit={handleSubmit}>
             <div className="space-y-4 w-full">
-              <div className="signup-form-group items-start flex flex-col gap-2">
+              <div className="signup-form-group items-start flex flex-col gap-2 ">
                 <label
                   htmlFor="name"
-                  className="text-md leading-none font-medium"
+                  className="text-md leading-none font-medium dark:text-red-600"
                   style={{
-                    color: mode === "dark" ? "white" : "black",
+                    color: mode === "dark" ? "#fff" : "black",
                   }}
                 >
                   Full Name
@@ -165,8 +165,8 @@ const Signup = ({ mode }) => {
                   autoComplete="on"
                   required
                   style={{
-                    backgroundColor: mode === "dark" ? "#333" : "white",
-                    color: mode === "dark" ? "white" : "black",
+                    backgroundColor: mode === "dark" ? "#333" : "#fff",
+                    color: mode === "dark" ? "#fff" : "black",
                   }}
                 />
                 {errors.name && (
@@ -179,7 +179,7 @@ const Signup = ({ mode }) => {
                   htmlFor="email"
                   className="text-md leading-none font-medium"
                   style={{
-                    color: mode === "dark" ? "white" : "black",
+                    color: mode === "dark" ? "#fff" : "black",
                   }}
                 >
                   Email
@@ -195,8 +195,8 @@ const Signup = ({ mode }) => {
                   autoComplete="on"
                   required
                   style={{
-                    backgroundColor: mode === "dark" ? "#333" : "white",
-                    color: mode === "dark" ? "white" : "black",
+                    backgroundColor: mode === "dark" ? "#333" : "#fff",
+                    color: mode === "dark" ? "#fff" : "black",
                   }}
                 />
                 {errors.email && (
@@ -209,7 +209,7 @@ const Signup = ({ mode }) => {
                   htmlFor="password"
                   className="text-md font-medium"
                   style={{
-                    color: mode === "dark" ? "white" : "black",
+                    color: mode === "dark" ? "#fff" : "black",
                   }}
                 >
                   Password
@@ -224,8 +224,8 @@ const Signup = ({ mode }) => {
                   autoComplete="on"
                   required
                   style={{
-                    backgroundColor: mode === "dark" ? "#333" : "white",
-                    color: mode === "dark" ? "white" : "black",
+                    backgroundColor: mode === "dark" ? "#333" : "#fff",
+                    color: mode === "dark" ? "#fff" : "black",
                   }}
                   iconRender={(visible) =>
                     visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
@@ -248,7 +248,7 @@ const Signup = ({ mode }) => {
                   htmlFor="cpassword"
                   className="text-md font-medium"
                   style={{
-                    color: mode === "dark" ? "white" : "black",
+                    color: mode === "dark" ? "#fff" : "black",
                   }}
                 >
                   Confirm Password
@@ -263,8 +263,8 @@ const Signup = ({ mode }) => {
                   autoComplete="on"
                   required
                   style={{
-                    backgroundColor: mode === "dark" ? "#333" : "white",
-                    color: mode === "dark" ? "white" : "black",
+                    backgroundColor: mode === "dark" ? "#333" : "#fff",
+                    color: mode === "dark" ? "#fff" : "black",
                   }}
                   iconRender={(visible) =>
                     visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
@@ -301,7 +301,7 @@ const Signup = ({ mode }) => {
                 </g>
                 <defs>
                   <clipPath id="clip0_17_40">
-                    <rect width="48" height="48" fill="white" />
+                    <rect width="48" height="48" fill="#fff" />
                   </clipPath>
                 </defs>
               </svg>

From f448ee8f7d18f8f7c021d3b14ff73155484c887a Mon Sep 17 00:00:00 2001
From: Sourabh782 <sourabhsinghrawat782@gmail.com>
Date: Sun, 10 Nov 2024 14:28:07 +0530
Subject: [PATCH 2/2] fixed dark mode issue in signup page

---
 client/src/component/Signup.jsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/src/component/Signup.jsx b/client/src/component/Signup.jsx
index 3d78d43..06b1a0e 100644
--- a/client/src/component/Signup.jsx
+++ b/client/src/component/Signup.jsx
@@ -15,6 +15,8 @@ const Signup = ({ mode }) => {
   const { userLoggedIn } = useAuth();
   const navigate = useNavigate();
 
+  console.log(mode);
+  
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -233,13 +235,13 @@ const Signup = ({ mode }) => {
                 />
               </div>
         <div className="password-checklist text-left">
-                <p>Password must contain:</p>
+                <p className={`${mode == "dark" ? "text-white" : "text-black"}`}>Password must contain:</p>
                 <ul className="list-none pl-0">
-                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.length} readOnly /> <span>At least 8 characters</span></li>
-                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.uppercase} readOnly /> <span>At least one uppercase letter</span></li>
-                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.lowercase} readOnly /> <span>At least one lowercase letter</span></li>
-                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.number} readOnly /> <span>At least one number</span></li>
-                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.specialChar} readOnly /> <span>At least one special character</span></li>
+                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.length} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least 8 characters</span></li>
+                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.uppercase} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least one uppercase letter</span></li>
+                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.lowercase} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least one lowercase letter</span></li>
+                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.number} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least one number</span></li>
+                  <li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.specialChar} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least one special character</span></li>
                 </ul>
         </div>