From fc19d729ca96df1484ee31d176299d6f70f4ad5c Mon Sep 17 00:00:00 2001
From: Vinay Anand Lodhi <vinayanandlodhi12@gmail.com>
Date: Thu, 7 Nov 2024 23:33:59 +0530
Subject: [PATCH] Upload project UI changes

---
 client/src/component/Faq.jsx           |  20 +--
 client/src/component/UploadProject.jsx | 198 ++++++++++++++-----------
 2 files changed, 118 insertions(+), 100 deletions(-)

diff --git a/client/src/component/Faq.jsx b/client/src/component/Faq.jsx
index 541d836..ae2e048 100644
--- a/client/src/component/Faq.jsx
+++ b/client/src/component/Faq.jsx
@@ -1,6 +1,6 @@
 // component/FAQ.jsx
-import { useState } from "react";
-import "../css/Faq.css";
+import React, { useState } from 'react';
+import './FAQ.css'; // Import the CSS file for styling
 
 const FAQ = () => {
   const [activeIndex, setActiveIndex] = useState(null);
@@ -27,29 +27,25 @@ const FAQ = () => {
 const faqData = [
   {
     question: "What is BitBox?",
-    answer:
-      "BitBox is a user-friendly platform that simplifies version control and collaboration for developers.",
+    answer: "BitBox is a user-friendly platform that simplifies version control and collaboration for developers.",
   },
   {
     question: "How does BitBox enhance collaboration?",
-    answer:
-      "BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.",
+    answer: "BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.",
   },
   {
     question: "How do I get started with BitBox?",
-    answer:
-      "You can sign up for an account on BitBox and start managing your projects right away.",
+    answer: "You can sign up for an account on BitBox and start managing your projects right away.",
   },
   {
     question: "Is BitBox compatible with modern development workflows?",
-    answer:
-      "Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.",
+    answer: "Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.",
   },
   {
     question: "How can I contact support if I need help?",
-    answer:
-      "You can reach out to support through the 'Contact Us' page or by emailing support@example.com.",
+    answer: "You can reach out to support through the 'Contact Us' page or by emailing support@example.com.",
   },
 ];
 
+
 export default FAQ;
diff --git a/client/src/component/UploadProject.jsx b/client/src/component/UploadProject.jsx
index b79b50a..cd70f65 100644
--- a/client/src/component/UploadProject.jsx
+++ b/client/src/component/UploadProject.jsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import PropTypes from "prop-types";
 import { useNavigate } from 'react-router-dom';
 
-
 const UploadProject = ({ mode }) => {
     const navigate = useNavigate();
     const [formData, setFormData] = useState({
@@ -12,6 +11,7 @@ const UploadProject = ({ mode }) => {
         deploymentLink: '',
         projectFiles: null,
     });
+    const [isModalOpen, setIsModalOpen] = useState(false);
 
     const handleChange = (e) => {
         const { name, value, type, files } = e.target;
@@ -48,7 +48,6 @@ const UploadProject = ({ mode }) => {
             console.log('Project submitted successfully:', data);
             navigate('/projects');
 
-            // Clear the form after submission
             setFormData({
                 title: '',
                 description: '',
@@ -56,7 +55,6 @@ const UploadProject = ({ mode }) => {
                 deploymentLink: '',
             });
 
-            // Optionally, you can redirect the user or display a success message
         } catch (error) {
             console.error('Error submitting project:', error);
         }
@@ -65,99 +63,123 @@ const UploadProject = ({ mode }) => {
     const themeStyles = mode === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-gray-900';
 
     return (
-        <div className={`container mx-auto p-6 mt-40 mb-12 max-w-3xl shadow-lg rounded-lg ${themeStyles}`}>
-            <h1 className={`text-4xl font-bold text-center mb-8 ${mode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-                Upload Your Project
-            </h1>
-
-            <form onSubmit={handleSubmit} className="space-y-6">
-                {/* Project Title */}
-                <div>
-                    <label htmlFor="title" className={`block text-lg font-medium ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
-                        Project Title
-                    </label>
-                    <input
-                        type="text"
-                        id="title"
-                        name="title"
-                        value={formData.title}
-                        onChange={handleChange}
-                        className={`w-full mt-2 p-3 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
-                        placeholder="Enter your project title"
-                        required
-                    />
-                </div>
-
-                {/* Project Description */}
-                <div>
-                    <label htmlFor="description" className={`block text-lg font-medium ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
-                        Project Description
-                    </label>
-                    <textarea
-                        id="description"
-                        name="description"
-                        value={formData.description}
-                        onChange={handleChange}
-                        className={`w-full mt-2 p-3 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
-                        placeholder="Enter a brief description of your project"
-                        rows="4"
-                        required
-                    ></textarea>
-                </div>
-
-                {/* GitHub Link */}
-                <div>
-                    <label htmlFor="githubLink" className={`block text-lg font-medium ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
-                        GitHub Link
-                    </label>
-                    <input
-                        type="url"
-                        id="githubLink"
-                        name="githubLink"
-                        value={formData.githubLink}
-                        onChange={handleChange}
-                        className={`w-full mt-2 p-3 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
-                        placeholder="Enter your project GitHub link"
-                        required
-                    />
-                </div>
-
-                {/* Deployment Link */}
-                <div>
-                    <label htmlFor="deploymentLink" className={`block text-lg font-medium ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
-                        Deployment Link (Optional)
-                    </label>
-                    <input
-                        type="url"
-                        id="deploymentLink"
-                        name="deploymentLink"
-                        value={formData.deploymentLink}
-                        onChange={handleChange}
-                        className={`w-full mt-2 p-3 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
-                        placeholder="Enter your project live demo link"
-                    />
-                </div>
-
-
-
-                {/* Submit Button */}
-                <div className="text-center">
-                    <button
-                        type="submit"
-                        className={`w-full py-3 rounded-md text-lg font-semibold ${mode === 'dark' ? 'bg-blue-700 hover:bg-blue-600' : 'bg-blue-600 hover:bg-blue-700'} text-white focus:outline-none focus:ring-2 focus:ring-blue-400`}
+        <div className="container mx-auto flex justify-center">
+            {/* Button to open the modal */}
+            <button
+                onClick={() => setIsModalOpen(true)}
+                className="bg-blue-600 text-white py-2 px-4 rounded shadow-md hover:bg-blue-700 transition duration-300"
+            >
+                Upload Project
+            </button>
+
+            {/* Modal Overlay */}
+            {isModalOpen && (
+                <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
+                    {/* Modal Content */}
+                    <div
+                        className={`relative w-full max-w-md p-6 mx-2 my-8 bg-white rounded-lg shadow-lg overflow-auto ${themeStyles}`}
+                        style={{ maxHeight: '800px', fontSize: '14px' }}
                     >
-                        Upload Project
-                    </button>
+                        {/* Close Button in Top Right */}
+                        <button
+                            onClick={() => setIsModalOpen(false)}
+                            className="absolute top-0 right-10 text-gray-500 hover:text-gray-700"
+                            style={{ fontSize: '42px' }}
+                        >
+                            &times;
+                        </button>
+
+                        <h1 className={`text-3xl font-bold text-center mt-6 mb-6 ${mode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                            Upload Your Project
+                        </h1>
+
+                        <form onSubmit={handleSubmit} className="space-y-4">
+                            {/* Project Title */}
+                            <div>
+                                <label htmlFor="title" className={`block text-lg font-semibold ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                                    Project Title
+                                </label>
+                                <input
+                                    type="text"
+                                    id="title"
+                                    name="title"
+                                    value={formData.title}
+                                    onChange={handleChange}
+                                    className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
+                                    placeholder="Enter your project title"
+                                    required
+                                />
+                            </div>
+
+                            {/* Project Description */}
+                            <div>
+                                <label htmlFor="description" className={`block text-lg font-semibold ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                                    Project Description
+                                </label>
+                                <textarea
+                                    id="description"
+                                    name="description"
+                                    value={formData.description}
+                                    onChange={handleChange}
+                                    className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
+                                    placeholder="Enter a brief description of your project"
+                                    rows="3"
+                                    required
+                                ></textarea>
+                            </div>
+
+                            {/* GitHub Link */}
+                            <div>
+                                <label htmlFor="githubLink" className={`block text-lg font-semibold ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                                    GitHub Link
+                                </label>
+                                <input
+                                    type="url"
+                                    id="githubLink"
+                                    name="githubLink"
+                                    value={formData.githubLink}
+                                    onChange={handleChange}
+                                    className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
+                                    placeholder="Enter your project GitHub link"
+                                    required
+                                />
+                            </div>
+
+                            {/* Deployment Link */}
+                            <div>
+                                <label htmlFor="deploymentLink" className={`block text-lg font-semibold ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                                    Deployment Link (Optional)
+                                </label>
+                                <input
+                                    type="url"
+                                    id="deploymentLink"
+                                    name="deploymentLink"
+                                    value={formData.deploymentLink}
+                                    onChange={handleChange}
+                                    className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
+                                    placeholder="Enter your project live demo link"
+                                />
+                            </div>
+
+                            {/* Submit Button */}
+                            <div className="text-center mt-4">
+                                <button
+                                    type="submit"
+                                    className={`w-full py-2 rounded-md text-lg font-semibold ${mode === 'dark' ? 'bg-blue-700 hover:bg-blue-600' : 'bg-blue-600 hover:bg-blue-700'} text-white focus:outline-none focus:ring-2 focus:ring-blue-400`}
+                                >
+                                    Upload Project
+                                </button>
+                            </div>
+                        </form>
+                    </div>
                 </div>
-            </form>
+            )}
         </div>
     );
 };
 
 UploadProject.propTypes = {
-
     mode: PropTypes.string,
-
 };
 
 export default UploadProject;