created reusable text component, and setup typing for it automatically. also fixed bugs with autoload and scraper so that it would handle appending course name headers

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

@@ -3,9 +3,9 @@
 $spinner-border-width: 10px;
 
 .spinner {
-    border: 1px solid $CHARCOAL;
+    border: 1px solid $charcoal;
     border-width: $spinner-border-width;
-    border-top: $spinner-border-width solid $TANGERINE;
+    border-top: $spinner-border-width solid $tangerine;
     margin: 0 auto 15px auto;
     border-radius: 50%;
     width: 60px;

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

@@ -0,0 +1,3 @@
+.text {
+    font-family: 'Inter', sans-serif;
+}

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

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
+import colors, { ISassColors } from 'src/views/styles/colors.module.scss';
+import fonts, { ISizes, IWeights } from 'src/views/styles/fonts.module.scss';
+import styles from './Text.module.scss';
+
+type Props = {
+    color?: keyof ISassColors & 'black';
+    weight: keyof IWeights;
+    size: keyof ISizes;
+    span?: boolean;
+    className?: string;
+    onClick?: () => void;
+    align?: React.CSSProperties['textAlign'];
+    style?: React.CSSProperties;
+};
+
+/**
+ * A reusable Text component with props that build on top of the design system for the extension
+ */
+export default function Text(props: PropsWithChildren<Props>) {
+    const style = props.style || {};
+
+    style.textAlign ??= props.align;
+    style.color ??= colors?.[props.color ?? 'charcoal'];
+    style.fontSize ??= fonts?.[props.size ?? 'medium'];
+    style.fontWeight ??= fonts?.[props.weight ?? 'bold'];
+
+    if (props.span) {
+        <span className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
+            {props.children}
+        </span>;
+    }
+
+    return (
+        <div className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
+            {props.children}
+        </div>
+    );
+}