fix: divider usage in HeaderAndActions (#113)

* fix: use StatusType

* fix: use AutoLoadStatus

* fix: use typof SiteSupport.*

* fix: one more of Status to StatusType

* fix: use import type

* fix: use path alias imports

* fix: use Extract

* fix: remove unnecessary import

* fix: **revert this later** - comment out build errs

* fix: add schedule to story

* feat: add props for dividers

* revert: un-comment build errors

This reverts commit 082e9e0.

* Revert "fix: remove unnecessary import"

This reverts commit 9230346.

* Revert "fix: use Extract"

This reverts commit f6aa80d.

* Revert "fix: use path alias imports"

This reverts commit ea9bf3c.

* Revert "fix: use import type"

This reverts commit 27fee47.

* Revert "Merge branch 'fix/Status-to-StatusType' into fix/divider-usage"

This reverts commit b1715ea, reversing
changes made to 9ccc43c.

* fix: dont use magic number

* fix: lint errs

* fix: reorder imports

src/stories/injected/CourseCatalogInjectedPopup.stories.ts

@@ -2,6 +2,7 @@ import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
 import { CourseSchedule } from '@shared/types/CourseSchedule';
 import Instructor from '@shared/types/Instructor';
+import { UserSchedule } from '@shared/types/UserSchedule';
 import type { Meta, StoryObj } from '@storybook/react';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
 
@@ -50,6 +51,12 @@ const exampleCourse: Course = new Course({
     },
 });
 
+const exampleSchedule: UserSchedule = new UserSchedule({
+    courses: [exampleCourse],
+    name: 'Example Schedule',
+    hours: 0,
+});
+
 const meta: Meta<typeof CourseCatalogInjectedPopup> = {
     title: 'Components/Injected/CourseCatalogInjectedPopup',
     component: CourseCatalogInjectedPopup,
@@ -64,5 +71,6 @@ type Story = StoryObj<typeof CourseCatalogInjectedPopup>;
 export const Default: Story = {
     args: {
         course: exampleCourse,
+        activeSchedule: exampleSchedule,
     },
 };

src/views/components/CourseCatalogMain.tsx

@@ -1,6 +1,5 @@
 import type { Course, ScrapedRow } from '@shared/types/Course';
-import React, { useEffect, useState } from 'react';
-
+import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import AutoLoad from '@views/components/injected/AutoLoad/AutoLoad';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
 import RecruitmentBanner from '@views/components/injected/RecruitmentBanner/RecruitmentBanner';
@@ -13,7 +12,7 @@ import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
 import getCourseTableRows from '@views/lib/getCourseTableRows';
 import type { SiteSupportType } from '@views/lib/getSiteSupport';
 import { populateSearchInputs } from '@views/lib/populateSearchInputs';
-import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
+import React, { useEffect, useState } from 'react';
 
 interface Props {
     support: Extract<SiteSupportType, 'COURSE_CATALOG_DETAILS' | 'COURSE_CATALOG_LIST'>;

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

@@ -1,4 +1,5 @@
-import { Status, StatusType } from '@shared/types/Course';
+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';
 import React from 'react';

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 orientation='vertical' size='28px' />
                 <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 orientation='horizontal' size='100%' />
         </div>
     );
 };