From 84e8320e8fce5961877a5745e89419a722055ed5 Mon Sep 17 00:00:00 2001
From: Dhruv <dhruvarora@utexas.edu>
Date: Wed, 28 Feb 2024 10:08:05 -0600
Subject: [PATCH] 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 082e9e02692d57e06c91fef02ab1fceb4f1fd7b6.

* Revert "fix: remove unnecessary import"

This reverts commit 9230346d26c4d0b0e8883609eb84f5a5f7f55598.

* Revert "fix: use Extract"

This reverts commit f6aa80d411d66d75e09dc43849f2d9ec013a3d8a.

* Revert "fix: use path alias imports"

This reverts commit ea9bf3c6353725080fed27ae6f83ee3e22864779.

* Revert "fix: use import type"

This reverts commit 27fee47778d1cd3cb2b7da9bbdacebc18a6259cf.

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

This reverts commit b1715ea36032a16ed566b6fa902878b67088c8ae, reversing
changes made to 9ccc43ca274b98e9aae847de1e298d7e25cbfcb2.

* fix: dont use magic number

* fix: lint errs

* fix: reorder imports
---
 .../injected/CourseCatalogInjectedPopup.stories.ts        | 8 ++++++++
 src/views/components/CourseCatalogMain.tsx                | 5 ++---
 .../calendar/CalendarCourseCell/CalendarCourseCell.tsx    | 3 ++-
 .../CourseCatalogInjectedPopup/HeadingAndActions.tsx      | 4 ++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/stories/injected/CourseCatalogInjectedPopup.stories.ts b/src/stories/injected/CourseCatalogInjectedPopup.stories.ts
index 9307ecaa..77d72251 100644
--- a/src/stories/injected/CourseCatalogInjectedPopup.stories.ts
+++ b/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,
     },
 };
diff --git a/src/views/components/CourseCatalogMain.tsx b/src/views/components/CourseCatalogMain.tsx
index 6550188a..2a2558d2 100644
--- a/src/views/components/CourseCatalogMain.tsx
+++ b/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'>;
diff --git a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
index c1873eda..9542a805 100644
--- a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/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';
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
index afb55b8a..edd6d2c6 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
+++ b/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>
     );
 };