From 5212784e8223956f40a876f848e9806d1b943ceb Mon Sep 17 00:00:00 2001
From: Vinson Zheng <vinsonzheng499@gmail.com>
Date: Sat, 17 Feb 2024 15:44:12 -0600
Subject: [PATCH 01/13] CalendarHeader alignment progress

---
 .../common/CalendarHeader/CalenderHeader.tsx  | 45 +++++++------------
 1 file changed, 17 insertions(+), 28 deletions(-)

diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index b5d07274f..fc0d0e715 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -12,40 +12,29 @@ import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/Schedu
 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 className='min-h-79px min-w-672px flex flex-wrap items-center justify-between px-0 py-15'>
+        <div className='flex'>
+            <Button variant='single' icon={MenuIcon} color='ut-gray' />
+            <div className='flex items-center'>
+                <LogoIcon style={{ marginRight: '5px' }} />
+                <Text>UT Registration Plus</Text>
+            </div>
         </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' }}>
+        <div className='flex flex-col'>
+            <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
+            DATA UPDATED ON: 12:00 AM 02/01/2024
+        </div>
+        <div className='flex flex-row items-center'>
+            <CourseStatus size='small' status={Status.WAITLISTED} />
+            <CourseStatus size='small' status={Status.CLOSED} />
+            <CourseStatus size='small' status={Status.CANCELLED} />
+        </div>
+        <div className='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>
 );

From d5e4097c067650b7a9c64bbef1020717b00b8f75 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sat, 17 Feb 2024 15:57:53 -0600
Subject: [PATCH 02/13] Boom

---
 .vscode/settings.json                                    | 9 +++++++++
 .../components/common/CalendarHeader/CalenderHeader.tsx  | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a89cbd32c..9f61663d7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -37,4 +37,13 @@
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "typescript.tsdk": "node_modules/typescript/lib",
+    "tailwindCSS.experimental.configFile": null,
+    "tailwindCSS.includeLanguages": {
+        "html": "html",
+        "javascript": "javascript",
+        "css": "css"
+    },
+    "editor.quickSuggestions": {
+        "strings": true
+    }
 }
diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index fc0d0e715..bd649f5db 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -15,16 +15,16 @@ const CalendarHeader = () => (
     <div className='min-h-79px min-w-672px flex flex-wrap items-center justify-between px-0 py-15'>
         <div className='flex'>
             <Button variant='single' icon={MenuIcon} color='ut-gray' />
-            <div className='flex items-center'>
+            <div className='flex items-center gap-10'>
                 <LogoIcon style={{ marginRight: '5px' }} />
                 <Text>UT Registration Plus</Text>
             </div>
         </div>
-
         <div className='flex flex-col'>
             <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
             DATA UPDATED ON: 12:00 AM 02/01/2024
         </div>
+        // Split
         <div className='flex flex-row items-center'>
             <CourseStatus size='small' status={Status.WAITLISTED} />
             <CourseStatus size='small' status={Status.CLOSED} />

From 5c4f064c9b30a395cd0b434d05e55dd60ae37323 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sat, 17 Feb 2024 16:05:23 -0600
Subject: [PATCH 03/13] css

---
 .vscode/settings.json                                        | 5 ++++-
 .../components/common/CalendarHeader/CalenderHeader.tsx      | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9f61663d7..e3885d01c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -41,7 +41,10 @@
     "tailwindCSS.includeLanguages": {
         "html": "html",
         "javascript": "javascript",
-        "css": "css"
+        "css": "css",
+        "javascriptreact": "javascriptreact",
+        "typescript": "typescript",
+        "typescriptreact": "typescriptreact",
     },
     "editor.quickSuggestions": {
         "strings": true
diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index bd649f5db..764b72b6d 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -13,7 +13,7 @@ import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
     <div className='min-h-79px min-w-672px flex flex-wrap items-center justify-between px-0 py-15'>
-        <div className='flex'>
+        <div className='flex gap-20'>
             <Button variant='single' icon={MenuIcon} color='ut-gray' />
             <div className='flex items-center gap-10'>
                 <LogoIcon style={{ marginRight: '5px' }} />

From 9ae875388c128399c66ba1c81a608c17b0854d63 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sat, 17 Feb 2024 16:08:28 -0600
Subject: [PATCH 04/13] Between

---
 src/views/components/common/CalendarHeader/CalenderHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index 764b72b6d..cc5d9929e 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -12,7 +12,7 @@ import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/Schedu
 import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
-    <div className='min-h-79px min-w-672px flex flex-wrap items-center justify-between px-0 py-15'>
+    <div className='min-h-79px min-w-672px flex flex-wrap items-center px-0 py-15'>
         <div className='flex gap-20'>
             <Button variant='single' icon={MenuIcon} color='ut-gray' />
             <div className='flex items-center gap-10'>

From d4ed595e937b310f698823aacdaefe309cb8079c Mon Sep 17 00:00:00 2001
From: Vinson Zheng <vinsonzheng499@gmail.com>
Date: Sat, 17 Feb 2024 16:08:46 -0600
Subject: [PATCH 05/13] Lol

---
 .../components/CalendarHeader.stories.tsx     |  2 +-
 src/stories/components/PopupMain.stories.tsx  |  0
 .../common/CalendarGrid/CalendarGrid.tsx      | 27 ++++++++++---------
 .../common/CalendarHeader/CalenderHeader.tsx  | 23 ++++++++--------
 4 files changed, 28 insertions(+), 24 deletions(-)
 delete mode 100644 src/stories/components/PopupMain.stories.tsx

diff --git a/src/stories/components/CalendarHeader.stories.tsx b/src/stories/components/CalendarHeader.stories.tsx
index 6833b7b18..047d86946 100644
--- a/src/stories/components/CalendarHeader.stories.tsx
+++ b/src/stories/components/CalendarHeader.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
 
 const meta = {
-    title: 'Components/CalendarHeader',
+    title: 'Components/Common/CalendarHeader',
     component: CalendarHeader,
     parameters: {
         layout: 'centered',
diff --git a/src/stories/components/PopupMain.stories.tsx b/src/stories/components/PopupMain.stories.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 43050e423..5d9742f60 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -1,12 +1,12 @@
-import React, {useRef} from 'react';
+import React, { useRef } from 'react';
 import html2canvas from 'html2canvas';
 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';
-import calIcon from 'src/assets/icons/cal.svg';
-import pngIcon from 'src/assets/icons/png.svg';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -34,12 +34,12 @@ interface Props {
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props> ): JSX.Element {
+function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props>): JSX.Element {
     const calendarRef = useRef(null); // Create a ref for the calendar grid
 
     const saveAsPNG = () => {
         if (calendarRef.current) {
-            html2canvas(calendarRef.current).then((canvas) => {
+            html2canvas(calendarRef.current).then(canvas => {
                 // Create an a element to trigger download
                 const a = document.createElement('a');
                 a.href = canvas.toDataURL('image/png');
@@ -85,19 +85,22 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                         gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
                     }}
                 >
-                    <CalendarCourseCell courseDeptAndInstr={block.componentProps.courseDeptAndInstr} 
-                                        status={block.componentProps.status} colors={block.componentProps.colors}/>
+                    <CalendarCourseCell
+                        courseDeptAndInstr={block.componentProps.courseDeptAndInstr}
+                        status={block.componentProps.status}
+                        colors={block.componentProps.colors}
+                    />
                 </div>
-                ))} */}
+            ))}
             <div className={styles.buttonContainer}>
-                <div className={styles.divider}></div> {/* First divider */}
+                <div className={styles.divider} /> {/* First divider */}
                 <button className={styles.calendarButton}>
-                    <img src={calIcon} className={styles.buttonIcon} alt="CAL" />
+                    <img src={calIcon} className={styles.buttonIcon} alt='CAL' />
                     Save as .CAL
                 </button>
-                <div className={styles.divider}></div> {/* Second divider */}
+                <div className={styles.divider} /> {/* Second divider */}
                 <button onClick={saveAsPNG} className={styles.calendarButton}>
-                    <img src={pngIcon} className={styles.buttonIcon} alt="PNG" />
+                    <img src={pngIcon} className={styles.buttonIcon} alt='PNG' />
                     Save as .PNG
                 </button>
             </div>
diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index fc0d0e715..d0c794110 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -12,7 +12,7 @@ import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/Schedu
 import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
-    <div className='min-h-79px min-w-672px flex flex-wrap items-center justify-between px-0 py-15'>
+    <div className='min-h-79px min-w-672px flex flex-wrap items-center'>
         <div className='flex'>
             <Button variant='single' icon={MenuIcon} color='ut-gray' />
             <div className='flex items-center'>
@@ -20,21 +20,22 @@ const CalendarHeader = () => (
                 <Text>UT Registration Plus</Text>
             </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 className='flex flex-row items-center'>
-            <CourseStatus size='small' status={Status.WAITLISTED} />
-            <CourseStatus size='small' status={Status.CLOSED} />
-            <CourseStatus size='small' status={Status.CANCELLED} />
-        </div>
-        <div className='flex'>
-            <Button variant='outline' icon={UndoIcon} color='ut-black' />
-            <Button variant='outline' icon={RedoIcon} color='ut-black' />
+        <div className='flex flex-row'>
+            <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>
-        <Button variant='outline' icon={SettingsIcon} color='ut-black' />
         <Divider type='solid' />
     </div>
 );

From 9bc8ee20642862adbd9495896cbff5f4a94de085 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sat, 17 Feb 2024 16:12:41 -0600
Subject: [PATCH 06/13] Gap fix

---
 src/views/components/common/CalendarHeader/CalenderHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index c8515454c..26d752ef8 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -13,9 +13,9 @@ import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
     <div className='min-h-79px min-w-672px flex flex-wrap items-center px-0 py-15'>
-        <div className='flex gap-20'>
+        <div className='flex gap-5'>
             <Button variant='single' icon={MenuIcon} color='ut-gray' />
-            <div className='flex items-center gap-10'>
+            <div className='flex items-center'>
                 <LogoIcon style={{ marginRight: '5px' }} />
                 <Text>UT Registration Plus</Text>
             </div>

From b76d65c5a43ca44e5c840627627154c60d37598d Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sat, 17 Feb 2024 16:20:40 -0600
Subject: [PATCH 07/13] whitespace-nowrap

---
 .../common/CalendarHeader/CalenderHeader.tsx  | 38 ++++++++++---------
 .../ScheduleTotalHoursAndCourses.tsx          |  2 +-
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index 26d752ef8..20245eb1f 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -13,27 +13,29 @@ import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
     <div className='min-h-79px min-w-672px flex flex-wrap items-center px-0 py-15'>
-        <div className='flex gap-5'>
-            <Button variant='single' icon={MenuIcon} color='ut-gray' />
-            <div className='flex items-center'>
-                <LogoIcon style={{ marginRight: '5px' }} />
-                <Text>UT Registration Plus</Text>
+        <div className="flex flex-row">
+            <div className='flex gap-5'>
+                <Button variant='single' icon={MenuIcon} color='ut-gray' />
+                <div className='flex items-center'>
+                    <LogoIcon style={{ marginRight: '5px' }} />
+                    <Text>UT Registration 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 className='flex flex-row'>
-            <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 className='flex flex-col'>
+                <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
+                DATA UPDATED ON: 12:00 AM 02/01/2024
             </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 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' />
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
index fd91d1f78..11e6a5b43 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
@@ -21,7 +21,7 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase'>
+        <div className='min-w-64 flex whitespace-nowrap	content-center items-baseline gap-2 uppercase'>
             <Text className='text-[#BF5700]' variant='h1' as='span'>
                 {`${scheduleName}: `}
             </Text>

From 50de4171784374eb8951daf282a1b126728d712a Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sat, 17 Feb 2024 16:25:18 -0600
Subject: [PATCH 08/13] Gaps

---
 .../components/common/CalendarHeader/CalenderHeader.tsx  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index 20245eb1f..743b19249 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -13,12 +13,15 @@ import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
     <div className='min-h-79px min-w-672px flex flex-wrap items-center px-0 py-15'>
-        <div className="flex flex-row">
-            <div className='flex gap-5'>
+        <div className="flex flex-row gap-2">
+            <div className='flex gap-1'>
                 <Button variant='single' icon={MenuIcon} color='ut-gray' />
                 <div className='flex items-center'>
                     <LogoIcon style={{ marginRight: '5px' }} />
-                    <Text>UT Registration Plus</Text>
+                    <div className='flex flex-col whitespace-nowrap gap-1'>
+                        <Text>UT Registration</Text>
+                        <Text>Plus</Text>
+                    </div>
                 </div>
             </div>
             <div className='flex flex-col'>

From 8bb33558fa825db8aeed6af2c7cf0e6bcd0a251a Mon Sep 17 00:00:00 2001
From: Vinson Zheng <vinsonzheng499@gmail.com>
Date: Sat, 17 Feb 2024 16:27:13 -0600
Subject: [PATCH 09/13] Finished alignment of CourseStatus and Buttons

---
 src/views/components/common/CalendarHeader/CalenderHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index 20245eb1f..090196f4e 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -13,7 +13,7 @@ import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
     <div className='min-h-79px min-w-672px flex flex-wrap items-center px-0 py-15'>
-        <div className="flex flex-row">
+        <div className='flex flex-row'>
             <div className='flex gap-5'>
                 <Button variant='single' icon={MenuIcon} color='ut-gray' />
                 <div className='flex items-center'>
@@ -25,7 +25,7 @@ const CalendarHeader = () => (
                 <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
                 DATA UPDATED ON: 12:00 AM 02/01/2024
             </div>
-            <div className='flex flex-row'>
+            <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} />

From 794745f64c2834802f0e57a2f7621b4d0363273b Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sat, 17 Feb 2024 16:38:43 -0600
Subject: [PATCH 10/13] Colors

---
 .../common/CalendarHeader/CalenderHeader.tsx  | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index f2cacb3e7..3905e4ddf 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -12,21 +12,23 @@ import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/Schedu
 import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
-    <div className='min-h-79px min-w-672px flex flex-wrap items-center px-0 py-15'>
-        <div className="flex flex-row gap-2">
-            <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 whitespace-nowrap gap-1'>
-                        <Text>UT Registration</Text>
-                        <Text>Plus</Text>
+    <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 whitespace-nowrap gap-1'>
+                            <Text className='leading-trim text-cap font-roboto font-medium text-base'>UT Registration</Text>
+                            <Text className='leading-trim text-cap font-roboto font-medium text-base'>Plus</Text>
+                        </div>
                     </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 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'>

From 753ffcaf2ccebfbc1dab301a517398f665ebfa84 Mon Sep 17 00:00:00 2001
From: Vinson Zheng <vinsonzheng499@gmail.com>
Date: Sat, 17 Feb 2024 16:47:42 -0600
Subject: [PATCH 11/13] ESLint auto format

---
 src/views/components/common/CalendarHeader/CalenderHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index f2cacb3e7..27d651727 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -13,12 +13,12 @@ import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
     <div className='min-h-79px min-w-672px flex flex-wrap items-center px-0 py-15'>
-        <div className="flex flex-row gap-2">
+        <div className='flex flex-row gap-2'>
             <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 whitespace-nowrap gap-1'>
+                    <div className='flex flex-col gap-1 whitespace-nowrap'>
                         <Text>UT Registration</Text>
                         <Text>Plus</Text>
                     </div>

From 094bca052d110aa87fca7cfcc402c10e84f7323c Mon Sep 17 00:00:00 2001
From: Vinson Zheng <vinsonzheng499@gmail.com>
Date: Sat, 17 Feb 2024 16:57:43 -0600
Subject: [PATCH 12/13] Color UT Registration Plus text

---
 .../components/common/CalendarHeader/CalenderHeader.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/components/common/CalendarHeader/CalenderHeader.tsx b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
index ed3d56dd2..7f11d3480 100644
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -20,10 +20,12 @@ const CalendarHeader = () => (
                     <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 font-medium'>
+                            <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 font-medium'>Plus</Text>
+                            <Text className='leading-trim text-cap font-roboto text-base text-ut-orange font-medium'>
+                                Plus
+                            </Text>
                         </div>
                     </div>
                 </div>

From b826b43ba4378754bf5ba8276551eb9648a89680 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sat, 17 Feb 2024 17:00:14 -0600
Subject: [PATCH 13/13] Reverting vscode

---
 .vscode/settings.json | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e3885d01c..a89cbd32c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -37,16 +37,4 @@
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "typescript.tsdk": "node_modules/typescript/lib",
-    "tailwindCSS.experimental.configFile": null,
-    "tailwindCSS.includeLanguages": {
-        "html": "html",
-        "javascript": "javascript",
-        "css": "css",
-        "javascriptreact": "javascriptreact",
-        "typescript": "typescript",
-        "typescriptreact": "typescriptreact",
-    },
-    "editor.quickSuggestions": {
-        "strings": true
-    }
 }