assignment page scss upadated

src/pages/AssignmentPage.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import "../scss/components/_assignment.scss";
+import { useEffect } from "react";
+
 
 const AssignmentPage = () => {
   const [studentName, setStudentName] = useState("");
@@ -13,6 +15,11 @@ const AssignmentPage = () => {
   const [showModal, setShowModal] = useState(false);
   const [editingIndex, setEditingIndex] = useState(null);
 
+  useEffect(() => {
+    document.title = "Assignment";
+  }, []);
+  
+
   const resetForm = () => {
     setStudentName("");
     setCampID("");
@@ -37,12 +44,10 @@ const AssignmentPage = () => {
     };
 
     if (editingIndex !== null) {
-      // Edit mode: update the project at the index
       const updatedProjects = [...projects];
       updatedProjects[editingIndex] = newProject;
       setProjects(updatedProjects);
     } else {
-      // New submission
       setProjects([...projects, newProject]);
     }
 
@@ -58,7 +63,7 @@ const AssignmentPage = () => {
     setProgramID(project.programID);
     setTitle(project.title);
     setDescription(project.description);
-    setFile(null); // File can't be set again for editing, usually. You could add note about this.
+    setFile(null);
     setEditingIndex(index);
     setShowModal(true);
   };
@@ -70,8 +75,10 @@ const AssignmentPage = () => {
 
   return (
     <div className="assignment-page">
+      <div className="assignment-header-box">
         <h2>📘 Assignments</h2>
         <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
+      </div>
 
       {showModal && (
         <div className="modal-overlay">
@@ -80,90 +87,51 @@ const AssignmentPage = () => {
             <form onSubmit={handleSubmit}>
               <div>
                 <label>Student Name</label>
-                <input
+                <input type="text" value={studentName} onChange={(e) => setStudentName(e.target.value)} required />
-                  type="text"
-                  value={studentName}
-                  onChange={(e) => setStudentName(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Camp ID</label>
-                <input
+                <input type="text" value={campID} onChange={(e) => setCampID(e.target.value)} required />
-                  type="text"
-                  value={campID}
-                  onChange={(e) => setCampID(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Program ID</label>
-                <input
+                <input type="text" value={programID} onChange={(e) => setProgramID(e.target.value)} required />
-                  type="text"
-                  value={programID}
-                  onChange={(e) => setProgramID(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Password</label>
-                <input
+                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Assignment Title</label>
-                <input
+                <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} required />
-                  type="text"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Description</label>
-                <textarea
+                <textarea value={description} onChange={(e) => setDescription(e.target.value)} required></textarea>
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  required
-                ></textarea>
               </div>
 
               <div>
                 <label>File Upload (optional)</label>
-                <input
+                <input type="file" onChange={(e) => setFile(e.target.files[0])} />
-                  type="file"
-                  onChange={(e) => setFile(e.target.files[0])}
-                />
               </div>
 
               <div className="modal-buttons">
                 <button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
-                <button
+                <button type="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
-                  type="button"
-                  onClick={() => {
-                    resetForm();
-                    setShowModal(false);
-                  }}
-                >
-                  Cancel
-                </button>
               </div>
             </form>
           </div>
         </div>
       )}
 
+      {projects.length > 0 && (
         <div className="project-list">
-  <h3>📋 Projects</h3>
+          {/* <h3>📋 Projects</h3> */}
           {projects.map((project, index) => (
             <div key={index} className="project-item">
               <div className="project-meta">
@@ -171,9 +139,7 @@ const AssignmentPage = () => {
               </div>
               <h4>{project.title}</h4>
               <p>{project.description}</p>
-      {project.fileName && (
+              {project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>}
-        <p><strong>Uploaded File:</strong> {project.fileName}</p>
-      )}
 
               <div className="action-buttons">
                 <button onClick={() => handleEdit(index)}>✏️ Edit</button>
@@ -182,8 +148,8 @@ const AssignmentPage = () => {
               </div>
             </div>
           ))}
-</div>
+        </div>
-
+      )}
     </div>
   );
 };

src/scss/components/_assignment.scss

@@ -236,3 +236,47 @@
     }
   }
 }
+
+.assignment-header-box {
+  background: #0f0f1a; // dark navy background
+  border: 2px solid #00bfff; // deep sky blue
+  border-radius: 12px;
+  padding: 50px;
+  text-align: center;
+  margin-bottom: 2rem;
+  box-shadow: 0 0 20px #00bfff;
+  animation: pulseNeonBlue 2s infinite alternate;
+
+  h2 {
+    color: #00bfff;
+    margin-bottom: 1rem;
+    font-weight: bold;
+  }
+
+  button {
+    background-color: #000;
+    border: 2px solid #00bfff;
+    color: #00bfff;
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #00bfff;
+      color: #000;
+    }
+  }
+}
+
+@keyframes pulseNeonBlue {
+  from {
+    box-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff;
+  }
+  to {
+    box-shadow: 0 0 25px #00bfff, 0 0 40px #00bfff;
+  }
+}
+