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

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

@@ -9,8 +9,6 @@
     border: none;
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px;
     cursor: pointer;
-    font-size: 16px;
-    font-weight: 600;
     transition: all 0.2s ease-in-out;
     font-family: 'Inter';
 

src/views/components/common/Link/Link.tsx

@@ -21,6 +21,7 @@ export default function Link(props: PropsWithChildren<Props>) {
     if (url && !props.onClick) {
         passedProps.onClick = () => bMessenger.openNewTab({ url });
     }
+    const isDisabled = props.disabled || (!url && !props.onClick);
 
     return (
         <Text
@@ -28,7 +29,7 @@ export default function Link(props: PropsWithChildren<Props>) {
             className={classNames(
                 styles.link,
                 {
-                    [styles.disabled]: props.disabled,
+                    [styles.disabled]: isDisabled,
                 },
                 props.className
             )}

src/views/components/common/Spinner/Spinner.tsx

@@ -1,14 +1,16 @@
+import classNames from 'classnames';
 import React from 'react';
-import { Color } from 'src/views/styles/colors.module.scss';
 import styles from './Spinner.module.scss';
 
 type Props = {
-    color?: Color;
+    testId?: string;
+    className?: string;
+    style?: React.CSSProperties;
 };
 
 /**
  * A simple spinner component that can be used to indicate loading.
  */
-export default function Spinner({ color }: Props) {
-    return <div className={styles.spinner} />;
+export default function Spinner({ className, testId, style }: Props) {
+    return <div data-testId={testId} style={style} className={classNames(styles.spinner, className)} />;
 }

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>
     );