lots of UI changes, and keyboard command support

src/views/components/CourseCatalogMain.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
 import { Course, CourseRow } from 'src/shared/types/Course';
 import useInfiniteScroll from '../hooks/useInfiniteScroll';
+import { useKeyPress } from '../hooks/useKeyPress';
 import { CourseScraper } from '../lib/courseCatalog/CourseScraper';
 import { populateSearchInputs } from '../lib/courseCatalog/populateSearchInputs';
 import { SiteSupport } from '../lib/getSiteSupport';
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
-import CoursePopup from './injected/CoursePopup/CoursePopup';
+import CoursePanel from './injected/CoursePanel/CoursePanel';
 import TableHead from './injected/TableHead';
 import TableRow from './injected/TableRow';
 
@@ -45,6 +45,8 @@ export default function CourseCatalogMain({ support }: Props) {
         setSelectedCourse(null);
     };
 
+    useKeyPress('Escape', handleClearSelectedCourse);
+
     return (
         <ExtensionRoot>
             <TableHead>Plus</TableHead>
@@ -56,7 +58,7 @@ export default function CourseCatalogMain({ support }: Props) {
                     onClick={handleRowButtonClick(row.course)}
                 />
             ))}
-            {selectedCourse && <CoursePopup course={selectedCourse} onClose={handleClearSelectedCourse} />}
+            {selectedCourse && <CoursePanel course={selectedCourse} onClose={handleClearSelectedCourse} />}
             {isScrolling && <div>Scrolling...</div>}
         </ExtensionRoot>
     );

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

@@ -0,0 +1,24 @@
+@import 'src/views/styles/base.module.scss';
+
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+
+    &.overlay {
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 2147483647;
+    }
+}
+
+.body {
+    overflow-y: auto;
+    z-index: 2147483647;
+    background-color: rgb(52, 53, 65);
+    box-shadow: 0px 12px 30px 0px #323e5f29;
+    transition: box-shadow 0.15s;
+}

src/views/components/common/Panel/Panel.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
+import styles from './Panel.module.scss';
+
+interface Props {
+    testId?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    overlay?: boolean;
+}
+
+/**
+ *
+ */
+export default function Panel(props: PropsWithChildren<Props>) {
+    return (
+        <div
+            style={props.style}
+            className={classNames(
+                styles.container,
+                {
+                    [styles.overlay]: props.overlay,
+                },
+                props.className
+            )}
+            data-testid={props.testId}
+        >
+            <div className={styles.body}>{props.children}</div>
+        </div>
+    );
+}

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