fix: build errors and restructure Calendar page

src/views/components/calendar/CalendarBottomBar/CalendarBottomBar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import Text from '../../common/Text/Text';
+import CalendarCourseBlock, { CalendarCourseCellProps } from '../CalendarCourseCell/CalendarCourseCell';
+import { Button } from '../../common/Button/Button';
+import ImageIcon from '~icons/material-symbols/image';
+import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
+
+type CalendarBottomBarProps = {
+    courses: CalendarCourseCellProps[];
+};
+
+/**
+ *
+ */
+export const CalendarBottomBar = ({ courses }: CalendarBottomBarProps): JSX.Element => {
+    if (courses.length === -1) console.log('foo'); // dumb line to make eslint happy
+    return (
+        <div className='w-full flex py-1.25'>
+            <div className='flex flex-grow items-center gap-3.75 pl-7.5 pr-2.5'>
+                <Text variant='h4'>Async. and Other:</Text>
+                <div className='h-14 inline-flex gap-2.5'>
+                    {courses.map(course => (
+                        <CalendarCourseBlock
+                            courseDeptAndInstr={course.courseDeptAndInstr}
+                            status={course.status}
+                            colors={course.colors}
+                            key={course.courseDeptAndInstr}
+                            className={clsx(course.className, 'w-35!')}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className='flex items-center pl-2.5 pr-7.5'>
+                <Button variant='single' color='ut-black' icon={CalendarMonthIcon}>
+                    Save as .CAL
+                </Button>
+                <Button variant='single' color='ut-black' icon={ImageIcon}>
+                    Save as .PNG
+                </Button>
+            </div>
+        </div>
+    );
+};

src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting.module.scss

@@ -0,0 +1,34 @@
+.component {
+    display: flex;
+    padding: 7px 7px 9px 7px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: 4px;
+    background: #cbd5e1;
+    .content {
+        display: flex;
+        gap: 7px;
+        .course-detail {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            width: 154px;
+            .course {
+                font-size: 16px;
+                line-height: 16px;
+                font-weight: 600;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .time-and-location {
+                font-size: 11px;
+                line-height: 11px;
+                font-weight: 400;
+            }
+        }
+    }
+}

src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Course } from 'src/shared/types/Course';
+import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import styles from './CalendarCourseMeeting.module.scss';
+
+/**
+ * Props for the CalendarCourseMeeting component.
+ */
+export interface CalendarCourseMeetingProps {
+    /** 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;
+    /** The icon to display on the right side of the course. This is optional. */
+    rightIcon?: React.ReactNode;
+}
+
+/**
+ * `CalendarCourseMeeting` is a functional component that displays a course meeting.
+ *
+ * @example
+ * <CalendarCourseMeeting course={course} meeting={meeting} color="red" rightIcon={<Icon />} />
+ */
+const CalendarCourseMeeting: React.FC<CalendarCourseMeetingProps> = ({
+    course,
+    meetingIdx,
+}: CalendarCourseMeetingProps) => {
+    let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
+    return (
+        <div className={styles.component}>
+            <div className={styles.content}>
+                <div className={styles['course-detail']}>
+                    <div className={styles.course}>
+                        {course.department} {course.number} - {course.instructors[0].lastName}
+                    </div>
+                    <div className={styles['time-and-location']}>
+                        {`${meeting.getTimeString({ separator: '-', capitalize: true })}${
+                            meeting.location ? ` - ${meeting.location.building}` : ''
+                        }`}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CalendarCourseMeeting;

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

@@ -0,0 +1,85 @@
+import { Status } from '@shared/types/Course';
+import clsx from 'clsx';
+import React from 'react';
+import { CourseColors, pickFontColor } from 'src/shared/util/colors';
+import ClosedIcon from '~icons/material-symbols/lock';
+import WaitlistIcon from '~icons/material-symbols/timelapse';
+import CancelledIcon from '~icons/material-symbols/warning';
+import Text from '../../common/Text/Text';
+
+export interface CalendarCourseCellProps {
+    courseDeptAndInstr: string;
+    timeAndLocation?: string;
+    status: Status;
+    colors: CourseColors;
+    className?: string;
+}
+
+const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
+    courseDeptAndInstr,
+    timeAndLocation,
+    status,
+    colors,
+    className,
+}: CalendarCourseCellProps) => {
+    let rightIcon: React.ReactNode | null = null;
+    if (status === Status.WAITLISTED) {
+        rightIcon = <WaitlistIcon className='h-5 w-5' />;
+    } else if (status === Status.CLOSED) {
+        rightIcon = <ClosedIcon className='h-5 w-5' />;
+    } else if (status === Status.CANCELLED) {
+        rightIcon = <CancelledIcon className='h-5 w-5' />;
+    }
+
+    // whiteText based on secondaryColor
+    const fontColor = pickFontColor(colors.primaryColor);
+
+    return (
+        <div
+            className={clsx('w-full flex justify-center rounded p-2', fontColor, className)}
+            style={{
+                backgroundColor: colors.primaryColor,
+            }}
+        >
+<<<<<<< HEAD
+            <div className='flex flex-1 flex-col gap-1'>
+                <Text variant='h1-course' className='leading-[75%]!'>
+                    {courseDeptAndInstr}
+                </Text>
+                {timeAndLocation && (
+                    <Text variant='h3-course' className='leading-[75%]!'>
+                        {timeAndLocation}
+=======
+            <div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
+                <Text
+                    variant='h1-course'
+                    className={clsx('-my-0.8 leading-tight', {
+                        truncate: timeAndLocation,
+                    })}
+                >
+                    {courseDeptAndInstr}
+                </Text>
+                {meeting && (
+                    <Text variant='h3-course' className='-mb-0.5'>
+                        {`${meeting.getTimeString({ separator: '–', capitalize: true })}${
+                            meeting.location ? ` – ${meeting.location.building}` : ''
+                        }`}
+>>>>>>> 73fe14e (fix calendar course cell spacing)
+                    </Text>
+                )}
+            </div>
+            {rightIcon && (
+                <div
+                    className='h-fit flex items-center justify-center justify-self-start rounded p-0.5 text-white'
+                    style={{
+                        backgroundColor: colors.secondaryColor,
+                    }}
+                >
+                    {rightIcon}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CalendarCourseBlock;

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

@@ -0,0 +1,127 @@
+.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(6, 1fr);
+    grid-template-rows: repeat(13, 1fr);
+}
+
+.calendarRow {
+    display: flex;
+}
+
+.calendar {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    position: relative; // Ensuring that child elements can be positioned in relation to this.
+}
+
+.day {
+    gap: 5px;
+    color: #bf5700;
+    text-align: center;
+    font-size: 14.22px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    margin-top: 20px;
+    border-right: 1px solid #dadce0;
+    border-bottom: 1px solid #dadce0;
+    border-left: 1px solid #dadce0;
+}
+
+.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: auto;
+    height: auto;
+    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;
+        border-radius: var(--border-radius-none, 0px);
+    }
+
+    p {
+        color: #1a2024;
+        text-align: left;
+        height: 6.6px;
+        align-self: stretch;
+        margin-top: -10px;
+        margin-right: 10px;
+        margin-bottom: 0;
+
+        /* Type scale/small */
+        font-family: 'Roboto Flex';
+        font-size: 14.22px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+    }
+}
+
+.buttonContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 10px;
+    margin-top: auto;
+}
+
+.calendarButton {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 6px;
+    border: none;
+    background-color: transparent;
+    color: #333;
+    cursor: pointer;
+    
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+}
+
+.buttonIcon {
+    height: 24px;
+    fill: currentColor;
+}
+
+.divider {
+    height: 30px;
+    width: 1px;
+    background-color: grey;
+}

src/views/components/calendar/CalendarGrid/CalendarGrid.tsx

@@ -0,0 +1,132 @@
+import React, { useRef } from 'react';
+import * as htmlToImage from 'html-to-image';
+import { DAY_MAP } from 'src/shared/types/CourseMeeting';
+import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+import calIcon from 'src/assets/icons/cal.svg';
+import pngIcon from 'src/assets/icons/png.svg';
+import CalendarCell from '../CalendarGridCell/CalendarGridCell';
+import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
+import styles from './CalendarGrid.module.scss';
+
+const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
+const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
+const grid = [];
+for (let i = 0; i < 13; i++) {
+    const row = [];
+    let hour = hoursOfDay[i];
+    row.push(
+        <div key={hour} className={styles.timeBlock}>
+            <div className={styles.timeLabelContainer}>
+                <p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
+            </div>
+        </div>
+    );
+    row.push(Array.from({ length: 5 }, (_, j) => <CalendarCell key={j} />));
+    grid.push(row);
+}
+
+interface Props {
+    courseCells: CalendarGridCourse[];
+    saturdayClass: boolean;
+}
+
+/**
+ * Grid of CalendarGridCell components forming the user's course schedule calendar view
+ * @param props
+ */
+function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props>): JSX.Element {
+    const calendarRef = useRef(null); // Create a ref for the calendar grid
+
+    const saveAsPNG = () => {
+        htmlToImage
+            .toPng(calendarRef.current, {
+                backgroundColor: 'white',
+                style: {
+                    background: 'white',
+                    marginTop: '20px',
+                    marginBottom: '20px',
+                    marginRight: '20px',
+                    marginLeft: '20px',
+                },
+            })
+            .then(dataUrl => {
+                let img = new Image();
+                img.src = dataUrl;
+                fetch(dataUrl)
+                    .then(response => response.blob())
+                    .then(blob => {
+                        const href = window.URL.createObjectURL(blob);
+                        const link = document.createElement('a');
+                        link.href = href;
+                        link.download = 'my-schedule.png';
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                    })
+                    .catch(error => console.error('Error downloading file:', error));
+            })
+            .catch(error => {
+                console.error('oops, something went wrong!', error);
+            });
+    };
+
+    return (
+        <div className={styles.calendar}>
+            <div className={styles.dayLabelContainer} />
+            {/* Displaying the rest of the calendar */}
+            <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} />
+                    {daysOfWeek.map(day => (
+                        <div key={day} className={styles.day}>
+                            {day}
+                        </div>
+                    ))}
+                    {grid.map((row, index) => (
+                        <React.Fragment key={index}>{row}</React.Fragment>
+                    ))}
+                </div>
+            </div>
+            {courseCells.map((block: CalendarGridCourse) => (
+                <div
+                    key={`${block}`}
+                    style={{
+                        gridColumn: `${block.calendarGridPoint.dayIndex}`,
+                        gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
+                    }}
+                >
+                    <CalendarCourseCell
+                        courseDeptAndInstr={block.componentProps.courseDeptAndInstr}
+                        status={block.componentProps.status}
+                        colors={block.componentProps.colors}
+                    />
+                </div>
+            ))}
+            <div className={styles.buttonContainer}>
+                <div className={styles.divider} /> {/* First divider */}
+                <button className={styles.calendarButton}>
+                    <img src={calIcon} className={styles.buttonIcon} alt='CAL' />
+                    Save as .CAL
+                </button>
+                <div className={styles.divider} /> {/* Second divider */}
+                <button onClick={saveAsPNG} className={styles.calendarButton}>
+                    <img src={pngIcon} className={styles.buttonIcon} alt='PNG' />
+                    Save as .PNG
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default CalendarGrid;

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

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

src/views/components/calendar/CalendarGridCell/CalendarGridCell.tsx

@@ -0,0 +1,14 @@
+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/calendar/CalendarHeader/CalenderHeader.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Status } from '@shared/types/Course';
+import Divider from '../../common/Divider/Divider';
+import { Button } from '../../common/Button/Button';
+import Text from '../../common/Text/Text';
+import MenuIcon from '~icons/material-symbols/menu';
+import LogoIcon from '~icons/material-symbols/add-circle-outline';
+import UndoIcon from '~icons/material-symbols/undo';
+import RedoIcon from '~icons/material-symbols/redo';
+import SettingsIcon from '~icons/material-symbols/settings';
+import ScheduleTotalHoursAndCourses from '../../common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
+import CourseStatus from '../../common/CourseStatus/CourseStatus';
+
+const CalendarHeader = () => (
+    <div className='min-h-79px min-w-672px flex px-0 py-15'>
+        <div className='flex flex-row gap-20'>
+            <div className='flex gap-10'>
+                <div className='flex gap-1'>
+                    <Button variant='single' icon={MenuIcon} color='ut-gray' />
+                    <div className='flex items-center'>
+                        <LogoIcon style={{ marginRight: '5px' }} />
+                        <div className='flex flex-col gap-1 whitespace-nowrap'>
+                            <Text className='leading-trim text-cap font-roboto text-base text-ut-burntorange font-medium'>
+                                UT Registration
+                            </Text>
+                            <Text className='leading-trim text-cap font-roboto text-base text-ut-orange font-medium'>
+                                Plus
+                            </Text>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex flex-col'>
+                    <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
+                    DATA UPDATED ON: 12:00 AM 02/01/2024
+                </div>
+            </div>
+            <div className='flex flex-row items-center space-x-8'>
+                <div className='flex flex-row space-x-4'>
+                    <CourseStatus size='small' status={Status.WAITLISTED} />
+                    <CourseStatus size='small' status={Status.CLOSED} />
+                    <CourseStatus size='small' status={Status.CANCELLED} />
+                </div>
+                <div className='flex flex-row'>
+                    <Button variant='single' icon={UndoIcon} color='ut-black' />
+                    <Button variant='single' icon={RedoIcon} color='ut-black' />
+                    <Button variant='single' icon={SettingsIcon} color='ut-black' />
+                </div>
+            </div>
+        </div>
+        <Divider type='solid' />
+    </div>
+);
+
+export default CalendarHeader;

src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx

@@ -0,0 +1,36 @@
+import { UserSchedule } from '@shared/types/UserSchedule';
+import React, { useState } from 'react';
+import AddSchedule from '~icons/material-symbols/add';
+import List from '../../common/List/List';
+import ScheduleListItem from '../../common/ScheduleListItem/ScheduleListItem';
+import Text from '../../common/Text/Text';
+
+export type Props = {
+    style?: React.CSSProperties;
+    dummySchedules?: UserSchedule[];
+    dummyActiveIndex?: number;
+};
+
+export function CalendarSchedules(props: Props) {
+    const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
+    const [schedules, setSchedules] = useState(props.dummySchedules || []);
+
+    const scheduleComponents = schedules.map((schedule, index) => (
+        <ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
+    ));
+
+    return (
+        <div style={{ ...props.style }} className='items-center'>
+            <div className='m0 m-b-2 w-full flex justify-between'>
+                <Text variant='h3'>MY SCHEDULES</Text>
+                <div className='cursor-pointer items-center justify-center btn-transition -ml-1.5 hover:text-zinc-400'>
+                    <Text variant='h3'>
+                        <AddSchedule />
+                    </Text>
+                </div>
+            </div>
+
+            <List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={30} listWidth={240} />
+        </div>
+    );
+}

src/views/components/calendar/ImportantLinks.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import clsx from 'clsx';
+import Text from '../common/Text/Text';
+import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
+
+type Props = {
+    className?: string;
+};
+
+/**
+ * The "Important Links" section of the calendar website
+ * @returns
+ */
+export default function ImportantLinks({ className }: Props) {
+    return (
+        <article className={clsx(className, 'flex flex-col gap-2')}>
+            <Text variant='h3'>Important Links</Text>
+            <a
+                href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Spring Course Schedule</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20236/'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Summer Course Schedule</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/registrar/ris.WBX'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Registration Info Sheet</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/registration/chooseSemester.WBX'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Register For Courses</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/apps/degree/audits/'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Degree Audit</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+        </article>
+    );
+}