fix: conflict row bug (#130)

* fix: temp fixes, need to still work on it

* fix: im a god at css otl

* fix: handle edge case where they have conflicting classes in their schedule

* fix: got it working

* fix: don't change the font size of course names

* fix: remove unused prop

* fix: lint errs

* fix: remove unused code

src/views/components/CourseCatalogMain.tsx

@@ -5,7 +5,7 @@ import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalog
 import RecruitmentBanner from '@views/components/injected/RecruitmentBanner/RecruitmentBanner';
 import TableHead from '@views/components/injected/TableHead';
 import TableRow from '@views/components/injected/TableRow/TableRow';
-import TableSubheading from '@views/components/injected/TableSubheading/TableSubheading';
+// import TableSubheading from '@views/components/injected/TableSubheading/TableSubheading';
 import { useKeyPress } from '@views/hooks/useKeyPress';
 import useSchedules from '@views/hooks/useSchedules';
 import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
@@ -63,21 +63,18 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element {
         <ExtensionRoot>
             <RecruitmentBanner />
             <TableHead>Plus</TableHead>
-            {rows.map((row, i) => {
-                if (!row.course) {
-                    // TODO: handle the course section headers
-                    return <TableSubheading key={row.element.innerText + i.toString()} row={row} />;
-                }
-                return (
-                    <TableRow
-                        key={row.course.uniqueId}
-                        row={row}
-                        isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
-                        activeSchedule={activeSchedule}
-                        onClick={handleRowButtonClick(row.course)}
-                    />
-                );
-            })}
+            {rows.map(
+                row =>
+                    row.course && (
+                        <TableRow
+                            key={row.course.uniqueId}
+                            row={row}
+                            isSelected={row.course.uniqueId === selectedCourse?.uniqueId}
+                            activeSchedule={activeSchedule}
+                            onClick={handleRowButtonClick(row.course)}
+                        />
+                    )
+            )}
             {selectedCourse && (
                 <CourseCatalogInjectedPopup
                     course={selectedCourse}

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

@@ -72,16 +72,17 @@
 }
 
 .inActiveSchedule {
-    * {
+    > *:not(td:last-child) {
         color: colors.$turtle_pond !important;
         font-weight: bold !important;
     }
 }
 
-.isConflict {
-    * {
-        color: colors.$speedway_brick !important;
-        font-weight: normal !important;
-        text-decoration: line-through !important;
+// for the edge case where they have conflicting classes in their schedule
+.isConflict:not(.inActiveSchedule) {
+    > *:not(td:last-child) {
+        color: colors.$speedway_brick;
+        font-weight: normal;
+        text-decoration: line-through;
     }
 }

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

@@ -1,11 +1,10 @@
 import type { Course, ScrapedRow } from '@shared/types/Course';
 import type { UserSchedule } from '@shared/types/UserSchedule';
-import { Button } from '@views/components/common/Button/Button';
 import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
-import AddIcon from '~icons/material-symbols/add-circle';
+import RowIcon from '~icons/material-symbols/bar-chart-rounded';
 
 import styles from './TableRow.module.scss';
 
@@ -30,8 +29,9 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
 
     useEffect(() => {
         element.classList.add(styles.row);
+        element.classList.add('group');
         const portalContainer = document.createElement('td');
-        portalContainer.style.textAlign = 'right';
+        // portalContainer.style.textAlign = 'right';
         const lastTableCell = element.querySelector('td:last-child');
         lastTableCell!.after(portalContainer);
         setContainer(portalContainer);
@@ -85,16 +85,20 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
     }
 
     return ReactDOM.createPortal(
-        <>
-            <Button
-                icon={AddIcon}
-                className={styles.rowButton}
-                color='ut-burntorange'
+        <div className='relative'>
+            <button
+                className='bg-ut-burntorange w-6 h-6 items-center justify-center color-white! flex m1 rounded'
                 onClick={onClick}
-                variant='single'
-            />
-            {conflicts.length > 0 && <ConflictsWithWarning className={styles.conflictTooltip} conflicts={conflicts} />}
-        </>,
+            >
+                <RowIcon color='ut-white' />
+            </button>
+            {conflicts.length > 0 && (
+                <ConflictsWithWarning
+                    className='group-hover:visible invisible text-white absolute left-13 top--3'
+                    conflicts={conflicts}
+                />
+            )}
+        </div>,
         container
     );
 }