auto generate classes using scss magic, some restyling and refactoring'

src/views/components/CourseCatalogMain.tsx

@@ -66,10 +66,8 @@ export default function CourseCatalogMain({ support }: Props) {
                 return (
                     <TableRow
                         key={row.course.uniqueId}
-                        element={row.element}
-                        course={row.course}
+                        row={row}
                         isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
-                        support={support}
                         onClick={handleRowButtonClick(row.course)}
                     />
                 );

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

@@ -16,123 +16,57 @@
     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;
+    &.disabled {
+        cursor: not-allowed !important;
+        opacity: 0.5 !important;
 
-        &:hover {
-            background-color: lighten($primary, 10%);
-        }
-
-        &:active,
         &:active {
-            background-color: darken($primary, 10%);
+            animation: none !important;
         }
     }
 
-    &.secondary {
-        background-color: $secondary;
-        color: #fff;
-
-        &:hover {
-            background-color: lighten($secondary, 10%);
-        }
-
-        &:active,
-        &:active {
-            background-color: darken($secondary, 10%);
-        }
+    &:active {
+        animation: click_animation 0.5s ease-in-out;
     }
 
-    &.tertiary {
-        background-color: $tertiary;
-        color: #fff;
+    @each $color,
+        $value
+            in (
+                primary: $burnt_orange,
+                secondary: $charcoal,
+                tertiary: $bluebonnet,
+                danger: $speedway_brick,
+                warning: $tangerine,
+                success: $turtle_pond,
+                info: $turquoise
+            )
+    {
+        &.#{$color} {
+            background-color: $value;
+            color: #fff;
 
-        &:hover {
-            background-color: lighten($tertiary, 10%);
-        }
+            &:hover {
+                background-color: lighten($value, 10%);
+            }
 
-        &:focus,
-        &:active {
-            background-color: darken($tertiary, 10%);
-        }
-    }
+            &:focus,
+            &:active {
+                background-color: darken($value, 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%);
+            &.disabled {
+                background-color: $value !important;
+            }
         }
     }
 }
 
-@keyframes ripple {
+@keyframes click_animation {
     0% {
         transform: scale(1);
     }

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

@@ -7,6 +7,7 @@ interface Props {
     style?: React.CSSProperties;
     onClick?: () => void;
     type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
+    disabled?: boolean;
     testId?: string;
 }
 
@@ -20,14 +21,17 @@ export function Button({
     type,
     testId,
     children,
+    disabled,
     onClick,
 }: React.PropsWithChildren<Props>): JSX.Element {
     return (
         <button
             style={style}
             data-testId={testId}
-            className={classNames(styles.button, className, styles[type ?? 'primary'])}
-            onClick={onClick}
+            className={classNames(styles.button, className, styles[type ?? 'primary'], {
+                [styles.disabled]: disabled,
+            })}
+            onClick={disabled ? undefined : onClick}
         >
             {children}
         </button>

src/views/components/injected/TableRow/TableRow.module.scss

@@ -1,8 +1,8 @@
 @import 'src/views/styles/base.module.scss';
 
 .selectedRow {
-    td {
-        background: green !important;
+    * {
+        background: $burnt_orange !important;
         color: white !important;
     }
 }

src/views/components/injected/TableRow/TableRow.tsx

@@ -1,16 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Course, ScrapedRow } from 'src/shared/types/Course';
-import { SiteSupport } from 'src/views/lib/getSiteSupport';
+import {} from 'src/views/lib/getSiteSupport';
 import { Button } from '../../common/Button/Button';
 import Icon from '../../common/Icon/Icon';
 import styles from './TableRow.module.scss';
 
 interface Props {
-    support: SiteSupport;
     isSelected: boolean;
-    course: Course;
-    element: HTMLTableRowElement;
+    row: ScrapedRow;
     onClick: (...args: any[]) => any;
 }
 
@@ -18,19 +16,25 @@ interface Props {
  * This component is injected into each row of the course catalog table.
  * @returns a react portal to the new td in the column or null if the column has not been created yet.
  */
-export default function TableRow({ support, course, element, isSelected, onClick }: Props): JSX.Element | null {
+export default function TableRow({ row, isSelected, onClick }: Props): JSX.Element | null {
     const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
 
+    const { element, course } = row;
+
     useEffect(() => {
         const portalContainer = document.createElement('td');
         const lastTableCell = element.querySelector('td:last-child');
         lastTableCell!.after(portalContainer);
         setContainer(portalContainer);
-    }, []);
+
+        return () => {
+            portalContainer.remove();
+        };
+    }, [element]);
 
     useEffect(() => {
         element.classList[isSelected ? 'add' : 'remove'](styles.selectedRow);
-    }, [course, isSelected, element.classList]);
+    }, [isSelected, element.classList]);
 
     if (!container) {
         return null;