added ExtensionRoot for consistent styling across injected components, and added a bunch of comments for all the added types and classes

src/views/components/CourseCatalogMain.tsx

@@ -5,6 +5,8 @@ import useInfiniteScroll from '../hooks/useInfiniteScroll';
 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 TableHead from './injected/TableHead';
 import TableRow from './injected/TableRow';
 
@@ -35,22 +37,27 @@ export default function CourseCatalogMain({ support }: Props) {
         setRows(rows);
     }, []);
 
-    const handleRowButtonClick = (course: Course) => {
+    const handleRowButtonClick = (course: Course) => () => {
         setSelectedCourse(course);
     };
 
+    const handleClearSelectedCourse = () => {
+        setSelectedCourse(null);
+    };
+
     return (
-        <div>
+        <ExtensionRoot>
             <TableHead>Plus</TableHead>
             {rows.map(row => (
                 <TableRow
                     element={row.rowElement}
                     course={row.course}
                     support={support}
-                    onClick={handleRowButtonClick}
+                    onClick={handleRowButtonClick(row.course)}
                 />
             ))}
+            {selectedCourse && <CoursePopup course={selectedCourse} onClose={handleClearSelectedCourse} />}
             {isScrolling && <div>Scrolling...</div>}
-        </div>
+        </ExtensionRoot>
     );
 }

src/views/components/PopupMain.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
+import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
 
 export default function PopupMain() {
-    return <div>popup</div>;
+    return <ExtensionRoot>Popup</ExtensionRoot>;
 }

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

@@ -0,0 +1,12 @@
+@import 'src/views/styles/base.module.scss';
+
+.extensionRoot {
+    font-family: 'Inter' !important;
+    color: #303030;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-family: Inter, sans-serif;
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 18px;
+}

src/views/components/common/ExtensionRoot/ExtensionRoot.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './ExtensionRoot.module.scss';
+
+interface Props {
+    testId?: string;
+}
+/**
+ * A wrapper component for the extension elements that adds some basic styling to them
+ */
+export default function ExtensionRoot(props: React.PropsWithChildren<Props>) {
+    return (
+        <div className={styles.extensionRoot} data-testid={props.testId}>
+            {props.children}
+        </div>
+    );
+}

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

@@ -1,16 +1,19 @@
 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 }: Props) {
+export default function CoursePopup({ course, onClose }: Props) {
     return (
         <div>
             <h1>{course.fullName}</h1>
             <p>{course.description}</p>
+            <Button onClick={onClose}>Close</Button>
         </div>
     );
 }