fixed bug with material icons, and reusable icon component

src/views/components/CourseCatalogMain.tsx

@@ -6,6 +6,7 @@ import getCourseTableRows from '../lib/getCourseTableRows';
 import { SiteSupport } from '../lib/getSiteSupport';
 import { populateSearchInputs } from '../lib/populateSearchInputs';
 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 CoursePanel from './injected/CoursePanel/CoursePanel';
@@ -53,7 +54,10 @@ export default function CourseCatalogMain({ support }: Props) {
 
     return (
         <ExtensionRoot>
-            <TableHead>Plus</TableHead>
+            <TableHead>
+                Plus
+                <Icon name='add' />
+            </TableHead>
             {rows.map(row => {
                 if (!row.course) {
                     // TODO: handle the course section headers

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

@@ -1,13 +1,13 @@
 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 fonts, { Size, Weight } from 'src/views/styles/fonts.module.scss';
 import styles from './Text.module.scss';
 
 type Props = {
     color?: keyof ISassColors;
-    weight: keyof IWeights;
+    weight: Weight;
-    size: keyof ISizes;
+    size: Size;
     span?: boolean;
     className?: string;
     onClick?: () => void;
@@ -23,8 +23,8 @@ export default function Text(props: PropsWithChildren<Props>) {
 
     style.textAlign ??= props.align;
     style.color ??= colors?.[props.color ?? 'charcoal'];
-    style.fontSize ??= fonts?.[props.size ?? 'medium'];
+    style.fontSize ??= fonts?.[`${props.size ?? 'medium'}_size`];
-    style.fontWeight ??= fonts?.[props.weight ?? 'regular'];
+    style.fontWeight ??= fonts?.[`${props.weight ?? 'regular'}_weight`];
 
     if (props.span) {
         return (

src/views/styles/fonts.module.scss

@@ -8,40 +8,40 @@
     }
 }
 
-/* fallback */
 @font-face {
     font-family: 'Material Icons Round';
     font-style: normal;
-    font-weight: 400;
     font-display: block;
-    src: url('moz-extension://__MSG_@@extension_id__/fonts/material-icons.woff2') format('woff2');
+    font-weight: 400;
+    src: url('chrome-extension://__MSG_@@extension_id__/fonts/material-icons.woff2') format('woff2');
 }
 
-$light: 300;
+$light_weight: 300;
-$regular: 400;
+$regular_weight: 400;
-$medium: 500;
+$normal_weight: 500;
-$semi_bold: 600;
+$semi_bold_weight: 600;
-$bold: 700;
+$bold_weight: 700;
-$black: 900;
+$black_weight: 900;
 
-$x_small: 8px;
+$x_small_size: 8px;
-$small: 12px;
+$small_size: 12px;
-$medium: 16px;
+$medium_size: 16px;
-$large: 24px;
+$large_size: 24px;
-$x_large: 32px;
+$x_large_size: 32px;
-$xx_large: 48px;
+$xx_large_size: 48px;
 
 :export {
-    light: $light;
+    light_weight: $light_weight;
-    regular: $regular;
+    regular_weight: $regular_weight;
-    medium: $medium;
+    normal_weight: $normal_weight;
-    semi_bold: $semi_bold;
+    semi_bold_weight: $semi_bold_weight;
-    bold: $bold;
+    bold_weight: $bold_weight;
-    black: $black;
+    black_weight: $black_weight;
-    x_small: $x_small;
+
-    small: $small;
+    x_small_size: $x_small_size;
-    medium: $medium;
+    small_size: $small_size;
-    large: $large;
+    medium_size: $medium_size;
-    x_large: $x_large;
+    large_size: $large_size;
-    xx_large: $xx_large;
+    x_large_size: $x_large_size;
+    xx_large_size: $xx_large_size;
 }

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

@@ -1,21 +1,33 @@
+/**
+ * the type for all the weight scss variables exported from fonts.module.scss
+ */
 export interface IWeights {
-    light: number;
+    light_weight: number;
-    regular: number;
+    regular_weight: number;
-    medium: number;
+    normal_weight: number;
-    bold: number;
+    bold_weight: number;
-    semi_bold: number;
+    semi_bold_weight: number;
-    black: number;
+    black_weight: number;
 }
 
+/**
+ * the type for all the size scss variables exported from fonts.module.scss
+ */
 export interface ISizes {
-    x_small: number;
+    x_small_size: number;
-    small: number;
+    small_size: number;
-    medium: number;
+    medium_size: number;
-    large: number;
+    large_size: number;
-    x_large: number;
+    x_large_size: number;
-    xx_large: number;
+    xx_large_size: number;
 }
 
+/** A utility type that removes the _weight postfix from the variable names for weights */
+export type Weight = keyof IWeights extends `${infer U}_weight` ? U : never;
+
+/** A utility type that removes the _size postfix from the variable names for sizes */
+export type Size = keyof ISizes extends `${infer U}_size` ? U : never;
+
 /**
  * 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

webpack/plugins/buildProcessPlugins.ts

@@ -67,7 +67,7 @@ export function getBuildPlugins(mode: Environment, htmlEntries: EntryId[], manif
             patterns: [
                 {
                     from: path.resolve('public'),
-                    filter: path => (path.includes('icons') ? path.includes(mode) : true),
+                    filter: path => (path.includes('icons/icon') ? path.includes(mode) : true),
                 },
             ],
         })