renamed panel to popup since that's kinda what it is lmao

src/views/components/injected/CoursePanel/CoursePanel.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Course } from 'src/shared/types/Course';
-import Panel from '../../common/Panel/Panel';
-import styles from './CoursePanel.module.scss';
-
-interface Props {
-    course: Course;
-    onClose: () => void;
-}
-
-export default function CoursePanel({ course, onClose }: Props) {
-    return (
-        <Panel overlay>
-            <div className={styles.coursePanelHeader} id='coursePanelHeader'>
-                <div onClick={onClose} className={styles.closePanelButton}>
-                    &#x2715;
-                </div>
-            </div>
-
-            <div className={styles.panelBody}>
-                <div className={styles.courseTitle}>{course.courseName}</div>
-                <div className={styles.courseDescription}>{course.uniqueId}</div>
-            </div>
-        </Panel>
-    );
-}

src/views/components/injected/CoursePopup/CoursePopup.module.scss

@@ -1,4 +1,4 @@
-.panelBody {
+.popupBody {
     height: auto;
     color: white;
     padding: 10px;
@@ -7,7 +7,7 @@
     justify-content: center;
 }
 
-.coursePanelBase {
+.coursePopupBase {
     position: fixed;
     transform: translateY(-50%);
     top: 15px;
@@ -15,13 +15,13 @@
     z-index: 2147483647;
 }
 
-.coursePanelHeader {
+.coursePopupHeader {
     display: flex;
     height: 50;
     background-color: #29465b;
     width: 100%;
 
-    .closePanelButton {
+    .closePopupButton {
         display: flex;
         align-items: center;
         justify-content: center;

src/views/components/injected/CoursePopup/CoursePopup.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Course } from 'src/shared/types/Course';
+import Icon from '../../common/Icon/Icon';
+import Popup from '../../common/Popup/Popup';
+import styles from './CoursePopup.module.scss';
+
+interface Props {
+    course: Course;
+    onClose: () => void;
+}
+
+/**
+ * The popup that appears when the user clicks on a course for more details.
+ */
+export default function CoursePopup({ course, onClose }: Props) {
+    return (
+        <Popup overlay>
+            <div className={styles.popupBody}>
+                <div className={styles.courseTitle}>{course.courseName}</div>
+                <div className={styles.courseDescription}>{course.uniqueId}</div>
+            </div>
+        </Popup>
+    );
+}