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

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

@@ -0,0 +1,35 @@
+.popupBody {
+    height: auto;
+    color: white;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.coursePopupBase {
+    position: fixed;
+    transform: translateY(-50%);
+    top: 15px;
+    right: 15px;
+    z-index: 2147483647;
+}
+
+.coursePopupHeader {
+    display: flex;
+    height: 50;
+    background-color: #29465b;
+    width: 100%;
+
+    .closePopupButton {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        margin: 5px;
+        margin-left: auto;
+        cursor: pointer;
+        color: white;
+    }
+}

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>
+    );
+}