Fixed CSS issues

Still remains an issue when opening a class from the Courses Page: everything gets slightly shifted over and I don't know why

frontend/src/commons/components/courses/CourseBoxSmall.tsx

@@ -3,14 +3,26 @@ import styles from "./CourseBoxSmall.module.css";
 
 import "react-tooltip/dist/react-tooltip.css";
 import { Tooltip } from "react-tooltip";
-import { Season, StudentCourse, Course, Distribution } from "../../types/TypeCourse";
+import {
+  Season,
+  StudentCourse,
+  Course,
+  Distribution,
+} from "../../types/TypeCourse";
 
 import img_fall from "./../../images/fall.png";
 import img_spring from "./../../images/spring.png";
 import DistributionCircle from "./DistributionsCircle";
+import ReactDOMServer from 'react-dom/server';
 
 import { useModal } from "../../../hooks/modalContext";
 
+function CourseSeasonText(season: string ) {
+  return (
+    "Course Offered In " + season.charAt(0) + season.slice(1).toLowerCase()
+  );
+}
+
 function CourseSeasonIcon(props: { seasons: Array<Season> }) {
   const seasonImageMap = {
     FALL: img_fall,
@@ -23,77 +35,103 @@ function CourseSeasonIcon(props: { seasons: Array<Season> }) {
       {props.seasons.map((szn, index) => (
         <div key={index} style={{ marginLeft: index > 0 ? "-7.5px" : 0 }}>
           {seasonImageMap[szn] && (
-            <img
-              style={{ width: "15px", height: "15px" }}
-              src={seasonImageMap[szn]}
-              alt={szn}
-            />
+            <div>
+              <div
+                data-tooltip-id="season-tooltip"
+                data-tooltip-content={CourseSeasonText(szn)}
+                data-tooltip-place="top"
+              >
+                <img
+                  style={{ width: "15px", height: "15px" }}
+                  src={seasonImageMap[szn]}
+                  alt={szn}
+                />
+              </div>
+              <Tooltip
+                id="season-tooltip"
+                style={{ backgroundColor: "#444444", borderRadius: "3px" }}
+              />
+            </div>
           )}
         </div>
       ))}
     </div>
   );
 }
 
-function DistCircDiv(props: { dist: Array<Distribution> }){
-  return(
+function DistCircDiv(props: { dist: Array<Distribution> }) {
+  return (
     <div style={{ marginLeft: "2px", marginTop: "2px" }}>
-      <DistributionCircle distributions={props.dist}/>
+      <DistributionCircle distributions={props.dist} />
     </div>
   );
 }
 
-function CheckMark(props: { studentCourse: StudentCourse }){
-  return(
+function CheckMark(props: { studentCourse: StudentCourse }) {
+  return (
     <div>
       {props.studentCourse.enrollmentStatus === "COMPLETED" ? (
-          <div style={{ paddingLeft: "1px", paddingRight: "3px" }}>
-            <div data-tooltip-id="check-tooltip" data-tooltip-content="Credit Confirmed by Yale" data-tooltip-place="top">
-              ✓
-            </div>
-            <Tooltip id="check-tooltip" style={{ backgroundColor: "#444444", borderRadius: "3px"}}/>
+        <div style={{ paddingLeft: "1px", paddingRight: "3px" }}>
+          <div
+            data-tooltip-id="check-tooltip"
+            data-tooltip-content="Credit Confirmed by Yale"
+            data-tooltip-place="top"
+          >
+            ✓
           </div>
-        ) : (
-          ""
-        )}
+          <Tooltip
+            id="check-tooltip"
+            style={{ backgroundColor: "#444444", borderRadius: "3px" }}
+          />
+        </div>
+      ) : (
+        ""
+      )}
     </div>
   );
 }
 
-function CourseBoxSmall(props: { studentCourse?: StudentCourse, course?: Course } ) {
+function CourseBoxSmall(props: {
+  studentCourse?: StudentCourse;
+  course?: Course;
+}) {
   const { setModalOpen } = useModal();
 
   function openModal() {
     if (props.course && props.studentCourse == null) {
-      setModalOpen(props.course)
+      setModalOpen(props.course);
     } else if (props.course == null && props.studentCourse) {
-      setModalOpen(props.studentCourse.course)
+      setModalOpen(props.studentCourse.course);
     }
   }
 
-  if(props.course && props.studentCourse == null) 
-  {
-    return(
+  if (props.course && props.studentCourse == null) {
+    return (
       <div className={styles.CourseBox} onClick={openModal}>
-        <CourseSeasonIcon seasons={props.course.seasons}/>
+        <CourseSeasonIcon seasons={props.course.seasons} />
         {props.course.code}
-        {props.course.distribution.length > 0 ? (<DistCircDiv dist={props.course.distribution}/>) : ("")}
+        {props.course.distribution.length > 0 ? (
+          <DistCircDiv dist={props.course.distribution} />
+        ) : (
+          ""
+        )}
       </div>
     );
-  }
-  else 
-  if(props.course == null && props.studentCourse) 
-  {
+  } else if (props.course == null && props.studentCourse) {
     return (
       <div className={styles.CourseBox} onClick={openModal}>
-        <CheckMark studentCourse={props.studentCourse}/>
+        <CheckMark studentCourse={props.studentCourse} />
         <CourseSeasonIcon seasons={[props.studentCourse.season]} />
         {props.studentCourse.course.code}
-        {props.studentCourse.course.distribution.length > 0 ? (<DistCircDiv dist={props.studentCourse.course.distribution}/>) : ("")}
+        {props.studentCourse.course.distribution.length > 0 ? (
+          <DistCircDiv dist={props.studentCourse.course.distribution} />
+        ) : (
+          ""
+        )}
       </div>
     );
   }
-  return <div/>
+  return <div />;
 }
 
 export default CourseBoxSmall;

frontend/src/commons/components/courses/CourseModal.module.css

@@ -0,0 +1,38 @@
+.modalBackground {
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0, 0, 0, 0.25);
+}
+
+.panelPlacement {
+    display: flex;
+    min-height: 100vh;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.panelStyle {
+    width: 100%;
+    max-width: 28rem;
+    overflow: hidden;
+    border-radius: 1rem;
+    background-color: rgb(256, 256, 256);
+    padding: 6px;
+    text-align: left;
+    align-items: middle;
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
+.titleStyle {
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+    font-weight: 500;
+    color: rgb(17, 24, 39);
+}
+
+.descriptionStyle {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: rgb(107, 114, 128);
+}

frontend/src/commons/components/courses/CourseModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import styles from "./CourseModal.module.css";
 import { useModal } from "../../../hooks/modalContext";
 import { Dialog } from "@headlessui/react";
 import { EMPTYCOURSE } from "../../mock/MockCourses";
@@ -13,57 +14,15 @@ export default function CourseModal() {
   return (
     <>
       <Dialog open={isOpen !== EMPTYCOURSE} onClose={closeModal} style={{ position: "relative", zIndex: "10" }}>
-        <div
-          style={{
-            position: "fixed",
-            inset: "0",
-            backgroundColor: "rgb(0, 0, 0, 0.25)",
-          }}
-        />
+        <div className={styles.modalBackground}/>
         <div style={{ position: "fixed", inset: "0", overflowY: "auto" }}>
-          <div
-            style={{
-              display: "flex",
-              minHeight: "100%",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "4px",
-              textAlign: "center",
-            }}
-          >
-            <Dialog.Panel
-              style={{
-                width: "100%",
-                maxWidth: "28rem",
-                overflow: "hidden",
-                borderRadius: "1rem",
-                backgroundColor: "rgb(256, 256, 256)",
-                padding: "6px",
-                textAlign: "left",
-                alignItems: "middle",
-                boxShadow:
-                  "box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-              }}
-            >
-              <Dialog.Title
-                as="h3"
-                style={{
-                  fontSize: "1.125rem",
-                  lineHeight: "1.5rem",
-                  fontWeight: "500",
-                  color: "rgb(17, 24, 39)",
-                }}
-              >
+          <div className={styles.panelPlacement}>
+            <Dialog.Panel className={styles.panelStyle}>
+              <Dialog.Title as="h3" className={styles.titleStyle}>
                 {isOpen !== undefined ? isOpen.title : 'No title'}
               </Dialog.Title>
               <div style={{ marginTop: "2px" }}>
-                <p
-                  style={{
-                    fontSize: "0.875rem",
-                    lineHeight: "1.25rem",
-                    color: "rgb(107, 114, 128)",
-                  }}
-                >
+                <p className={styles.descriptionStyle}>
                   {isOpen !== undefined ? isOpen.description : 'No description'}
                 </p>
               </div>