feat: replace React icons, refactor PopupMain WIP

src/views/components/CourseCatalogMain.tsx

@@ -17,7 +17,7 @@ import TableRow from './injected/TableRow/TableRow';
 import TableSubheading from './injected/TableSubheading/TableSubheading';
 
 interface Props {
-    support: any; // SiteSupport.COURSE_CATALOG_DETAILS | SiteSupport.COURSE_CATALOG_LIST;
+    support: SiteSupport.COURSE_CATALOG_DETAILS | SiteSupport.COURSE_CATALOG_LIST;
 }
 
 /**

src/views/components/PopupMain.tsx

@@ -12,10 +12,12 @@ import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript
 import React from 'react';
 import { TestColors } from 'src/stories/components/PopupCourseBlock.stories';
 
-import CalendarIcon from '~icons/material-symbols/calendar-month';
+import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
-import RefreshIcon from '~icons/material-symbols/refresh';
+import RedoIcon from '~icons/material-symbols/redo';
 import SettingsIcon from '~icons/material-symbols/settings';
 
+import { Button } from './common/Button/Button';
+
 /**
  * Renders the main popup component.
  * This component displays the main schedule, courses, and options buttons.
@@ -49,27 +51,25 @@ export default function PopupMain() {
                         </div>
                     </div>
                     <div className='flex items-center'>
-                        <button
+                        <Button
-                            style={{ backgroundColor: '#bf5700', borderRadius: '8px', padding: '8px' }}
+                            className='rounded-lg px-4 py-2'
                             onClick={handleOpenCalendar}
+                            variant='filled'
+                            color='ut-burntorange'
                         >
-                            <CalendarIcon color='white' />
+                            <CalendarMonthIcon className='text-white' />
-                        </button>
+                        </Button>
-                        <button
+                        <Button
-                            style={{
+                            className='ml-10 rounded-lg px-4 py-2 shadow-sm'
-                                backgroundColor: 'white',
-                                marginLeft: '10px',
-                                borderRadius: '8px',
-                                padding: '8px',
-                                boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
-                            }}
                             onClick={handleOpenOptions}
+                            variant='filled'
+                            color='ut-offwhite'
                         >
-                            <SettingsIcon color='#C05621' />
+                            <SettingsIcon className='text-ut-burntorange' />
-                        </button>
+                        </Button>
                     </div>
                 </div>
-                {/* <Divider color='#E2E8F0' type='solid' style={{ margin: '1rem 0' }} /> */}
+                <Divider orientation='horizontal' size='width' />
                 <div
                     className='mb-4 rounded-lg bg-white p-2 text-left shadow-inner'
                     style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}
@@ -155,7 +155,7 @@ export default function PopupMain() {
                         <Text as='div' variant='mini'>
                             DATA UPDATED ON: 12:00 AM 02/01/2024
                         </Text>
-                        <RefreshIcon className='ml-2 h-4 w-4 text-gray-600' />
+                        <RedoIcon className='ml-2 h-4 w-4 text-gray' />
                     </div>
                 </div>
             </div>

src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx

@@ -1,4 +1,3 @@
-import type { StatusType } from '@shared/types/Course';
 import { Status } from '@shared/types/Course';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
@@ -16,7 +15,7 @@ import CancelledIcon from '~icons/material-symbols/warning';
 export interface CalendarCourseCellProps {
     courseDeptAndInstr: string;
     timeAndLocation?: string;
-    status: StatusType;
+    status: Status;
     colors: CourseColors;
     className?: string;
 }

src/views/components/calendar/CalendarHeader/CalenderHeader.tsx

@@ -52,7 +52,7 @@ const CalendarHeader = () => (
                 </div>
             </div>
         </div>
-        {/* <Divider type='solid' /> */}
+        <Divider orientation='horizontal' size='width' />
     </div>
 );
 

src/views/components/common/CourseStatus/CourseStatus.tsx

@@ -1,4 +1,4 @@
-import type { StatusType } from '@shared/types/Course';
+import type { Status } from '@shared/types/Course';
 import { StatusIcon } from '@shared/util/icons';
 import clsx from 'clsx';
 import React from 'react';
@@ -11,7 +11,7 @@ type SizeType = 'small' | 'mini';
  * Props for CourseStatus
  */
 export interface CourseStatusProps {
-    status: StatusType;
+    status: Status;
     size: SizeType;
 }
 

src/views/components/common/List/List.tsx

@@ -1,7 +1,7 @@
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { ReactElement } from 'react';
 import React, { useCallback, useState } from 'react';
-// import { areEqual } from 'react-window';
+import { areEqual } from 'react-window';
 
 /*
  * Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
@@ -75,7 +75,7 @@ const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style
             {provided => <Item provided={provided} item={item} style={adjustedStyle} gap={gap} />}
         </Draggable>
     );
-}); // areEqual);
+}, areEqual);
 
 /**
  * `List` is a functional component that displays a course meeting.

src/views/components/injected/AutoLoad/AutoLoad.tsx

@@ -2,7 +2,6 @@ import type { ScrapedRow } from '@shared/types/Course';
 import useInfiniteScroll from '@views/hooks/useInfiniteScroll';
 import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
 import { SiteSupport } from '@views/lib/getSiteSupport';
-import type { AutoLoadStatusType } from '@views/lib/loadNextCourseCatalogPage';
 import {
     AutoLoadStatus,
     loadNextCourseCatalogPage,
@@ -23,7 +22,7 @@ type Props = {
  */
 export default function AutoLoad({ addRows }: Props) {
     const [container, setContainer] = useState<HTMLDivElement | null>(null);
-    const [status, setStatus] = useState<AutoLoadStatusType>(AutoLoadStatus.IDLE);
+    const [status, setStatus] = useState<AutoLoadStatus>(AutoLoadStatus.IDLE);
 
     useEffect(() => {
         const portalContainer = document.createElement('div');

src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx

@@ -131,7 +131,7 @@ const HeadingAndActions: React.FC<HeadingAndActionProps> = ({ course, onClose, a
             </div>
             <div className='my-3 flex flex-wrap items-center gap-[15px]'>
                 <Button variant='filled' color='ut-burntorange' icon={CalendarMonth} onClick={handleOpenCalendar} />
-                {/* <Divider type='solid' color='ut-offwhite' className='h-7' /> */}
+                <Divider type='solid' color='ut-offwhite' className='h-7' />
                 <Button variant='outline' color='ut-blue' icon={Reviews} onClick={handleOpenRateMyProf}>
                     RateMyProf
                 </Button>
@@ -150,7 +150,7 @@ const HeadingAndActions: React.FC<HeadingAndActionProps> = ({ course, onClose, a
                     {!courseAdded ? 'Add Course' : 'Remove Course'}
                 </Button>
             </div>
-            {/* <Divider /> */}
+            <Divider />
         </div>
     );
 };

src/views/lib/CourseCatalogScraper.ts

@@ -1,4 +1,4 @@
-import type { InstructionMode, ScrapedRow, Semester, StatusType } from '@shared/types/Course';
+import type { InstructionMode, ScrapedRow, Semester } from '@shared/types/Course';
 import { Course, Status } from '@shared/types/Course';
 import { CourseSchedule } from '@shared/types/CourseSchedule';
 import Instructor from '@shared/types/Instructor';
@@ -278,7 +278,7 @@ export class CourseCatalogScraper {
      * @param row the row of the course catalog table
      * @returns
      */
-    getStatus(row: HTMLTableRowElement): [status: StatusType, isReserved: boolean] {
+    getStatus(row: HTMLTableRowElement): [status: Status, isReserved: boolean] {
         const div = row.querySelector(TableDataSelector.STATUS);
         if (!div) {
             throw new Error('Status not found');

src/views/lib/openNewTabFromContentScript.ts

@@ -18,7 +18,7 @@ const messenger = createMessenger<MyMessages>('background');
 export async function openTabFromContentScript(url: string) {
     //  @ts-ignore
     messenger
-        .openNewTab(/* { url } */)
+        .openNewTab({ url })
         .then(() => {
             console.log('New tab opened with URL:', url);
         })