Merge branch 'main' into css-input-error-#98

Signed-off-by: Athaxv <[email protected]>
Bitbox-Connect · Oct 15, 2024 · d151370 · d151370
2 parents 21fdc81 + f1c8793
commit d151370
Show file tree

Hide file tree

Showing 16 changed files with 348 additions and 120 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/projectupload.html b/client/projectupload.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="/assets/favicon-B48yql8W.ico" type="image/x-icon">
+  <title>Bitbox - Where Projects Find Solutions Together</title>
+  <!--Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server. -->
+  <!-- <script defer src="http://localhost:5000/socket.io/socket.io.js"></script> -->
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <script type="module" crossorigin src="/assets/index-IazPeWwM.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CCRyelY1.css">
+</head>
+
+<body>
+  <div class="container">   
+ <div class="row">
+ <div class="col-sm-12">
+ <center><h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius" >Project Upload Form</h4></center>
+ </div>
+</div> 
+
+    <div class="row">          
+    <div class="col-sm-6 rounded" style="border:1px solid #bcccfe;background-color:white;width:630px;">            
+       <br>            
+	<form method="post"	action="" enctype="multipart/form-data">
+	<div class="mb-3">
+    <label for="exampleInputEmail1" class="form-label" style="color:black;">Contributer name:</label>
+    <input type="text" name="name" class="form-control" id="exampleInputName" required>
+  </div>
+  <div class="mb-3">
+    <label for="exampleInputEmail1" class="form-label" style="color:black;">Porject Title:</label>
+    <input type="text" name="pt" class="form-control" id="exampleInputName" required>
+  </div>
+  <div class="mb-3">
+    <label for="exampleInputEmail1" class="form-label" style="color:black;">Project Description:</label>
+    <input type="text" name="pd" class="form-control" id="exampleInputName" required>
+  </div>
+  <div class="mb-3">
+  <label for="exampleInputPassword1" class="form-label" style="color:black;">Project Category:</label>
+  <select class="form-select" aria-label="Default select example" name="pc">
+  <option selected>Porject Category</option>
+  <option value="Web developement">Web developement</option>
+  <option value="Data Science">Data Science</option>
+  <option value="A.I.">A.I.</option>
+  <option value="Cloud Computing">Cloud Computing</option>
+  <option value="Cyber Security">Cyber Security</option>
+  <option value="Game Developement">Game Developement</option>
+  <option value="Blockchain">Blockchain</option>
+</select>
+</div>
+  <div class="mb-3">
+    <label for="exampleInputEmail1" class="form-label" style="color:black;">Technologies Used:</label>
+    <input type="text" name="tu" class="form-control" id="exampleInputName" required>
+  </div>
+
+
+
+
+
+
+
+
+  </div>
+
+
+
+  <div class="col-sm-6 rounded" style="border:1px solid #bcccfe;background-color:whitte;width:640px;">
+  <br>
+  <div class="mb-3">
+    <label for="exampleInputEmail1" class="form-label" style="color:black;">Github/External Link:</label>
+    <input type="text" name="link" class="form-control" id="exampleInputName" required>
+  </div>
+
+
+  <div class="mb-3">
+    <label for="exampleInputPassword1" class="form-label" style="color:black;">Submission Date:</label>
+    <input type="date" name="date" class="form-control" id="exampleInputPassword1">
+  </div> 
+
+  <div class="mb-3">
+    <label for="exampleInputPassword1" class="form-label" style="color:black;">Email:</label>
+    <input type="email" name="email" class="form-control" id="exampleInputPassword1" required>
+  </div>  
+  <div class="form-group row">
+    <label for="staticEmail" class="col-sm-2 col-form-label" style="color:black;">Upload Files:</label>
+    <div class="col-sm-10">
+    <input type="file" name="up" class="form-control" id="exampleInputName" style="margin-left:15px;background-color:white;">
+    </div>
+  </div>
+  <div class="form-group row">
+    <label for="staticEmail" class="col-sm-2 col-form-label" style="color:black;">Project Screenshots:</label>
+    <div class="col-sm-10">
+    <input type="file" name="ps" class="form-control" id="exampleInputName" style="margin-left:15px;background-color:white;">
+    </div>
+  </div>
+  <br>
+
+  </div>
+  <div class="container">
+  <div class="row">
+  <div class="col-sm-12">
+  <br>
+  <center><button name="submit" type="submit" class="btn btn-primary text-white px-4 py-2 my-2 btn-border-radius" style="width:150px;">Submit</button></center>
+  <br><br>	 </form>					  		
+</div>	
+</div>		
+</div>	
+
+</div>	
+</div>	
+
+</body>
+  <!-- Bootstrap Script -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+  integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+<!-- Font Awesome Script -->
+<script src="https://kit.fontawesome.com/1eb8db9042.js" crossorigin="anonymous"></script>
+</html>
diff --git a/client/src/component/About.jsx b/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>

diff --git a/client/src/component/Discussion.jsx b/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"

diff --git a/client/src/component/Firebase/Setup.js b/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();

diff --git a/client/src/component/Footer.jsx b/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;
diff --git a/client/src/component/Home.jsx b/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 (

diff --git a/client/src/component/InputModal.jsx b/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;