Styling (#41)

* Course page merged with main

* some styling changes

* more styling

---------

Co-authored-by: Kacper Lisik <lisik@kth.se>

Author: LSKpr

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

@@ -2,24 +2,24 @@ import React from 'react';
 
 function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
   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 +37,30 @@ 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">
+                {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