Fixed build errors and restructured Calendar page

src/stories/components/CalendarBottomBar.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Course, Status } from '@shared/types/Course';
 import Instructor from '@shared/types/Instructor';
-import { CalendarBottomBar } from '@views/components/common/CalendarBottomBar/CalendarBottomBar';
+import { CalendarBottomBar } from 'src/views/components/calendar/CalendarBottomBar/CalendarBottomBar';
 import { getCourseColors } from '../../shared/util/colors';
 
 const exampleGovCourse: Course = new Course({

src/stories/components/CalendarCourse.stories.tsx

@@ -3,7 +3,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 CalendarCourse from '@views/components/common/CalendarCourseBlock/CalendarCourseMeeting';
+import CalendarCourse from 'src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting';
 
 const meta = {
     title: 'Components/Common/CalendarCourseMeeting',

src/stories/components/CalendarCourseCell.stories.tsx

@@ -1,7 +1,7 @@
 import { Course, Status } from '@shared/types/Course';
 import { getCourseColors } from '@shared/util/colors';
 import { Meta, StoryObj } from '@storybook/react';
-import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell';
+import CalendarCourseCell from 'src/views/components/calendar/CalendarCourseCell/CalendarCourseCell';
 import React from 'react';
 import { exampleCourse } from './PopupCourseBlock.stories';
 
@@ -91,7 +91,7 @@ export const Variants: Story = {
                 //     uniqueId: 67890,
                 //     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
                 // });
-                
+
                 colors={getCourseColors('green', 500)}
             />
             <CalendarCourseCell

src/stories/components/CalendarGrid.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';
+import CalendarGrid from 'src/views/components/calendar/CalendarGrid/CalendarGrid';
 import { getCourseColors } from 'src/shared/util/colors';
 import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
 import { Status } from 'src/shared/types/Course';

src/stories/components/CalendarGridCell.stories.tsx

@@ -1,19 +1,19 @@
 // Calendar.stories.tsx
 import React from 'react';
-import CalendarCell from '@views/components/common/CalendarGridCell/CalendarGridCell';
+import CalendarCell from 'src/views/components/calendar/CalendarGridCell/CalendarGridCell';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Common/CalendarGridCell',
-  component: CalendarCell,
-  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/CalendarGridCell',
+    component: CalendarCell,
+    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 CalendarCell>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {};

src/stories/components/CalendarHeader.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
+import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
 
 const meta = {
     title: 'Components/Common/CalendarHeader',

src/stories/components/CalendarSchedules.stories.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
 import { CourseSchedule } from 'src/shared/types/CourseSchedule';
 import Instructor from 'src/shared/types/Instructor';
-import { CalendarSchedules } from 'src/views/components/common/CalendarSchedules/CalendarSchedules';
+import { CalendarSchedules } from 'src/views/components/calendar/CalendarSchedules/CalendarSchedules';
 
 const meta = {
     title: 'Components/Common/CalendarSchedules',
@@ -17,7 +17,6 @@ const meta = {
     argTypes: {
         dummySchedules: { control: 'object' },
         dummyActiveIndex: { control: 'number' },
-        
     },
     render: (args: any) => (
         <div>
@@ -141,6 +140,5 @@ export const Default: Story = {
     args: {
         dummySchedules: schedules,
         dummyActiveIndex: 0,
-
     },
 };

src/stories/components/ImportantLinks.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import ImportantLinks from 'src/views/components/ImportantLinks';
+import ImportantLinks from 'src/views/components/calendar/ImportantLinks';
 
 const meta = {
     title: 'Components/Common/ImportantLinks',

src/views/components/PopupMain.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo for the refresh icon
 import { StatusIcon } from '@shared/util/icons';
+import { generateCourses } from 'src/stories/components/List.stories';
+import { Status } from 'src/shared/types/Course';
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
 import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
 import Text from './common/Text/Text';
 import Divider from './common/Divider/Divider';
 import logoImage from '../../assets/logo.png'; // Adjust the path as necessary
 import List from './common/List/List'; // Ensure this path is correctly pointing to your List component
-import { generateCourses } from 'src/stories/components/List.stories';
 
 export default function PopupMain() {
    const courses = generateCourses(5); 
@@ -52,7 +53,7 @@ return (
                 </div>
             </div>
             <Divider color="#E2E8F0" type="solid" style={{ margin: '1rem 0' }} />
-            <div className="mb-4 p-2 bg-white text-left rounded-lg shadow-inner" style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}>
+            <div className="mb-4 rounded-lg bg-white p-2 text-left shadow-inner" style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}>
                 <Text as="div" variant="h2-course" style={{ color: '#DD6B20', fontSize: '1.2rem' }}>MAIN SCHEDULE:</Text>
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', color: '#333f48' }}>
                     <Text as="div" variant="h1" style={{ fontSize: '1.2rem', fontWeight: 'bold', marginRight: '0.5rem' }}>22 HOURS</Text>
@@ -67,22 +68,22 @@ return (
                 listWidth={350} // Adjust based on your layout/design
                 gap={12} // Spacing between items
             />
-            <div className="mt-4 p-4 border-t border-gray-200 flex justify-between text-xs">
+            <div className="mt-4 flex justify-between border-t border-gray-200 p-4 text-xs">
                 <div className="flex items-center">
                     <div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
-                        <StatusIcon status="WAITLISTED" className="text-white h-5 w-5" />
+                        <StatusIcon status={Status.WAITLISTED} className="text-white h-5 w-5" />
                     </div>
                     <Text as="span" variant="mini">WAITLISTED</Text>
                 </div>
                 <div className="flex items-center">
                     <div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
-                        <StatusIcon status="CLOSED" className="text-white h-5 w-5" />
+                        <StatusIcon status={Status.CLOSED} className="text-white h-5 w-5" />
                     </div>
                     <Text as="span" variant="mini">CLOSED</Text>
                 </div>
                 <div className="flex items-center">
                     <div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
-                        <StatusIcon status="CANCELLED" className="text-white h-5 w-5" />
+                        <StatusIcon status={Status.CANCELLED} className="h-5 w-5 text-white" />
                     </div>
                     <Text as="span" variant="mini">CANCELLED</Text>
                 </div>
@@ -90,7 +91,7 @@ return (
             <div className="mt-2 text-center text-xs">
                 <div className="inline-flex items-center justify-center">
                     <Text as="div" variant="mini">DATA UPDATED ON: 12:00 AM 02/01/2024</Text>
-                    <FaRedo className="text-gray-600 h-4 w-4 ml-2" />
+                    <FaRedo className="ml-2 h-4 w-4 text-gray-600" />
                 </div>
             </div>
         </div>

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
-import Text from '../Text/Text';
+import Text from '../../common/Text/Text';
 import CalendarCourseBlock, { CalendarCourseCellProps } from '../CalendarCourseCell/CalendarCourseCell';
-import { Button } from '../Button/Button';
+import { Button } from '../../common/Button/Button';
 import ImageIcon from '~icons/material-symbols/image';
 import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
 

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

@@ -5,7 +5,7 @@ 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 '../Text/Text';
+import Text from '../../common/Text/Text';
 
 export interface CalendarCourseCellProps {
     courseDeptAndInstr: string;

src/views/components/calendar/CalendarHeader/CalenderHeader.tsx

@@ -1,15 +1,15 @@
 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 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 '../ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
-import CourseStatus from '../CourseStatus/CourseStatus';
+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'>

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

@@ -1,9 +1,9 @@
 import { UserSchedule } from '@shared/types/UserSchedule';
 import React, { useState } from 'react';
 import AddSchedule from '~icons/material-symbols/add';
-import List from '../List/List';
-import ScheduleListItem from '../ScheduleListItem/ScheduleListItem';
-import Text from '../Text/Text';
+import List from '../../common/List/List';
+import ScheduleListItem from '../../common/ScheduleListItem/ScheduleListItem';
+import Text from '../../common/Text/Text';
 
 export type Props = {
     style?: React.CSSProperties;
@@ -16,7 +16,7 @@ export function CalendarSchedules(props: Props) {
     const [schedules, setSchedules] = useState(props.dummySchedules || []);
 
     const scheduleComponents = schedules.map((schedule, index) => (
-            <ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
+        <ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
     ));
 
     return (

src/views/components/calendar/ImportantLinks.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import Text from './common/Text/Text';
+import Text from '../common/Text/Text';
 import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
 
 type Props = {

src/views/hooks/useFlattenedCourseSchedule.ts

@@ -1,4 +1,4 @@
-import { CalendarCourseCellProps } from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
+import { CalendarCourseCellProps } from 'src/views/components/calendar/CalendarCourseCell/CalendarCourseCell';
 import useSchedules from './useSchedules';
 
 const dayToNumber: { [day: string]: number } = {