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