created reusable button component, created course info header component, created utility type for Colors, removed typescript-css-modules plugin, and added a threshold to the infinite scroll hook

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 CoursePopup from './injected/CoursePopup/CoursePopup';
+import CourseInfoPopup from './injected/CourseInfoPopup/CourseInfoPopup';
 import TableHead from './injected/TableHead';
 import TableRow from './injected/TableRow/TableRow';
 
@@ -74,7 +74,7 @@ export default function CourseCatalogMain({ support }: Props) {
                     />
                 );
             })}
-            {selectedCourse && <CoursePopup course={selectedCourse} onClose={handleClearSelectedCourse} />}
+            {selectedCourse && <CourseInfoPopup course={selectedCourse} onClose={handleClearSelectedCourse} />}
             <AutoLoad addRows={addRows} />
         </ExtensionRoot>
     );

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

@@ -12,8 +12,134 @@
     transition: all 0.3s ease;
     font-family: 'Inter';
 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:active {
+        animation: ripple 1s ease-out;
+    }
+
+    $primary: $burnt_orange;
+    $secondary: $charcoal;
+    $tertiary: $bluebonnet;
+    $danger: $speedway_brick;
+    $warning: $tangerine;
+    $success: $turtle_pond;
+    $info: $turquoise;
+
     &:hover {
         background-color: #fff;
         color: #000;
     }
+
+    &.primary {
+        background-color: $primary;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($primary, 10%);
+        }
+
+        &:active,
+        &:active {
+            background-color: darken($primary, 10%);
+        }
+    }
+
+    &.secondary {
+        background-color: $secondary;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($secondary, 10%);
+        }
+
+        &:active,
+        &:active {
+            background-color: darken($secondary, 10%);
+        }
+    }
+
+    &.tertiary {
+        background-color: $tertiary;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($tertiary, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($tertiary, 10%);
+        }
+    }
+
+    &.danger {
+        background-color: $danger;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($danger, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($danger, 10%);
+        }
+    }
+
+    &.warning {
+        background-color: $warning;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($warning, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($warning, 10%);
+        }
+    }
+
+    &.success {
+        background-color: $success;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($success, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($success, 10%);
+        }
+    }
+
+    &.info {
+        background-color: $info;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($info, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($info, 10%);
+        }
+    }
+}
+
+@keyframes ripple {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.9);
+    }
+    100% {
+        transform: scale(1);
+    }
 }

src/views/components/common/Button/Button.tsx

@@ -1,14 +1,35 @@
+import classNames from 'classnames';
 import React from 'react';
 import styles from './Button.module.scss';
 
 interface Props {
+    className?: string;
+    style?: React.CSSProperties;
     onClick?: () => void;
+    type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
+    testId?: string;
 }
 
-export function Button(props: React.PropsWithChildren<Props>): JSX.Element {
+/**
+ * A reusable button component that follows the design system of the extension.
+ * @returns
+ */
+export function Button({
+    style,
+    className,
+    type,
+    testId,
+    children,
+    onClick,
+}: React.PropsWithChildren<Props>): JSX.Element {
     return (
-        <button className={styles.button} onClick={props.onClick}>
-            {props.children}
+        <button
+            style={style}
+            data-testId={testId}
+            className={classNames(styles.button, className, styles[type ?? 'primary'])}
+            onClick={onClick}
+        >
+            {children}
         </button>
     );
 }

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

@@ -3,3 +3,9 @@
     text-decoration: underline;
     cursor: pointer;
 }
+
+.disabled {
+    cursor: not-allowed !important;
+    text-decoration: none !important;
+    color: #999999 !important;
+}

src/views/components/common/Link/Link.tsx

@@ -6,6 +6,7 @@ import styles from './Link.module.scss';
 
 type Props = TextProps & {
     url?: string;
+    disabled?: boolean;
 };
 
 /**
@@ -21,5 +22,16 @@ export default function Link(props: PropsWithChildren<Props>) {
         passedProps.onClick = () => bMessenger.openNewTab({ url });
     }
 
-    return <Text {...passedProps} className={classNames(styles.link, props.className)} />;
+    return (
+        <Text
+            {...passedProps}
+            className={classNames(
+                styles.link,
+                {
+                    [styles.disabled]: props.disabled,
+                },
+                props.className
+            )}
+        />
+    );
 }

src/views/components/common/Spinner/Spinner.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ISassColors } from 'src/views/styles/colors.module.scss';
+import { Color } from 'src/views/styles/colors.module.scss';
 import styles from './Spinner.module.scss';
 
 type Props = {
-    color?: keyof ISassColors;
+    color?: Color;
 };
 
 /**

src/views/components/common/Text/Text.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
-import colors, { ISassColors } from 'src/views/styles/colors.module.scss';
+import colors, { Color } from 'src/views/styles/colors.module.scss';
 import fonts, { Size, Weight } from 'src/views/styles/fonts.module.scss';
 import styles from './Text.module.scss';
 
 export type TextProps = {
-    color?: keyof ISassColors;
+    color?: Color;
     weight?: Weight;
     size: Size;
     span?: boolean;

src/views/components/injected/CourseInfoPopup/CourseInfoHeader/CourseInfoHeader.module.scss

@@ -0,0 +1,23 @@
+@import 'src/views/styles/base.module.scss';
+.header {
+    height: auto;
+    color: white;
+    padding: 12px;
+    margin: 50px 20px;
+    align-items: center;
+    justify-content: center;
+
+    .title {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .uniqueId {
+            margin-left: 8px;
+        }
+    }
+
+    .instructors {
+        margin-top: 8px;
+    }
+}

src/views/components/injected/CourseInfoPopup/CourseInfoHeader/CourseInfoHeader.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { bMessenger } from 'src/shared/messages';
+import { Course } from 'src/shared/types/Course';
+import Card from 'src/views/components/common/Card/Card';
+import Link from 'src/views/components/common/Link/Link';
+import Text from 'src/views/components/common/Text/Text';
+import styles from './CourseInfoHeader.module.scss';
+
+type Props = {
+    course: Course;
+};
+
+/**
+ * This component displays the header of the course info popup.
+ * It displays the course name, unique id, instructors, and schedule, all formatted nicely.
+ */
+export default function CourseInfoHeader({ course }: Props) {
+    const getBuildingUrl = (building?: string): string | undefined => {
+        if (!building) return undefined;
+        return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
+    };
+
+    return (
+        <Card className={styles.header}>
+            <Text className={styles.title} size='large' weight='bold' color='black'>
+                {course.courseName} ({course.department} {course.number})
+                <Link
+                    span
+                    url={course.url}
+                    className={styles.uniqueId}
+                    size='medium'
+                    weight='semi_bold'
+                    color='burnt_orange'
+                >
+                    #{course.uniqueId}
+                </Link>
+            </Text>
+            <Text size='medium' className={styles.instructors}>
+                {course.getInstructorString({
+                    prefix: 'with ',
+                    format: 'first_last',
+                })}
+            </Text>
+
+            {course.schedule.meetings.map(meeting => (
+                <Text size='medium'>
+                    <Text span size='medium' weight='bold' color='black'>
+                        {meeting.getDaysString({
+                            format: 'long',
+                            separator: 'short',
+                        })}
+                    </Text>
+                    {' at '}
+                    <Text span size='medium'>
+                        {meeting.getTimeString({
+                            separator: 'to',
+                            capitalize: true,
+                        })}
+                    </Text>
+                    {' in '}
+                    <Link
+                        span
+                        size='medium'
+                        weight='normal'
+                        color='bluebonnet'
+                        url={getBuildingUrl(meeting.location?.building)}
+                        disabled={!meeting.location?.building}
+                    >
+                        {meeting.location?.building ?? 'TBA'}
+                    </Link>
+                </Text>
+            ))}
+        </Card>
+    );
+}

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

@@ -0,0 +1,11 @@
+.popup {
+    border-radius: 12px;
+    position: relative;
+
+    .close {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        cursor: pointer;
+    }
+}

src/views/components/injected/CourseInfoPopup/CourseInfoPopup.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Course } from 'src/shared/types/Course';
+import Card from '../../common/Card/Card';
+import Icon from '../../common/Icon/Icon';
+import Link from '../../common/Link/Link';
+import Popup from '../../common/Popup/Popup';
+import Text from '../../common/Text/Text';
+import CourseInfoHeader from './CourseInfoHeader/CourseInfoHeader';
+import styles from './CourseInfoPopup.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 CourseInfoPopup({ course, onClose }: Props) {
+    console.log(course);
+    return (
+        <Popup className={styles.popup} overlay onClose={onClose}>
+            <Icon className={styles.close} size='large' name='close' onClick={onClose} />
+            <CourseInfoHeader course={course} />
+        </Popup>
+    );
+}

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

@@ -1,34 +0,0 @@
-.popup {
-    border-radius: 12px;
-    position: relative;
-
-    .close {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-        cursor: pointer;
-    }
-
-    .body {
-        height: auto;
-        color: white;
-        padding: 12px;
-        margin: 50px 20px;
-        align-items: center;
-        justify-content: center;
-
-        .title {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .uniqueId {
-                margin-left: 8px;
-            }
-        }
-
-        .instructors {
-            margin-top: 8px;
-        }
-    }
-}

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

@@ -1,68 +0,0 @@
-import React from 'react';
-import { Course } from 'src/shared/types/Course';
-import Card from '../../common/Card/Card';
-import Icon from '../../common/Icon/Icon';
-import Link from '../../common/Link/Link';
-import Popup from '../../common/Popup/Popup';
-import Text from '../../common/Text/Text';
-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) {
-    console.log(course);
-    return (
-        <Popup className={styles.popup} overlay onClose={onClose}>
-            <Icon className={styles.close} size='large' name='close' onClick={onClose} />
-            <Card className={styles.body}>
-                <Text className={styles.title} size='large' weight='bold' color='black'>
-                    {course.courseName} ({course.department} {course.number})
-                    <Link
-                        span
-                        url={course.url}
-                        className={styles.uniqueId}
-                        size='medium'
-                        weight='semi_bold'
-                        color='burnt_orange'
-                    >
-                        #{course.uniqueId}
-                    </Link>
-                </Text>
-                <Text size='medium' className={styles.instructors}>
-                    {course.getInstructorString({
-                        prefix: 'with ',
-                        format: 'first_last',
-                    })}
-                </Text>
-
-                {course.schedule.meetings.map(meeting => (
-                    <Text size='medium'>
-                        <Text span size='medium' weight='bold' color='black'>
-                            {meeting.getDaysString({
-                                format: 'long',
-                                separator: 'short',
-                            })}
-                        </Text>
-                        {' at '}
-                        <Text span size='medium'>
-                            {meeting.getTimeString({
-                                separator: 'to',
-                                capitalize: true,
-                            })}
-                        </Text>
-                        {' in '}
-                        <Link span size='medium' weight='bold' color='bluebonnet'>
-                            {meeting.location?.building}
-                        </Link>
-                    </Text>
-                ))}
-            </Card>
-        </Popup>
-    );
-}

src/views/components/injected/TableRow/TableRow.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { Course, ScrapedRow } from 'src/shared/types/Course';
 import { SiteSupport } from 'src/views/lib/getSiteSupport';
 import { Button } from '../../common/Button/Button';
+import Icon from '../../common/Icon/Icon';
 import styles from './TableRow.module.scss';
 
 interface Props {
@@ -29,11 +30,16 @@ export default function TableRow({ support, course, element, isSelected, onClick
 
     useEffect(() => {
         element.classList[isSelected ? 'add' : 'remove'](styles.selectedRow);
-    }, [course, isSelected]);
+    }, [course, isSelected, element.classList]);
 
     if (!container) {
         return null;
     }
 
-    return ReactDOM.createPortal(<Button onClick={onClick}>Plus</Button>, container);
+    return ReactDOM.createPortal(
+        <Button onClick={onClick} type='secondary'>
+            <Icon name='bar_chart' color='white' size='medium' />
+        </Button>,
+        container
+    );
 }