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