Styling

my-app/src/styles.css

@@ -1 +1 @@
-@import "tailwindcss";
+@import "tailwindcss";

my-app/src/views/Components/CoursePagePopup.jsx

@@ -1,25 +1,48 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react'
 
 function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
-  if (!isOpen || !course) return null; // Don't render if not open or course not selected
+  const treeRef = useRef(null);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, onClose]);
 
+  const handleTreeClick = () => {
+    if (treeRef.current) {
+      treeRef.current.focus(); // gives it focus
+    }
+  };
+
+  if (!isOpen || !course) return null; // Don't render if not open or course not selected
   return (
     <div
       className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
       onClick={onClose}
     >
       <div
-        className="bg-indigo-400/70 backdrop-blur-sm h-full w-3/4 flex flex-col overflow-auto"
+        className="bg-indigo-300/75 backdrop-blur-lg h-full w-3/4 flex flex-col overflow-auto"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex-1">
           <div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
             {/* Course Title Section */}
             <div>
-              <h2 className="text-5xl font-extrabold text-[#2e2e4f]">
-                {course.code} - {course.name}
-                <span className="ml-4 text-lg text-violet-900">({course.credits} Credits)</span> {/* Display Credits */}
+              <h2 className="text-5xl font-extrabold text-[#2e2e4f] ">
+                <span className="text-violet-700">{course.code}</span> - {course.name}
+                <span className="ml-4 text-lg text-violet-700">({course.credits} Credits)</span>
               </h2>
+              <div className="my-6 h-1.5 w-full bg-violet-500"></div>
             </div>
             <div>
               <button
@@ -37,30 +60,38 @@ function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
 
             {/* Description Section */}
             <div>
-              <h3 className="text-2xl font-bold text-[#3d3d68] mb-4">Course Description</h3>
+              <h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
+              <div className="mb-3 h-0.5 w-full bg-violet-500"></div>
               <div
-                className="text-lg leading-8 text-[#2c2c2c] tracking-wide prose prose-slate max-w-full"
+                className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
                 dangerouslySetInnerHTML={{ __html: course.description }}
               />
+
             </div>
 
             {/* Prerequisite Graph Tree Section */}
             <div>
-              <h3 className="text-2xl font-semibold text-[#2e2e4f]">Prerequisite Graph Tree</h3>
-              <p className="text-lg text-slate-700 leading-7">Graph tree or prerequisite info will go here...</p>
+              <h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">
+                Prerequisite Graph Tree
+              </h3>
+              <div className="mb-4 h-0.5 w-full bg-violet-500"></div>
+              <div
+                className="bg-indigo-300/50 outline-none focus:outline-none focus:ring-2 focus:ring-violet-600 rounded-lg transition-shadow"
+                ref={treeRef}
+                onClick={handleTreeClick}
+                tabIndex={0} // allows the div to receive focus
+              >
+                {prerequisiteTree}
+              </div>
+
             </div>
             {/* Reviews Section */}
             <div>
-              <h3 className="text-2xl font-semibold text-[#2e2e4f]">Reviews</h3>
+              <h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Reviews</h3>
+              <div className="mb-4 h-0.5 w-full bg-violet-500"></div>
               <p className="text-lg text-slate-700 leading-7">Here would be some reviews of the course...</p>
             </div>
 
-            {/* Prerequisite Graph Tree Section */}
-            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
-              <h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
-              {/* Placeholder for graph tree */}
-              {prerequisiteTree}
-            </div>
           </div>
         </div>
         <button