From 1f7124a786388c85b4feecf38c3ebbf8a4d944e8 Mon Sep 17 00:00:00 2001
From: Jae Young Ahn <jahn35@my.bcit.ca>
Date: Fri, 2 May 2025 13:51:25 -0700
Subject: [PATCH] assignment page styling updated

---
 src/pages/AssignmentPage.jsx         |   5 +-
 src/scss/components/_assignment.scss | 105 ++++++++++++++++++++++-----
 2 files changed, 90 insertions(+), 20 deletions(-)

diff --git a/src/pages/AssignmentPage.jsx b/src/pages/AssignmentPage.jsx
index 5dd5d44..d8b5941 100644
--- a/src/pages/AssignmentPage.jsx
+++ b/src/pages/AssignmentPage.jsx
@@ -20,14 +20,13 @@ const AssignmentPage = () => {
 
   const fetchAssignments = async () => {
     try {
-      const res = await fetch("http://localhost:8082/assignments/instructor/9", {
+      const res = await fetch("http://localhost:8082/instructor/list/9", {
         // credentials: "include",
       });
       if (!res.ok) throw new Error("Failed to fetch");
 
       const data = await res.json();
-      console.log("Fetched assignments:", data); // ✅ This line shows what’s coming from the API
-      setProjects(data);
+     
 
       // Optional: Remove duplicate assignment IDs if needed
       const unique = Array.from(
diff --git a/src/scss/components/_assignment.scss b/src/scss/components/_assignment.scss
index 9f440fc..f83f856 100644
--- a/src/scss/components/_assignment.scss
+++ b/src/scss/components/_assignment.scss
@@ -1,7 +1,11 @@
 .assignment-page {
-  max-width: 600px;
-  margin: auto;
+  max-width: 100%;
   padding: 20px;
+  margin-top: 70rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-height: 100vh;
+  box-sizing: border-box;
 
   form {
     margin-bottom: 20px;
@@ -44,32 +48,97 @@
     }
   }
 
-  .project-list {
-    margin-top: 2rem;
+  // .project-list {
+  //   display: grid;
+  //   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  //   gap: 1.5rem;
+  //   margin-top: 2rem;
+  //   padding-bottom: 3rem;
+  
+  //   .project-item {
+  //     background: #ffffff;
+  //     border: 1px solid #e0e0e0;
+  //     border-radius: 12px;
+  //     padding: 1.5rem;
+  //     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  //     transition: transform 0.2s ease, box-shadow 0.2s ease;
+  
+  //     .project-meta {
+  //       margin-bottom: 0.75rem;
+  
+  //       strong {
+  //         color: #34495e;
+  //       }
+  //     }
+  
+  //     h4 {
+  //       margin: 0.5rem 0;
+  //       font-size: 1.2rem;
+  //       color: #2d3436;
+  //     }
+  
+  //     p {
+  //       margin: 0.25rem 0;
+  //       color: #555;
+  //       line-height: 1.4;
+  
+  //       strong {
+  //         color: #2d3436;
+  //       }
+  //     }
+  
+  //     .action-buttons {
+  //       display: flex;
+  //       gap: 0.5rem;
+  //       margin-top: 0.75rem;
+  
+  //       button {
+  //         background-color: #f4f4f4;
+  //         border: 1px solid #ddd;
+  //         border-radius: 6px;
+  //         padding: 0.4rem 0.8rem;
+  //         cursor: pointer;
+  //         font-size: 0.9rem;
+  
+  //         &:hover {
+  //           background-color: #e9ecef;
+  //         }
+  
+  //         &:nth-child(1) {
+  //           color: #2c3e50;
+  //         }
+  
+  //         &:nth-child(2) {
+  //           color: #c0392b;
+  //         }
+  
+  //         &:nth-child(3) {
+  //           color: #16a085;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
 
-    h3 {
-      color: #4a90e2;
-    }
+  .project-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); // exactly 2 columns
+    gap: 1.5rem;
+    margin-top: 2rem;
+    padding-bottom: 3rem;
   
     .project-item {
       background: #ffffff;
       border: 1px solid #e0e0e0;
       border-radius: 12px;
       padding: 1.5rem;
-      margin-bottom: 1.5rem;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
-  
-      // &:hover {
-      //   transform: translateY(-2px);
-      //   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
-      // }
+      overflow-wrap: break-word;
+      box-shadow: rgb(211, 0, 197) 0px 0px 15px, rgb(255, 42, 109) 0px 0px 25px;
   
       .project-meta {
-        justify-content: space-between;
-        align-items: center;
         margin-bottom: 0.75rem;
-        flex-wrap: wrap;
   
         strong {
           color: #34495e;
@@ -104,7 +173,6 @@
           padding: 0.4rem 0.8rem;
           cursor: pointer;
           font-size: 0.9rem;
-          transition: background-color 0.2s ease;
   
           &:hover {
             background-color: #e9ecef;
@@ -126,6 +194,7 @@
     }
   }
   
+  
 
   .modal-overlay {
     position: fixed;
@@ -138,6 +207,7 @@
     align-items: center;
     justify-content: center;
     z-index: 1000;
+    overflow: hidden;
   }
   
   .modal {
@@ -148,6 +218,7 @@
     width: 100%;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
     animation: fadeIn 0.3s ease;
+    overflow: auto;
   }
   
   .modal h3 {