created reusable button component, created course info header component, created utility type for Colors, removed typescript-css-modules plugin, and added a threshold to the infinite scroll hook

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

@@ -12,8 +12,134 @@
     transition: all 0.3s ease;
     font-family: 'Inter';
 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:active {
+        animation: ripple 1s ease-out;
+    }
+
+    $primary: $burnt_orange;
+    $secondary: $charcoal;
+    $tertiary: $bluebonnet;
+    $danger: $speedway_brick;
+    $warning: $tangerine;
+    $success: $turtle_pond;
+    $info: $turquoise;
+
     &:hover {
         background-color: #fff;
         color: #000;
     }
+
+    &.primary {
+        background-color: $primary;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($primary, 10%);
+        }
+
+        &:active,
+        &:active {
+            background-color: darken($primary, 10%);
+        }
+    }
+
+    &.secondary {
+        background-color: $secondary;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($secondary, 10%);
+        }
+
+        &:active,
+        &:active {
+            background-color: darken($secondary, 10%);
+        }
+    }
+
+    &.tertiary {
+        background-color: $tertiary;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($tertiary, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($tertiary, 10%);
+        }
+    }
+
+    &.danger {
+        background-color: $danger;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($danger, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($danger, 10%);
+        }
+    }
+
+    &.warning {
+        background-color: $warning;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($warning, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($warning, 10%);
+        }
+    }
+
+    &.success {
+        background-color: $success;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($success, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($success, 10%);
+        }
+    }
+
+    &.info {
+        background-color: $info;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($info, 10%);
+        }
+
+        &:focus,
+        &:active {
+            background-color: darken($info, 10%);
+        }
+    }
+}
+
+@keyframes ripple {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.9);
+    }
+    100% {
+        transform: scale(1);
+    }
 }

src/views/components/common/Button/Button.tsx

@@ -1,14 +1,35 @@
+import classNames from 'classnames';
 import React from 'react';
 import styles from './Button.module.scss';
 
 interface Props {
+    className?: string;
+    style?: React.CSSProperties;
     onClick?: () => void;
+    type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
+    testId?: string;
 }
 
-export function Button(props: React.PropsWithChildren<Props>): JSX.Element {
+/**
+ * A reusable button component that follows the design system of the extension.
+ * @returns
+ */
+export function Button({
+    style,
+    className,
+    type,
+    testId,
+    children,
+    onClick,
+}: React.PropsWithChildren<Props>): JSX.Element {
     return (
-        <button className={styles.button} onClick={props.onClick}>
-            {props.children}
+        <button
+            style={style}
+            data-testId={testId}
+            className={classNames(styles.button, className, styles[type ?? 'primary'])}
+            onClick={onClick}
+        >
+            {children}
         </button>
     );
 }

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

@@ -3,3 +3,9 @@
     text-decoration: underline;
     cursor: pointer;
 }
+
+.disabled {
+    cursor: not-allowed !important;
+    text-decoration: none !important;
+    color: #999999 !important;
+}

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

@@ -6,6 +6,7 @@ import styles from './Link.module.scss';
 
 type Props = TextProps & {
     url?: string;
+    disabled?: boolean;
 };
 
 /**
@@ -21,5 +22,16 @@ export default function Link(props: PropsWithChildren<Props>) {
         passedProps.onClick = () => bMessenger.openNewTab({ url });
     }
 
-    return <Text {...passedProps} className={classNames(styles.link, props.className)} />;
+    return (
+        <Text
+            {...passedProps}
+            className={classNames(
+                styles.link,
+                {
+                    [styles.disabled]: props.disabled,
+                },
+                props.className
+            )}
+        />
+    );
 }

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ISassColors } from 'src/views/styles/colors.module.scss';
+import { Color } from 'src/views/styles/colors.module.scss';
 import styles from './Spinner.module.scss';
 
 type Props = {
-    color?: keyof ISassColors;
+    color?: Color;
 };
 
 /**

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

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
-import colors, { ISassColors } from 'src/views/styles/colors.module.scss';
+import colors, { Color } from 'src/views/styles/colors.module.scss';
 import fonts, { Size, Weight } from 'src/views/styles/fonts.module.scss';
 import styles from './Text.module.scss';
 
 export type TextProps = {
-    color?: keyof ISassColors;
+    color?: Color;
     weight?: Weight;
     size: Size;
     span?: boolean;