Fixed dark mode and light mode theme issues in footer, About Us segment, InputModal, Navbar and Login/Signup components; added PropTypes validation in About Us page and Discussions to prevent bugs, footer.

client/src/component/About.jsx

@@ -31,7 +31,13 @@ export default function About(props) {
 
   return (
     <div>
-      <div className="about-content container h-[100vh] px-[2rem] mt-[10vh]">
+     <div
+      className="about-content container h-[100vh] px-[2rem] mt-[10vh]"
+      style={{
+        background: props.mode === "dark" ? "#121212" : "#ffffff",
+        color: props.mode === "dark" ? "white" : "black",
+      }}
+    >
         <section className="about-main-section">
           <div className="about-content-left">
             <h2 className="Heading-Page">About Us</h2>

client/src/component/Discussion.jsx

@@ -80,6 +80,7 @@ const Discussion = (props) => {
                 isOpen={isModalOpen}
                 onClose={() => setIsModalOpen(false)}
                 onSubmit={handleJoin}
+                mode={props.mode} 
             />
 
             <div className='discussion-container-section'>
@@ -94,7 +95,7 @@ const Discussion = (props) => {
                 {/* Form for sending messages */}
                 <div className="discussion-send">
                     <form id="discussion-send-container" onSubmit={handleSubmit}>
-                        <input style={{ color: props.mode === 'dark' ? 'black' : '' }}
+                        <input style={{ color: props.mode === 'dark' ? 'white' : 'black' }}
                             type="text"
                             name="messageImp"
                             id="messageInp"

client/src/component/Firebase/Setup.js

@@ -25,7 +25,7 @@ const firebaseConfig = {
 // const provider=new googleAuthProvider()
 // export {auth,provider}
 const app = initializeApp(firebaseConfig);
-const analytics = getAnalytics(app);
+const analytics = getAnalytics(app); // eslint-disable-line no-unused-vars
 
 const auth = getAuth();
 const provider = new GoogleAuthProvider();

client/src/component/Footer.jsx

@@ -2,70 +2,102 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import './css/Footer.css';
 import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa';
-// import { faYoutube } from '@fortawesome/free-brands-svg-icons';
 import logo from '../assets/images/logo.png';
+
 function Footer(props) {
   return (
     <footer>
-      <div className='footer-container' style={{ backgroundColor: props.mode === 'dark' ? 'black' : 'white', borderTop: props.mode === 'dark' ? '1px solid white' : '1px solid black', borderBottom: props.mode === 'dark' ? '1px solid white' : '1px solid black' }}>
-        <div className='footer-about'>
-          <div className='footer-note'>
-            <Link to="/">
-              <div className='footer-logo'>
-                <img className='mx-3' style={{ width: "5.5rem" }} src={logo} alt="logo" />
+      <div className={`wrapper ${props.mode === 'dark' ? 'dark-mode' : ''}`}>
+        <div className='footer-container'
+          style={{
+            backgroundColor: props.mode === 'dark' ? 'black' : 'white',
+            borderTop: props.mode === 'dark' ? '1px solid white' : '1px solid black',
+            borderBottom: props.mode === 'dark' ? '1px solid white' : '1px solid black'
+          }}>
+          <div className='footer-about'>
+            <div className='footer-note'>
+              <Link to="/">
+                <div className='footer-logo'>
+                  <img className='mx-3' style={{ width: "5.5rem" }} src={logo} alt="logo" />
+                </div>
+                <h2 style={{ fontFamily: "medium", fontSize: "2.5rem" }}>BIT<span className='code'>BOX</span></h2>
+              </Link>
+              <div className='project-info text-center fs-5'
+                style={{ color: props.mode === "dark" ? "white" : "black" }}>
+                Where Projects Find Solution Together
+              </div>
+              <div className='text-center fs-6'>
+                <Link to="/community">Explore more..</Link>
               </div>
-              <h2 style={{ fontFamily: "medium", fontSize: "2.5rem" }}>BIT<span className='code'>BOX</span></h2>
-            </Link>
-            <div className='project-info text-center fs-5'>Where Projects Find Solution Together</div>
-            <div className='text-center fs-6'>
-              <Link to="/community">Explore more..</Link>
             </div>
           </div>
-        </div>
-        <div className="new_Details">
-          <h3 className='fs-2 fw-bold'>About Bitbox</h3>
-          <div className='Detail'>
-            <ul className='fs-5'>
-              <li><Link to="/contactus">Contact Us</Link></li>
-              <li><Link to='/codeofconduct'>Code of Conduct</Link></li>
-            </ul>
+
+          <div className="new_Details">
+            <h3 className='fs-2 fw-bold'
+              style={{ color: props.mode === "dark" ? "white" : "black" }}>
+              About Bitbox
+            </h3>
+            <div className='Detail'>
+              <ul className='fs-5'>
+                <li><Link to="/contactus">Contact Us</Link></li>
+                <li><Link to='/codeofconduct'>Code of Conduct</Link></li>
+              </ul>
+            </div>
           </div>
-        </div>
-        <div className="Legal">
-          <div>
-            <h3 className='fs-2 fw-bold'>Legal</h3>
+
+          <div className="Legal">
+            <h3 className='fs-2 fw-bold'
+              style={{ color: props.mode === "dark" ? "white" : "black" }}>
+              Legal
+            </h3>
             <ul className='fs-5'>
               <li><Link to="/feedback">Feedback</Link></li>
               <li><Link to="/privacypolicy">Privacy Policy</Link></li>
               <li><Link to="/termofuse">Terms of use</Link></li>
             </ul>
           </div>
-        </div>
-        <div className="social">
-          <div className='fs-5'>
-            <h3 className='fw-bold fs-2'>Follow us on</h3>
-            <ul>
-              <li><a href="https://www.linkedin.com/in/bit-box-community" target='blank'><FaLinkedin color="#0077b5" fontSize="2rem" />Linkedin</a></li>
-              <li><a href="https://twitter.com/BITBOX688152" target='_blank-1'><FaTwitter color="#1da1f2" fontSize="2rem" />Twitter</a></li>
-              <li><a href="https://github.com/bitboxcommunity" target='_blank-2'><FaGithub color="#211F1F" fontSize="2rem" />GitHub</a></li>
-              {/* <li><a href="https://www.facebook.com/bit-box-community" target='blank-3'><FaFacebookSquare color="#3b5998" fontSize="2rem" />Facebook</a></li> */}
-              <li><a href="https://www.youtube.com/channel/UCXUTdcw27jaH_go9iyUjJnA" target='_blank-3'><FaYoutube color="red" fontSize="2rem" />Youtube</a></li>
-            </ul >
-          </div >
-        </div >
-      </div >
 
-    <div className="copy-right">
-      <h4 className='copy-content'>© 2024 Bitbox.&nbsp; Made with 🤍 by Bitbox India.&nbsp; All rights reserved.</h4>
-    </div>
+          <div className="social">
+            <h3 className='fw-bold fs-2'
+              style={{ color: props.mode === "dark" ? "white" : "black" }}>
+              Follow us on
+            </h3>
+            <ul>
+      <li>
+        <a href="https://www.linkedin.com/in/bit-box-community" target="_blank" rel="noopener noreferrer">
+          <FaLinkedin className="FaLinkedin" fontSize="2rem" /> Linkedin
+        </a>
+      </li>
+      <li>
+        <a href="https://twitter.com/BITBOX688152" target="_blank" rel="noopener noreferrer">
+          <FaTwitter className="FaTwitter" fontSize="2rem" /> Twitter
+        </a>
+      </li>
+      <li>
+        <a href="https://github.com/bitboxcommunity" target="_blank" rel="noopener noreferrer">
+          <FaGithub className="FaGithub" fontSize="2rem" /> GitHub
+        </a>
+      </li>
+      <li>
+        <a href="https://www.youtube.com/channel/UCXUTdcw27jaH_go9iyUjJnA" target="_blank" rel="noopener noreferrer">
+          <FaYoutube className="FaYoutube" fontSize="2rem" /> YouTube
+        </a>
+      </li>
+    </ul>
+          </div>
+        </div>
 
-    </footer >
-  )
+        <div className="copy-right">
+          <h4 className='copy-content'>© 2024 Bitbox.&nbsp; Made with 🤍 by Bitbox India.&nbsp; All rights reserved.</h4>
+        </div>
+      </div>
+    </footer>
+  );
 }
 
 Footer.propTypes = {
   showAlert: PropTypes.func,
-  mode: PropTypes.string,
+  mode: PropTypes.string.isRequired,
 };
 
 export default Footer;

client/src/component/Home.jsx

@@ -7,6 +7,7 @@ import Share from '../assets/images/Share.png';
 import glichBitboxGif from '../assets/images/Other Gifs/Bitbox Glitch.gif'
 import CardsPage from './HomePage/Card';
 
+
 const Home = (props) => {
 
     return (

client/src/component/InputModal.jsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import PropTypes from 'prop-types'; // Import PropTypes
 
-const InputModal = ({ isOpen, onClose, onSubmit }) => {
+const InputModal = ({ isOpen, onClose, onSubmit, mode }) => {
   const [name, setName] = useState('');
   const [modalMessage, setModalMessage] = useState('');
 
@@ -26,23 +27,32 @@ const InputModal = ({ isOpen, onClose, onSubmit }) => {
 
   if (!isOpen) return null;
 
-  return (
+  return ( /*fixed the inputmodal overlay issue in dark mode*/
     <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
-      <div className="bg-white rounded-lg shadow-lg p-8 w-[24rem] h-auto ">
-        <h2 className="text-lg font-semibold mb-4 text-center">Enter your name to join:</h2>
+      <div className={`rounded-lg shadow-lg p-8 w-[24rem] h-auto ${mode === 'dark' ? 'bg-gray-800' : 'bg-white'}`}>
+        <h2 className="text-lg font-semibold mb-4 text-center"
+          style={{
+            color: mode === "dark" ? "white" : "black",
+          }}>
+          Enter your name to join:
+        </h2>
         <input
           type="text"
           value={name}
           onChange={(e) => {
             setName(e.target.value);
             setModalMessage(''); // Clear error message on input change
           }}
+          style={{
+            color: mode === "dark" ? "white" : "black",
+            backgroundColor: mode === "dark" ? "#444" : "white", // Adjust input background color
+          }}
           onKeyDown={handleKeyDown} // Allow Enter key to submit
           placeholder="Enter your name"
           className="border rounded py-2 px-2 mb-3 w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
         {modalMessage && <p className="text-red-500 mb-3 text-md text-center">{modalMessage}</p>}
-        <div className="flex justify-center ">
+        <div className="flex justify-center">
           <button
             onClick={handleJoin}
             className="w-full px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200"
@@ -55,4 +65,11 @@ const InputModal = ({ isOpen, onClose, onSubmit }) => {
   );
 };
 
+InputModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  mode: PropTypes.string.isRequired,
+};
+
 export default InputModal;