lot of refactoring, reorganized course buttons. Now linking to professors directory page

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

@@ -1,3 +1,80 @@
+@import "src/views/styles/base.module.scss";
+
 .text {
     font-family: 'Inter', sans-serif;
+    color: $charcoal;
 }
+
+
+.light_weight {
+    font-weight: $light_weight;
+}
+
+.regular_weight {
+    font-weight: $regular_weight;
+}
+
+.normal_weight {
+    font-weight: $normal_weight;
+}
+
+.semi_bold_weight {
+    font-weight: $semi_bold_weight;
+}
+
+.bold_weight {
+    font-weight: $bold_weight;
+}
+
+.black_weight {
+    font-weight: $black_weight;
+}
+
+.x_small_size {
+    font-size: $x_small_size;
+}
+
+.small_size {
+    font-size: $small_size;
+}
+
+.medium_size {
+    font-size: $medium_size;
+}
+
+.large_size {
+    font-size: $large_size;
+}
+
+.x_large_size {
+    font-size: $x_large_size;
+}
+
+.xx_large_size {
+    font-size: $xx_large_size;
+}
+
+.x_small_line_height {
+    line-height: $x_small_line_height;
+}
+
+.small_line_height {
+    line-height: $small_line_height;
+}
+
+.medium_line_height {
+    line-height: $medium_line_height;
+}
+
+.large_line_height {
+    line-height: $large_line_height;
+}
+
+.x_large_line_height {
+    line-height: $x_large_line_height;
+}
+
+.xx_large_line_height {
+    line-height: $xx_large_line_height;
+}
+

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

@@ -19,24 +19,35 @@ export type TextProps = {
  * A reusable Text component with props that build on top of the design system for the extension
  */
 export default function Text(props: PropsWithChildren<TextProps>) {
-    const style = props.style || {};
+    const style: React.CSSProperties = {
+        ...props.style,
+        textAlign: props.align,
+        color: props.color ? colors[props.color] : undefined,
+    };
 
-    style.textAlign ??= props.align;
-    style.color ??= colors?.[props.color ?? 'charcoal'];
-    style.fontSize ??= fonts?.[`${props.size ?? 'medium'}_size`];
-    style.fontWeight ??= fonts?.[`${props.weight ?? 'regular'}_weight`];
-    style.lineHeight ??= fonts?.[`${props.size ?? 'medium'}_line_height`];
+    const weightClass = `${props.weight ?? 'regular'}_weight`;
+    const fontSizeClass = `${props.size ?? 'medium'}_size`;
+    const lineHightClass = `${props.size ?? 'medium'}_line_height`;
+
+    const className = classNames(
+        styles.text,
+        props.className,
+
+        styles[weightClass],
+        styles[fontSizeClass],
+        styles[lineHightClass]
+    );
 
     if (props.span) {
         return (
-            <span className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
+            <span className={className} style={style} onClick={props.onClick}>
                 {props.children}
             </span>
         );
     }
 
     return (
-        <div className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
+        <div className={className} style={style} onClick={props.onClick}>
             {props.children}
         </div>
     );