chore: merge and fix conflicts

src/stories/components/CalendarCourseCell.stories.tsx

@@ -0,0 +1,67 @@
+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 type { Meta, StoryObj } from '@storybook/react';
+import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell';
+import React from 'react';
+
+const meta = {
+    title: 'Components/Common/CalendarCourseCell',
+    component: CalendarCourseCell,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        course: { control: 'object' },
+        meetingIdx: { control: 'number' },
+        color: { control: 'color' },
+    },
+    render: (args: any) => (
+        <div className='w-45'>
+            <CalendarCourseCell {...args} />
+        </div>
+    ),
+} satisfies Meta<typeof CalendarCourseCell>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        course: new Course({
+            uniqueId: 123,
+            number: '311C',
+            fullName: "311C - Bevo's Default Course",
+            courseName: "Bevo's Default Course",
+            department: 'BVO',
+            creditHours: 3,
+            status: Status.WAITLISTED,
+            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+            isReserved: false,
+            url: '',
+            flags: [],
+            schedule: new CourseSchedule({
+                meetings: [
+                    new CourseMeeting({
+                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                        startTime: 480,
+                        endTime: 570,
+                        location: {
+                            building: 'UTC',
+                            room: '123',
+                        },
+                    }),
+                ],
+            }),
+            instructionMode: 'In Person',
+            semester: {
+                year: 2024,
+                season: 'Spring',
+            },
+        }),
+        meetingIdx: 0,
+        color: 'red',
+    },
+};

src/stories/components/CalendarGrid.stories.tsx

@@ -0,0 +1,18 @@
+// Calendar.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
+
+const meta = {
+  title: 'Components/Common/Calendar',
+  component: Calendar,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    tags: ['autodocs'],
+  }
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/views/components/common/Button/Button.module.scss

@@ -1,55 +0,0 @@
-@use 'sass:color';
-@use 'src/views/styles/colors.module.scss';
-
-.button {
-    padding: 0px 16px;
-    height: 40px;
-    margin: 10px;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-    font-family: 'Roboto';
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-        background-color: #fff;
-        color: #000;
-    }
-
-    &:active {
-        transform: scale(0.96);
-    }
-
-    &.disabled {
-        cursor: not-allowed !important;
-        opacity: 0.5 !important;
-
-        &:active {
-            transform: unset;
-        }
-    }
-
-    &.filled {
-        background-color: var(--color-primary);
-        color: var(--color-secondary);
-    }
-
-    &.outline {
-        background-color: var(--color-secondary);
-        color: var(--color-primary);
-        border: 1px solid var(--color-primary);
-    }
-
-    &.single {
-        background-color: var(--color-secondary);
-        color: var(--color-primary);
-    }
-}

src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx

@@ -0,0 +1,53 @@
+import type { Course } from '@shared/types/Course';
+import { Status } from '@shared/types/Course';
+import type { CourseMeeting } from '@shared/types/CourseMeeting';
+import React from 'react';
+
+import ClosedIcon from '~icons/material-symbols/lock';
+import WaitlistIcon from '~icons/material-symbols/timelapse';
+import CancelledIcon from '~icons/material-symbols/warning';
+
+import Text from '../Text/Text';
+
+export interface CalendarCourseBlockProps {
+    /** The Course that the meeting is for. */
+    course: Course;
+    /* index into course meeting array to display */
+    meetingIdx?: number;
+    /** The background color for the course. */
+    color: string;
+}
+
+const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meetingIdx }: CalendarCourseBlockProps) => {
+    let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
+    let rightIcon: React.ReactNode | null = null;
+    if (course.status === Status.WAITLISTED) {
+        rightIcon = <WaitlistIcon className='h-5 w-5' />;
+    } else if (course.status === Status.CLOSED) {
+        rightIcon = <ClosedIcon className='h-5 w-5' />;
+    } else if (course.status === Status.CANCELLED) {
+        rightIcon = <CancelledIcon className='h-5 w-5' />;
+    }
+
+    return (
+        <div className='w-full flex justify-center rounded bg-slate-300 p-2 text-ut-black'>
+            <div className='flex flex-1 flex-col gap-1'>
+                <Text variant='h1-course' className='leading-[75%]!'>
+                    {course.department} {course.number} - {course.instructors[0].lastName}
+                </Text>
+                <Text variant='h3-course' className='leading-[75%]!'>
+                    {`${meeting.getTimeString({ separator: '–', capitalize: true })}${
+                        meeting.location ? ` – ${meeting.location.building}` : ''
+                    }`}
+                </Text>
+            </div>
+            {rightIcon && (
+                <div className='h-fit flex items-center justify-center justify-self-start rounded bg-slate-700 p-0.5 text-white'>
+                    {rightIcon}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CalendarCourseBlock;

src/views/components/common/CalendarGrid/CalendarGrid.module.scss

@@ -0,0 +1,94 @@
+@use 'sass:color';
+@use 'src/views/styles/colors.module.scss';
+
+.dayLabelContainer {
+    display: flex;
+    flex-direction: row;
+    height: 13px;
+    min-width: 40px;
+    min-height: 13px;
+    padding-bottom: 15px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    flex: 1 0 0;
+}
+
+.calendarGrid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(13, 1fr);
+}
+
+.calendarRow {
+    display: flex;
+}
+
+.calendar {
+    // display: grid;
+    // grid-template-columns: auto repeat(5, 1fr);
+    gap: 10px;
+}
+
+.day {
+    gap: 5px;
+    color: colors.$burnt_orange;
+    text-align: center;
+    font-size: 14.22px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+.timeAndGrid {
+    display: flex;
+}
+
+.timeColumn {
+    display: flex;
+    min-height: 573px;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex: 1 0 0;
+    border-radius: var(--border-radius-none, 0px);
+}
+
+.timeBlock {
+    display: flex;
+    width: 50px;
+    height: 40.279px;
+    min-width: 50px;
+    max-width: 50px;
+    min-height: 40px;
+    flex-direction: column;
+    align-items: flex-end;
+    
+    .timeLabelContainer {
+        display: flex;
+        max-height: 20px;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 17px;
+        flex: 1 0 0;
+        align-self: stretch;
+        border-radius: var(--border-radius-none, 0px);
+    }
+
+    p {
+        color: #1A2024;
+        text-align: left;
+        height: 6.6px;
+        align-self: stretch;
+        margin-top: 0;
+        margin-bottom: 0;
+
+        /* Type scale/small */
+        font-family: "Roboto Flex";
+        font-size: 14.22px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+    } 
+}
+

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

@@ -0,0 +1,47 @@
+import { DAY_MAP } from '@shared/types/CourseMeeting';
+import React from 'react';
+
+import CalendarCell from '../CalendarGridCell/CalendarGridCell';
+import styles from './CalendarGrid.module.scss';
+
+const daysOfWeek = Object.values(DAY_MAP).filter(d => d !== 'Saturday' && d !== 'Sunday');
+const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
+const grid = Array.from({ length: 5 }, () =>
+    Array.from({ length: 13 }, (_, columnIndex) => <CalendarCell key={columnIndex} />)
+);
+
+/**
+ * Grid of CalendarGridCell components forming the user's course schedule calendar view
+ * @param props
+ */
+const Calendar: React.FC = props => (
+    <div className={styles.calendar}>
+        <div className={styles.dayLabelContainer}>
+            {/* Empty cell in the top-left corner */}
+            <div className={styles.day} />
+            {/* Displaying day labels */}
+            {daysOfWeek.map(day => (
+                <div key={day} className={styles.day}>
+                    {day}
+                </div>
+            ))}
+        </div>
+        {/* Displaying the rest of the calendar */}
+        <div className={styles.timeAndGrid}>
+            <div className={styles.timeColumn}>
+                {hoursOfDay.map(hour => (
+                    <div key={hour} className={styles.timeBlock}>
+                        <div className={styles.timeLabelContainer}>
+                            <p>
+                                {hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <div className={styles.calendarGrid}>{grid.map((row, rowIndex) => row)}</div>
+        </div>
+    </div>
+);
+
+export default Calendar;

src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss

@@ -0,0 +1,18 @@
+.calendarCell {
+    display: flex;
+    width: 165px;
+    height: 52.231px;
+    min-width: 45px;
+    min-height: 40px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    border: 1px solid #dadce0;
+}
+
+.hourLine {
+    width: 165px;
+    height: 1px;
+    border-radius: var(--border-radius-none, 0px);
+    background: rgba(218, 220, 224, 0.25);
+}

src/views/components/common/CalendarGridCell/CalendarGridCell.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import styles from './CalendarGridCell.module.scss';
+
+/**
+ * Component representing each 1 hour time block of a calendar
+ * @param props
+ */
+const CalendarCell: React.FC = props => (
+    <div className={styles.calendarCell}>
+        <div className={styles.hourLine} />
+    </div>
+);
+
+export default CalendarCell;

src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx

@@ -0,0 +1,91 @@
+import { Course } from '@shared/types/Course';
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+import Spinner from '@views/components/common/Spinner/Spinner';
+import Text from '@views/components/common/Text/Text';
+import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
+import { SiteSupport } from '@views/lib/getSiteSupport';
+import Card from '../../../common/Card/Card';
+import styles from './CourseDescription.module.scss';
+
+type Props = {
+    course: Course;
+};
+
+enum LoadStatus {
+    LOADING = 'LOADING',
+    DONE = 'DONE',
+    ERROR = 'ERROR',
+}
+
+/**
+ *
+ */
+export default function CourseDescription({ course }: Props) {
+    const [description, setDescription] = useState<string[]>([]);
+    const [status, setStatus] = useState<LoadStatus>(LoadStatus.LOADING);
+
+    useEffect(() => {
+        fetchDescription(course)
+            .then(description => {
+                setStatus(LoadStatus.DONE);
+                setDescription(description);
+            })
+            .catch(() => {
+                setStatus(LoadStatus.ERROR);
+            });
+    }, [course]);
+
+    return (
+        <Card className={styles.container}>
+            {status === LoadStatus.ERROR && (
+                <Text color='speedway_brick' size='medium' weight='bold' align='center'>
+                    Please refresh the page and log back in using your UT EID and password
+                </Text>
+            )}
+            {status === LoadStatus.LOADING && <Spinner className={styles.spinner} />}
+            {status === LoadStatus.DONE && (
+                <ul className={styles.description}>
+                    {description.map(paragraph => (
+                        <li key={paragraph}>
+                            <DescriptionLine line={paragraph} />
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </Card>
+    );
+}
+
+interface LineProps {
+    line: string;
+}
+
+function DescriptionLine({ line }: LineProps) {
+    const lowerCaseLine = line.toLowerCase();
+
+    const className = clsx({
+        [styles.prerequisite]: lowerCaseLine.includes('prerequisite'),
+        [styles.onlyOne]:
+            lowerCaseLine.includes('may be') || lowerCaseLine.includes('only one') || lowerCaseLine.includes('may not'),
+        [styles.restriction]: lowerCaseLine.includes('restrict'),
+    });
+
+    return (
+        <Text className={className} size='medium'>
+            {line}
+        </Text>
+    );
+}
+
+async function fetchDescription(course: Course): Promise<string[]> {
+    if (!course.description?.length) {
+        const response = await fetch(course.url);
+        const text = await response.text();
+        const doc = new DOMParser().parseFromString(text, 'text/html');
+
+        const scraper = new CourseCatalogScraper(SiteSupport.COURSE_CATALOG_DETAILS);
+        course.description = scraper.getDescription(doc);
+    }
+    return course.description;
+}

src/views/styles/fonts.module.scss

@@ -8,16 +8,6 @@
     }
 }
 
-@each $weight in '100' '300' '400' '500' '700' '900' {
-    @font-face {
-        font-family: 'Roboto';
-        src: url('@public/fonts/roboto-#{$weight}.woff2') format('woff2');
-        font-display: auto;
-        font-style: normal;
-        font-weight: #{$weight};
-    }
-}
-
 @font-face {
     font-family: 'Roboto Flex';
     src: url('@public/fonts/roboto-flex.woff2') format('woff2');