From 8edd062588f4e4d5f9b9cc17c5acef7d263aff73 Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Sat, 17 Feb 2024 13:02:24 -0600
Subject: [PATCH 1/8] update

---
 .../components/CalendarCourseCell.stories.tsx |  2 +-
 .../CalendarCourseCell/CalendarCourseCell.tsx |  6 +++---
 .../common/CalendarGrid/CalendarGrid.tsx      | 20 ++++++++++++-------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx
index 8203d74a..647a766d 100644
--- a/src/stories/components/CalendarCourseCell.stories.tsx
+++ b/src/stories/components/CalendarCourseCell.stories.tsx
@@ -45,7 +45,7 @@ export const Default: Story = {
             schedule: new CourseSchedule({
                 meetings: [
                     new CourseMeeting({
-                        days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI],
+                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
                         startTime: 480,
                         endTime: 570,
                         location: {
diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
index 27b2519e..cd0969a7 100644
--- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
@@ -6,7 +6,7 @@ import WaitlistIcon from '~icons/material-symbols/timelapse';
 import CancelledIcon from '~icons/material-symbols/warning';
 import Text from '../Text/Text';
 
-export interface CalendarCourseBlockProps {
+export interface CalendarCourseCellProps {
     /** The Course that the meeting is for. */
     course: Course;
     /* index into course meeting array to display */
@@ -15,7 +15,7 @@ export interface CalendarCourseBlockProps {
     color: string;
 }
 
-const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meetingIdx }: CalendarCourseBlockProps) => {
+const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meetingIdx }: CalendarCourseCellProps) => {
     let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
     let rightIcon: React.ReactNode | null = null;
     if (course.status === Status.WAITLISTED) {
@@ -47,4 +47,4 @@ const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meeti
     );
 };
 
-export default CalendarCourseBlock;
+export default CalendarCourseCell;
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 3d83ef9a..4dbd06c9 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
+import { Chip } from '../Chip/Chip';
+
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -22,14 +24,14 @@ for (let i = 0; i < 13; i++) {
 }
 
 interface Props {
-    CourseMeetingBlocks: CourseMeeting[];
+    courseCells: typeof CalendarCourseCell[];
 }
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren<Props>): JSX.Element {
+export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.Element {
 
     return (
         <div className={styles.calendar}>
@@ -54,12 +56,16 @@ export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren<Props>
                             {day}
                         </div>
                     ))}
-                    {grid.map((row, rowIndex) => row)}
+                    {grid.map((row) => row)}
                 </div>
             </div>
-            {courseMeetingBlocks.map((block: CourseMeeting, index: number) => (
-                <div key={index}>
-                    {block}
+            {courseCells.map((Block: typeof CalendarCourseCell) => (
+                <div key={`${Block}`} 
+                     style ={{
+                            gridColumn: `1`,
+                            gridRow: `1`
+                     }}>
+                    <Chip label='test'/>
                 </div>
             ))}
         </div>

From 3c7b35d5f3e7a0f27dda26f024b8b630c72e1541 Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Sat, 17 Feb 2024 13:06:46 -0600
Subject: [PATCH 2/8] Revert "update"

This reverts commit 8edd062588f4e4d5f9b9cc17c5acef7d263aff73.
---
 .../components/CalendarCourseCell.stories.tsx |  2 +-
 .../CalendarCourseCell/CalendarCourseCell.tsx |  6 +++---
 .../common/CalendarGrid/CalendarGrid.tsx      | 20 +++++++------------
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx
index 647a766d..8203d74a 100644
--- a/src/stories/components/CalendarCourseCell.stories.tsx
+++ b/src/stories/components/CalendarCourseCell.stories.tsx
@@ -45,7 +45,7 @@ export const Default: Story = {
             schedule: new CourseSchedule({
                 meetings: [
                     new CourseMeeting({
-                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                        days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI],
                         startTime: 480,
                         endTime: 570,
                         location: {
diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
index cd0969a7..27b2519e 100644
--- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
@@ -6,7 +6,7 @@ import WaitlistIcon from '~icons/material-symbols/timelapse';
 import CancelledIcon from '~icons/material-symbols/warning';
 import Text from '../Text/Text';
 
-export interface CalendarCourseCellProps {
+export interface CalendarCourseBlockProps {
     /** The Course that the meeting is for. */
     course: Course;
     /* index into course meeting array to display */
@@ -15,7 +15,7 @@ export interface CalendarCourseCellProps {
     color: string;
 }
 
-const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meetingIdx }: CalendarCourseCellProps) => {
+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) {
@@ -47,4 +47,4 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meeting
     );
 };
 
-export default CalendarCourseCell;
+export default CalendarCourseBlock;
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 4dbd06c9..3d83ef9a 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -2,9 +2,7 @@ import React from 'react';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
-import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
-import { Chip } from '../Chip/Chip';
-
+import { CourseMeeting } from 'src/shared/types/CourseMeeting';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -24,14 +22,14 @@ for (let i = 0; i < 13; i++) {
 }
 
 interface Props {
-    courseCells: typeof CalendarCourseCell[];
+    CourseMeetingBlocks: CourseMeeting[];
 }
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.Element {
+export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren<Props>): JSX.Element {
 
     return (
         <div className={styles.calendar}>
@@ -56,16 +54,12 @@ export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.E
                             {day}
                         </div>
                     ))}
-                    {grid.map((row) => row)}
+                    {grid.map((row, rowIndex) => row)}
                 </div>
             </div>
-            {courseCells.map((Block: typeof CalendarCourseCell) => (
-                <div key={`${Block}`} 
-                     style ={{
-                            gridColumn: `1`,
-                            gridRow: `1`
-                     }}>
-                    <Chip label='test'/>
+            {courseMeetingBlocks.map((block: CourseMeeting, index: number) => (
+                <div key={index}>
+                    {block}
                 </div>
             ))}
         </div>

From c0968ef7a02991f0137a599ddb18819b9522b751 Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Sat, 17 Feb 2024 13:07:43 -0600
Subject: [PATCH 3/8] Revert "Revert "update""

This reverts commit 3c7b35d5f3e7a0f27dda26f024b8b630c72e1541.
---
 .../components/CalendarCourseCell.stories.tsx |  2 +-
 .../CalendarCourseCell/CalendarCourseCell.tsx |  6 +++---
 .../common/CalendarGrid/CalendarGrid.tsx      | 20 ++++++++++++-------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx
index 8203d74a..647a766d 100644
--- a/src/stories/components/CalendarCourseCell.stories.tsx
+++ b/src/stories/components/CalendarCourseCell.stories.tsx
@@ -45,7 +45,7 @@ export const Default: Story = {
             schedule: new CourseSchedule({
                 meetings: [
                     new CourseMeeting({
-                        days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI],
+                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
                         startTime: 480,
                         endTime: 570,
                         location: {
diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
index 27b2519e..cd0969a7 100644
--- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
@@ -6,7 +6,7 @@ import WaitlistIcon from '~icons/material-symbols/timelapse';
 import CancelledIcon from '~icons/material-symbols/warning';
 import Text from '../Text/Text';
 
-export interface CalendarCourseBlockProps {
+export interface CalendarCourseCellProps {
     /** The Course that the meeting is for. */
     course: Course;
     /* index into course meeting array to display */
@@ -15,7 +15,7 @@ export interface CalendarCourseBlockProps {
     color: string;
 }
 
-const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meetingIdx }: CalendarCourseBlockProps) => {
+const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meetingIdx }: CalendarCourseCellProps) => {
     let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
     let rightIcon: React.ReactNode | null = null;
     if (course.status === Status.WAITLISTED) {
@@ -47,4 +47,4 @@ const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meeti
     );
 };
 
-export default CalendarCourseBlock;
+export default CalendarCourseCell;
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 3d83ef9a..4dbd06c9 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
+import { Chip } from '../Chip/Chip';
+
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -22,14 +24,14 @@ for (let i = 0; i < 13; i++) {
 }
 
 interface Props {
-    CourseMeetingBlocks: CourseMeeting[];
+    courseCells: typeof CalendarCourseCell[];
 }
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren<Props>): JSX.Element {
+export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.Element {
 
     return (
         <div className={styles.calendar}>
@@ -54,12 +56,16 @@ export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren<Props>
                             {day}
                         </div>
                     ))}
-                    {grid.map((row, rowIndex) => row)}
+                    {grid.map((row) => row)}
                 </div>
             </div>
-            {courseMeetingBlocks.map((block: CourseMeeting, index: number) => (
-                <div key={index}>
-                    {block}
+            {courseCells.map((Block: typeof CalendarCourseCell) => (
+                <div key={`${Block}`} 
+                     style ={{
+                            gridColumn: `1`,
+                            gridRow: `1`
+                     }}>
+                    <Chip label='test'/>
                 </div>
             ))}
         </div>

From 73fe14e17a36071657f45c05783039c12b1aa9fb Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Sat, 17 Feb 2024 13:27:07 -0600
Subject: [PATCH 4/8] fix calendar course cell spacing

---
 .../components/CalendarCourseCell.stories.tsx |  2 +-
 .../CalendarCourseCell/CalendarCourseCell.tsx | 19 +++++++++++++------
 .../PopupCourseBlock/PopupCourseBlock.tsx     | 18 ++++++++++--------
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx
index 19c1908e..1e9d3c84 100644
--- a/src/stories/components/CalendarCourseCell.stories.tsx
+++ b/src/stories/components/CalendarCourseCell.stories.tsx
@@ -36,7 +36,7 @@ export const Default: Story = {};
 
 export const Variants: Story = {
     render: props => (
-        <div className='grid grid-cols-2 h-40 max-w-xl w-90vw gap-x-4 gap-y-2'>
+        <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 })}
diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
index 1991126b..3d4868ac 100644
--- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
@@ -1,5 +1,6 @@
 import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting } from '@shared/types/CourseMeeting';
+import clsx from 'clsx';
 import React from 'react';
 import { CourseColors, pickFontColor } from 'src/shared/util/colors';
 import ClosedIcon from '~icons/material-symbols/lock';
@@ -40,16 +41,22 @@ const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({
                 backgroundColor: colors.primaryColor,
             }}
         >
-            <div className='flex flex-1 flex-col gap-1'>
-                <Text variant='h1-course' className='leading-[75%]!'>
+            <div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
+                <Text
+                    variant='h1-course'
+                    className={clsx('-my-0.8 leading-tight', {
+                        truncate: meeting,
+                    })}
+                >
                     {course.department} {course.number} - {course.instructors[0].lastName}
                 </Text>
-                <Text variant='h3-course' className='leading-[75%]!'>
-                    {meeting &&
-                        `${meeting.getTimeString({ separator: '–', capitalize: true })}${
+                {meeting && (
+                    <Text variant='h3-course' className='-mb-0.5'>
+                        {`${meeting.getTimeString({ separator: '–', capitalize: true })}${
                             meeting.location ? ` – ${meeting.location.building}` : ''
                         }`}
-                </Text>
+                    </Text>
+                )}
             </div>
             {rightIcon && (
                 <div
diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
index 2d703caa..0f70d025 100644
--- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
+++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
@@ -1,8 +1,8 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
 import { Course, Status } from '@shared/types/Course';
+import { CourseColors, pickFontColor } from '@shared/util/colors';
 import { StatusIcon } from '@shared/util/icons';
-import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors';
+import clsx from 'clsx';
+import React from 'react';
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 import Text from '../Text/Text';
 
@@ -21,7 +21,12 @@ export interface PopupCourseBlockProps {
  *
  * @param props PopupCourseBlockProps
  */
-export default function PopupCourseBlock({ className, course, colors, dragHandleProps }: PopupCourseBlockProps): JSX.Element {
+export default function PopupCourseBlock({
+    className,
+    course,
+    colors,
+    dragHandleProps,
+}: PopupCourseBlockProps): JSX.Element {
     // whiteText based on secondaryColor
     const fontColor = pickFontColor(colors.primaryColor);
 
@@ -41,10 +46,7 @@ export default function PopupCourseBlock({ className, course, colors, dragHandle
             >
                 <DragIndicatorIcon className='h-6 w-6 text-white' />
             </div>
-            <Text
-                className={clsx('flex-1 py-3.5 text-ellipsis whitespace-nowrap overflow-hidden', fontColor)}
-                variant='h1-course'
-            >
+            <Text className={clsx('flex-1 py-3.5 truncate', fontColor)} variant='h1-course'>
                 <span className='px-0.5 font-450'>{course.uniqueId}</span> {course.department} {course.number} &ndash;{' '}
                 {course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}
             </Text>

From 2cffb794dbb1919dd094a25c94f847c69e436d09 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Sat, 17 Feb 2024 13:32:06 -0600
Subject: [PATCH 5/8] update course block names

---
 .../common/CalendarCourseCell/CalendarCourseCell.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
index 3d4868ac..505e5823 100644
--- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
@@ -8,7 +8,7 @@ import WaitlistIcon from '~icons/material-symbols/timelapse';
 import CancelledIcon from '~icons/material-symbols/warning';
 import Text from '../Text/Text';
 
-export interface CalendarCourseCellProps {
+export interface CalendarCourseBlockProps {
     /** The Course that the meeting is for. */
     course: Course;
     /* index into course meeting array to display */
@@ -72,4 +72,4 @@ const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({
     );
 };
 
-export default CalendarCourseCell;
+export default CalendarCourseBlock;

From b8fe5109a946f1efd1e09291f92e85ebfbc448a8 Mon Sep 17 00:00:00 2001
From: Vinson Zheng <vinsonzheng499@gmail.com>
Date: Sat, 17 Feb 2024 14:22:24 -0600
Subject: [PATCH 6/8] Added CalendarHeader and its Storybook, need to resize

---
 .../components/CalendarGrid.stories.tsx       | 16 +++---
 .../components/CalendarHeader.stories.tsx     | 17 ++++++
 .../common/CalendarHeader/CalenderHeader.tsx  | 53 +++++++++++++++++++
 .../ScheduleTotalHoursAndCourses.tsx          | 26 ++++-----
 4 files changed, 87 insertions(+), 25 deletions(-)
 create mode 100644 src/stories/components/CalendarHeader.stories.tsx
 create mode 100644 src/views/components/common/CalendarHeader/CalenderHeader.tsx

diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx
index 6d8861b9..db63e5b6 100644
--- a/src/stories/components/CalendarGrid.stories.tsx
+++ b/src/stories/components/CalendarGrid.stories.tsx
@@ -4,16 +4,16 @@ import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
 import type { Meta, StoryObj } from '@storybook/react';
 
 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'],
-  }
+    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 = {};
\ No newline at end of file
+export const Default: Story = {};
diff --git a/src/stories/components/CalendarHeader.stories.tsx b/src/stories/components/CalendarHeader.stories.tsx
new file mode 100644
index 00000000..6833b7b1
--- /dev/null
+++ b/src/stories/components/CalendarHeader.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
+
+const meta = {
+    title: 'Components/CalendarHeader',
+    component: CalendarHeader,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof CalendarHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
new file mode 100644
index 00000000..b5d07274
--- /dev/null
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Status } from '@shared/types/Course';
+import Divider from '../Divider/Divider';
+import { Button } from '../Button/Button';
+import Text from '../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 '../ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
+import CourseStatus from '../CourseStatus/CourseStatus';
+
+const CalendarHeader = () => (
+    <div
+        style={{
+            display: 'flex',
+            minWidth: '672px',
+            minHeight: '79px',
+            padding: '15px 0px',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            alignContent: 'center',
+            rowGap: '10px',
+            alignSelf: 'stretch',
+            flexWrap: 'wrap',
+        }}
+    >
+        <Button variant='single' icon={MenuIcon} color='ut-gray' />
+
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+            <LogoIcon style={{ marginRight: '5px' }} />
+            <Text>Your Logo Text</Text>
+        </div>
+
+        <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
+
+        <CourseStatus size='small' status={Status.WAITLISTED} />
+        <CourseStatus size='small' status={Status.CLOSED} />
+        <CourseStatus size='small' status={Status.CANCELLED} />
+
+        <div style={{ display: 'flex' }}>
+            <Button variant='outline' icon={UndoIcon} color='ut-black' />
+            <Button variant='outline' icon={RedoIcon} color='ut-black' />
+        </div>
+
+        <Button variant='outline' icon={SettingsIcon} color='ut-black' />
+
+        <Divider type='solid' />
+    </div>
+);
+
+export default CalendarHeader;
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
index 72d7782a..fd91d1f7 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
@@ -15,27 +15,19 @@ export interface ScheduleTotalHoursAndCoursesProps {
  *
  * @param props ScheduleTotalHoursAndCoursesProps
  */
-export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours, totalCourses }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
+export default function ScheduleTotalHoursAndCourses({
+    scheduleName,
+    totalHours,
+    totalCourses,
+}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className="min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase">
-            <Text
-                className="text-[#BF5700]"
-                variant='h1'
-                as='span'
-            >
+        <div className='min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase'>
+            <Text className='text-[#BF5700]' variant='h1' as='span'>
                 {`${scheduleName}: `}
             </Text>
-            <Text
-                variant='h3'
-                as='div'
-                className="flex flex-row items-center gap-2 text-[#1A2024]"
-            >
+            <Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-[#1A2024]'>
                 {`${totalHours} HOURS`}
-                <Text
-                    variant='h4'
-                    as='span'
-                    className="text-[#333F48]"
-                >
+                <Text variant='h4' as='span' className='text-[#333F48]'>
                     {`${totalCourses} courses`}
                 </Text>
             </Text>

From 8b2d07033c1e84020e32abfd76df982386f4a2c4 Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Sat, 17 Feb 2024 14:27:32 -0600
Subject: [PATCH 7/8] update

---
 .../components/CalendarGrid.stories.tsx       | 32 +++++++++++--------
 .../common/CalendarGrid/CalendarGrid.tsx      | 31 +++++++++---------
 2 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx
index 6d8861b9..881ff93d 100644
--- a/src/stories/components/CalendarGrid.stories.tsx
+++ b/src/stories/components/CalendarGrid.stories.tsx
@@ -1,19 +1,25 @@
-// Calendar.stories.tsx
-import React from 'react';
-import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
-import type { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
+import CalendarGrid from 'src/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',
+    title: 'Components/Common/CalendarGrid',
+    component: CalendarGrid,
+    parameters: {
+        layout: 'centered',
+    },
     tags: ['autodocs'],
-  }
-} satisfies Meta<typeof Calendar>;
-
+    argTypes: {
+        saturday: { control: 'text' },
+        sunday: { control: 'text' },
+    },
+} satisfies Meta<typeof CalendarGrid>;
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
\ No newline at end of file
+export const Default: Story = {
+    args: {
+        saturday: true,
+        sunday: true,
+    },
+};
\ No newline at end of file
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 4dbd06c9..0bd85c10 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -5,7 +5,6 @@ import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
 import { Chip } from '../Chip/Chip';
 
-
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 const grid = [];
@@ -24,15 +23,15 @@ for (let i = 0; i < 13; i++) {
 }
 
 interface Props {
-    courseCells: typeof CalendarCourseCell[];
+    courseCells: any[];
+    saturdayClass: boolean;
 }
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.Element {
-
+function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props> ): JSX.Element {
     return (
         <div className={styles.calendar}>
             <div className={styles.dayLabelContainer} />
@@ -56,20 +55,22 @@ export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.E
                             {day}
                         </div>
                     ))}
-                    {grid.map((row) => row)}
+                    {grid.map(row => row)}
                 </div>
             </div>
-            {courseCells.map((Block: typeof CalendarCourseCell) => (
-                <div key={`${Block}`} 
-                     style ={{
-                            gridColumn: `1`,
-                            gridRow: `1`
-                     }}>
-                    <Chip label='test'/>
+            {/* courseCells.map((Block: typeof CalendarCourseCell) => (
+                <div
+                    key={`${Block}`}
+                    style={{
+                        gridColumn: `1`,
+                        gridRow: `1`,
+                    }}
+                >
+                    <Chip label='test' />
                 </div>
-            ))}
+                ))  */}
         </div>
     );
-};
+}
 
-export default Calendar;
+export default CalendarGrid;

From 71d8ac7486b8b44cf3feddf577da2f173525f898 Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Sat, 17 Feb 2024 14:30:15 -0600
Subject: [PATCH 8/8] Update CalendarGrid.stories.tsx

---
 src/stories/components/CalendarGrid.stories.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx
index 881ff93d..26fa245e 100644
--- a/src/stories/components/CalendarGrid.stories.tsx
+++ b/src/stories/components/CalendarGrid.stories.tsx
@@ -9,8 +9,7 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
-        saturday: { control: 'text' },
-        sunday: { control: 'text' },
+        saturdayClass: { control: 'boolean' },
     },
 } satisfies Meta<typeof CalendarGrid>;
 export default meta;
@@ -19,7 +18,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        saturday: true,
-        sunday: true,
+        saturdayClass: true,
     },
 };
\ No newline at end of file