lots of UI changes, and keyboard command support

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

@@ -0,0 +1,35 @@
+.panelBody {
+    height: auto;
+    color: white;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.coursePanelBase {
+    position: fixed;
+    transform: translateY(-50%);
+    top: 15px;
+    right: 15px;
+    z-index: 2147483647;
+}
+
+.coursePanelHeader {
+    display: flex;
+    height: 50;
+    background-color: #29465b;
+    width: 100%;
+
+    .closePanelButton {
+        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/CoursePanel/CoursePanel.tsx

@@ -0,0 +1,26 @@
+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.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Course } from 'src/shared/types/Course';
-import { Button } from '../../common/Button/Button';
-import styles from './CoursePopup.module.scss';
-
-interface Props {
-    course: Course;
-    onClose: () => void;
-}
-
-export default function CoursePopup({ course, onClose }: Props) {
-    return (
-        <div>
-            <h1>{course.fullName}</h1>
-            <p>{course.description}</p>
-            <Button onClick={onClose}>Close</Button>
-        </div>
-    );
-}