Halfway Tailwind conversion

README.md

@@ -14,5 +14,17 @@
 
 1. Clone this repo
 2. Run `pnpm install` to install and patch all the required dependencies
-3. Run `pnpm run dev` to start the development server
+
-4. Run `pnpm build` to build the extension for production
+-   If you want to run the development build:
+
+    -   Run `pnpm run dev`
+
+-   If you want to build the extension for production:
+
+    -   Run `pnpm build`
+
+You may have to rename the `__uno.css.js` to `uno.css.js` in dist
+
+Go to chrome://extensions, ensure you have "Developer Mode" enabled, and click 'Load unpacked'
+
+Navigate to the 'dist' folder and click 'select' to import the extension

src/stories/components/CalendarCourseCell.stories.tsx

@@ -13,10 +13,11 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
-        courseDeptAndInstr: { control: { type: 'text' } },
+        department: { control: { type: 'text' } },
-        className: { control: { type: 'text' } },
+        courseNumber: { control: { type: 'text' } },
+        instructorLastName: { control: { type: 'text' } },
         status: { control: { type: 'select', options: Object.values(Status) } },
-        timeAndLocation: { control: { type: 'text' } },
+        meetingTime: { control: { type: 'text' } },
         colors: { control: { type: 'object' } },
     },
     render: (args: any) => (
@@ -25,10 +26,11 @@ const meta = {
         </div>
     ),
     args: {
-        courseDeptAndInstr: exampleCourse.department,
+        department: exampleCourse.department,
-        className: exampleCourse.number,
+        courseNumber: exampleCourse.number,
+        instructorLastName: exampleCourse.instructors[0].lastName,
         status: exampleCourse.status,
-        timeAndLocation: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
+        meetingTime: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
 
         colors: getCourseColors('emerald', 500),
     },
@@ -44,69 +46,22 @@ export const Variants: Story = {
         <div className='grid grid-cols-2 h-40 max-w-60 w-90vw gap-x-4 gap-y-2'>
             <CalendarCourseCell
                 {...props}
-                // course={new Course({ ...exampleCourse, status: Status.OPEN })}
+                course={new Course({ ...exampleCourse, status: Status.OPEN })}
-                // Course = new Course({
-                //     courseName: 'PRINCIPLES OF COMPUTER SYSTEMS',
-                //     creditHours: 3,
-                //     department: 'C S',
-                //     description: [
-                //         'Restricted to computer science majors.',
-                //         'An introduction to computer systems software abstractions with an emphasis on the connection of these abstractions to underlying computer hardware. Key abstractions include threads, virtual memory, protection, and I/O. Requires writing of synchronized multithreaded programs and pieces of an operating system.',
-                //         'Computer Science 439 and 439H may not both be counted.',
-                //         'Prerequisite: Computer Science 429, or 429H with a grade of at least C-.',
-                //         'May be counted toward the Independent Inquiry flag requirement.',
-                //     ],
-                //     flags: ['Independent Inquiry'],
-                //     fullName: 'C S 439 PRINCIPLES OF COMPUTER SYSTEMS',
-                //     instructionMode: 'In Person',
-                //     instructors: [
-                //         new Instructor({
-                //             firstName: 'Allison',
-                //             lastName: 'Norman',
-                //             fullName: 'Allison Norman',
-                //         }),
-                //     ],
-                //     isReserved: false,
-                //     number: '439',
-                //     schedule: {
-                //         meetings: [
-                //             new CourseMeeting({
-                //                 days: ['Tuesday', 'Thursday'],
-                //                 startTime: 930,
-                //                 endTime: 1050,
-                //             }),
-                //             new CourseMeeting({
-                //                 days: ['Friday'],
-                //                 startTime: 600,
-                //                 endTime: 720,
-                //             }),
-                //         ],
-                //     },
-                //     semester: {
-                //         code: '12345',
-                //         season: 'Spring',
-                //         year: 2024,
-                //     },
-                //     status: Status.WAITLISTED,
-                //     uniqueId: 67890,
-                //     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
-                // });
-                
                 colors={getCourseColors('green', 500)}
             />
             <CalendarCourseCell
                 {...props}
-                // course={new Course({ ...exampleCourse, status: Status.CLOSED })}
+                course={new Course({ ...exampleCourse, status: Status.CLOSED })}
                 colors={getCourseColors('teal', 400)}
             />
             <CalendarCourseCell
                 {...props}
-                // course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
+                course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
                 colors={getCourseColors('indigo', 400)}
             />
             <CalendarCourseCell
                 {...props}
-                // course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
+                course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
                 colors={getCourseColors('red', 500)}
             />
         </div>

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -15,9 +15,11 @@ for (let i = 0; i < 13; i++) {
     const row = [];
     let hour = hoursOfDay[i];
     row.push(
-        <div key={hour} className={styles.timeBlock}>
+        <div key={hour} className='flex flex-col items-end'>
-            <div className={styles.timeLabelContainer}>
+            <div className='flex flex-1 flex-col items-end gap-17'>
-                <p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
+                <p className='font-roboto-flex mb-0 mr-10 mt-[-10px] h-6.6 self-stretch text-left text-gray-900 font-normal'>
+                    {(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}
+                </p>
             </div>
         </div>
     );
@@ -50,20 +52,9 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
     };
 
     return (
-        <div className={styles.calendar}>
+        <div className='relative flex flex-col gap-10'>
-            <div className={styles.dayLabelContainer} />
+            <div className='h-13 min-h-13 min-w-40 flex flex-1 flex-row items-center justify-center gap-10 pb-15' />
-            {/* Displaying the rest of the calendar */}
+            <div ref={calendarRef} className='flex'>
-            <div ref={calendarRef} className={styles.timeAndGrid}>
-                {/* <div className={styles.timeColumn}>
-            <div className={styles.timeBlock}></div>
-            {hoursOfDay.map((hour) => (
-                <div key={hour} className={styles.timeBlock}>
-                <div className={styles.timeLabelContainer}>
-                    <p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
-                </div>
-                </div>
-            ))}
-            </div> */}
                 <div className={styles.calendarGrid}>
                     {/* Displaying day labels */}
                     <div className={styles.timeBlock} />

src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx

@@ -87,9 +87,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
                 className={styles.button}
                 title='Search for this professor on RateMyProfessor'
             >
-                <Text /*    size='medium' weight='regular' */color='white'>
+                <Text /*    size='medium' weight='regular' */ color='white'>RateMyProf</Text>
-                    RateMyProf
-                </Text>
                 <Icon className={styles.icon} color='white' name='school' size='medium' />
             </Button>
             <Button
@@ -98,9 +96,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
                 className={styles.button}
                 title='Search for syllabi for this course'
             >
-                <Text /*    size='medium' weight='regular'  */ color='white'>
+                <Text /*    size='medium' weight='regular'  */ color='white'>Syllabi</Text>
-                    Syllabi
-                </Text>
                 <Icon className={styles.icon} color='white' name='grading' size='medium' />
             </Button>
             <Button
@@ -109,9 +105,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
                 className={styles.button}
                 title='Search for textbooks for this course'
             >
-                <Text /*   size='medium' weight='regular' color='white'    */>
+                <Text /*   size='medium' weight='regular' color='white'    */>Textbook</Text>
-                    Textbook
-                </Text>
                 <Icon className={styles.icon} color='white' name='collections_bookmark' size='medium' />
             </Button>
             <Button
@@ -121,10 +115,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
                 variant={isCourseSaved ? 'danger' : 'success'}
                 className={styles.button}
             >
-
+                <Text /*   size='medium' weight='regular' color='white'    */>{isCourseSaved ? 'Remove' : 'Add'}</Text>
-                <Text /*   size='medium' weight='regular' color='white'    */ >
-                    {isCourseSaved ? 'Remove' : 'Add'}
-                </Text>
                 <Icon className={styles.icon} color='white' name={isCourseSaved ? 'remove' : 'add'} size='medium' />
             </Button>
         </Card>