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/styles/base.module.scss

@@ -1,3 +1,4 @@
 @import './colors.module.scss';
 @import './fonts.module.scss';
 @import './elevation.module.scss';
+@import './utils.module.scss';

src/views/styles/colors.module.scss

@@ -1,25 +1,25 @@
-$BURNT_ORANGE: #bf5700;
-$CHARCOAL: #333f48;
-$WHITE: #ffffff;
-$TANGERINE: #f8971f;
-$SUNSHINE: #ffd600;
-$CACTUS: #a6cd57;
-$TURTLE_POND: #579d42;
-$TURQUOISE: #00a9b7;
-$BLUEBONNET: #005f86;
-$SHADE: #9cadb7;
-$LIMESTONE: #d6d2c4;
+$burnt_orange: #bf5700;
+$charcoal: #333f48;
+$white: #ffffff;
+$tangerine: #f8971f;
+$sunshine: #ffd600;
+$cactus: #a6cd57;
+$turtle_pond: #579d42;
+$turquoise: #00a9b7;
+$bluebonnet: #005f86;
+$shade: #9cadb7;
+$limestone: #d6d2c4;
 
 :export {
-    BURNT_ORANGE: $BURNT_ORANGE;
-    CHARCOAL: $CHARCOAL;
-    WHITE: $WHITE;
-    TANGERINE: $TANGERINE;
-    SUNSHINE: $SUNSHINE;
-    CACTUS: $CACTUS;
-    TURTLE_POND: $TURTLE_POND;
-    TURQUOISE: $TURQUOISE;
-    BLUEBONNET: $BLUEBONNET;
-    SHADE: $SHADE;
-    LIMESTONE: $LIMESTONE;
+    burnt_orange: $burnt_orange;
+    charcoal: $charcoal;
+    white: $white;
+    tangerine: $tangerine;
+    sunshine: $sunshine;
+    cactus: $cactus;
+    turtle_pond: $turtle_pond;
+    turquoise: $turquoise;
+    bluebonnet: $bluebonnet;
+    shade: $shade;
+    limestone: $limestone;
 }

src/views/styles/colors.module.scss.d.ts

@@ -3,17 +3,17 @@
  * when we import them into ts/tsx files
  */
 export interface ISassColors {
-    BURNT_ORANGE: string;
-    CHARCOAL: string;
-    WHITE: string;
-    TANGERINE: string;
-    SUNSHINE: string;
-    CACTUS: string;
-    TURTLE_POND: string;
-    TURQUOISE: string;
-    BLUEBONNET: string;
-    SHADE: string;
-    LIMESTONE: string;
+    burnt_orange: string;
+    charcoal: string;
+    white: string;
+    tangerine: string;
+    sunshine: string;
+    cactus: string;
+    turtle_pond: string;
+    turquoise: string;
+    bluebonnet: string;
+    shade: string;
+    limestone: string;
 }
 
 declare const colors: ISassColors;

src/views/styles/fonts.module.scss

@@ -7,3 +7,32 @@
         font-weight: #{$weights};
     }
 }
+
+$light: 300;
+$regular: 400;
+$medium: 500;
+$semi_bold: 600;
+$bold: 700;
+$black: 900;
+
+$x_small: 8px;
+$small: 12px;
+$medium: 16px;
+$large: 24px;
+$x_large: 32px;
+$xx_large: 48px;
+
+:export {
+    light: $light;
+    regular: $regular;
+    medium: $medium;
+    semi_bold: $semi_bold;
+    bold: $bold;
+    black: $black;
+    x_small: $x_small;
+    small: $small;
+    medium: $medium;
+    large: $large;
+    x_large: $x_large;
+    xx_large: $xx_large;
+}

src/views/styles/fonts.module.scss.d.ts

@@ -0,0 +1,26 @@
+export interface IWeights {
+    light: number;
+    regular: number;
+    medium: number;
+    bold: number;
+    semi_bold: number;
+    black: number;
+}
+
+export interface ISizes {
+    x_small: number;
+    small: number;
+    medium: number;
+    large: number;
+    x_large: number;
+    xx_large: number;
+}
+
+/**
+ * This is a file that we need to create to tell typescript what the shape of the css modules is
+ * when we import them into ts/tsx files
+ */
+export type IFonts = IWeights & ISizes;
+
+declare const fonts: IFonts;
+export default fonts;