From 077278e50eccfa1f69060c5ba2e92d0b2a3f1a58 Mon Sep 17 00:00:00 2001
From: Jae Young Ahn <jahn35@my.bcit.ca>
Date: Wed, 30 Apr 2025 12:22:48 -0700
Subject: [PATCH] assignment page scss upadated

---
 src/pages/AssignmentPage.jsx         | 114 ++++++++++-----------------
 src/scss/components/_assignment.scss |  46 ++++++++++-
 2 files changed, 85 insertions(+), 75 deletions(-)

diff --git a/src/pages/AssignmentPage.jsx b/src/pages/AssignmentPage.jsx
index 5bd8855..11f94e2 100644
--- a/src/pages/AssignmentPage.jsx
+++ b/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">
-      <h2>📘 Assignments</h2>
-      <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
+      <div className="assignment-header-box">
+        <h2>📘 Assignments</h2>
+        <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
+      </div>
 
       {showModal && (
         <div className="modal-overlay">
@@ -80,110 +87,69 @@ const AssignmentPage = () => {
             <form onSubmit={handleSubmit}>
               <div>
                 <label>Student Name</label>
-                <input
-                  type="text"
-                  value={studentName}
-                  onChange={(e) => setStudentName(e.target.value)}
-                  required
-                />
+                <input type="text" value={studentName} onChange={(e) => setStudentName(e.target.value)} required />
               </div>
 
               <div>
                 <label>Camp ID</label>
-                <input
-                  type="text"
-                  value={campID}
-                  onChange={(e) => setCampID(e.target.value)}
-                  required
-                />
+                <input type="text" value={campID} onChange={(e) => setCampID(e.target.value)} required />
               </div>
 
               <div>
                 <label>Program ID</label>
-                <input
-                  type="text"
-                  value={programID}
-                  onChange={(e) => setProgramID(e.target.value)}
-                  required
-                />
+                <input type="text" value={programID} onChange={(e) => setProgramID(e.target.value)} required />
               </div>
 
               <div>
                 <label>Password</label>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                />
+                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
               </div>
 
               <div>
                 <label>Assignment Title</label>
-                <input
-                  type="text"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  required
-                />
+                <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} required />
               </div>
 
               <div>
                 <label>Description</label>
-                <textarea
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  required
-                ></textarea>
+                <textarea value={description} onChange={(e) => setDescription(e.target.value)} required></textarea>
               </div>
 
               <div>
                 <label>File Upload (optional)</label>
-                <input
-                  type="file"
-                  onChange={(e) => setFile(e.target.files[0])}
-                />
+                <input type="file" onChange={(e) => setFile(e.target.files[0])} />
               </div>
 
               <div className="modal-buttons">
                 <button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    resetForm();
-                    setShowModal(false);
-                  }}
-                >
-                  Cancel
-                </button>
+                <button type="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
               </div>
             </form>
           </div>
         </div>
       )}
 
-      <div className="project-list">
-  <h3>📋 Projects</h3>
-  {projects.map((project, index) => (
-    <div key={index} className="project-item">
-      <div className="project-meta">
-        <strong>Student Name: {project.studentName}</strong> | CampID: {project.campID} | ProgramID: {project.programID}
-      </div>
-      <h4>{project.title}</h4>
-      <p>{project.description}</p>
-      {project.fileName && (
-        <p><strong>Uploaded File:</strong> {project.fileName}</p>
+      {projects.length > 0 && (
+        <div className="project-list">
+          {/* <h3>📋 Projects</h3> */}
+          {projects.map((project, index) => (
+            <div key={index} className="project-item">
+              <div className="project-meta">
+                <strong>Student Name: {project.studentName}</strong> | CampID: {project.campID} | ProgramID: {project.programID}
+              </div>
+              <h4>{project.title}</h4>
+              <p>{project.description}</p>
+              {project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>}
+
+              <div className="action-buttons">
+                <button onClick={() => handleEdit(index)}>✏️ Edit</button>
+                <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
+                <button onClick={() => alert("QR feature coming soon!")}>📎 QR</button>
+              </div>
+            </div>
+          ))}
+        </div>
       )}
-
-      <div className="action-buttons">
-        <button onClick={() => handleEdit(index)}>✏️ Edit</button>
-        <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
-        <button onClick={() => alert("QR feature coming soon!")}>📎 QR</button>
-      </div>
-    </div>
-  ))}
-</div>
-
     </div>
   );
 };
diff --git a/src/scss/components/_assignment.scss b/src/scss/components/_assignment.scss
index 7d424b8..ac21492 100644
--- a/src/scss/components/_assignment.scss
+++ b/src/scss/components/_assignment.scss
@@ -235,4 +235,48 @@
       transform: translateY(0);
     }
   }
-}
\ No newline at end of file
+}
+
+.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;
+  }
+}
+