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

src/views/components/CourseCatalogMain.tsx

@@ -9,7 +9,7 @@ import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
 import Icon from './common/Icon/Icon';
 import Text from './common/Text/Text';
 import AutoLoad from './injected/AutoLoad/AutoLoad';
-import CoursePanel from './injected/CoursePanel/CoursePanel';
+import CoursePopup from './injected/CoursePopup/CoursePopup';
 import TableHead from './injected/TableHead';
 import TableRow from './injected/TableRow/TableRow';
 
@@ -65,6 +65,7 @@ export default function CourseCatalogMain({ support }: Props) {
                 }
                 return (
                     <TableRow
+                        key={row.course.uniqueId}
                         element={row.element}
                         course={row.course}
                         isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
@@ -73,7 +74,7 @@ export default function CourseCatalogMain({ support }: Props) {
                     />
                 );
             })}
-            {selectedCourse && <CoursePanel course={selectedCourse} onClose={handleClearSelectedCourse} />}
+            {selectedCourse && <CoursePopup course={selectedCourse} onClose={handleClearSelectedCourse} />}
             <AutoLoad addRows={addRows} />
         </ExtensionRoot>
     );

src/views/components/common/Popup/Popup.module.scss

@@ -18,7 +18,7 @@
 .body {
     overflow-y: auto;
     z-index: 2147483647;
-    background-color: rgb(52, 53, 65);
+    background-color: $white;
     box-shadow: 0px 12px 30px 0px #323e5f29;
     transition: box-shadow 0.15s;
 }

src/views/components/common/Popup/Popup.tsx

@@ -1,18 +1,19 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
-import styles from './Panel.module.scss';
+import styles from './Popup.module.scss';
 
 interface Props {
     testId?: string;
     style?: React.CSSProperties;
     className?: string;
+    /** Should it display a subtle dark overlay over the rest of the screen */
     overlay?: boolean;
 }
 
 /**
  *
  */
-export default function Panel(props: PropsWithChildren<Props>) {
+export default function Popup(props: PropsWithChildren<Props>) {
     return (
         <div
             style={props.style}

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