From 75f9aad826c23ea927707bc05bdde96b00838284 Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Wed, 23 Oct 2024 00:38:50 -0500
Subject: [PATCH 01/13] fix(header): bottom-aligned the schedule name +
 hours/courses in calendar

---
 src/stories/components/calendar/CalendarHeader.stories.tsx    | 2 +-
 src/views/components/calendar/Calendar.tsx                    | 2 +-
 .../calendar/{CalenderHeader.tsx => CalendarHeader.tsx}       | 0
 src/views/components/common/ScheduleTotalHoursAndCourses.tsx  | 4 ++--
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename src/views/components/calendar/{CalenderHeader.tsx => CalendarHeader.tsx} (100%)

diff --git a/src/stories/components/calendar/CalendarHeader.stories.tsx b/src/stories/components/calendar/CalendarHeader.stories.tsx
index b9738f22b..b2d2cf26c 100644
--- a/src/stories/components/calendar/CalendarHeader.stories.tsx
+++ b/src/stories/components/calendar/CalendarHeader.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import CalendarHeader from '@views/components/calendar/CalenderHeader';
+import CalendarHeader from '@views/components/calendar/CalendarHeader';
 
 const meta = {
     title: 'Components/Calendar/CalendarHeader',
diff --git a/src/views/components/calendar/Calendar.tsx b/src/views/components/calendar/Calendar.tsx
index c1ad86dd3..652527880 100644
--- a/src/views/components/calendar/Calendar.tsx
+++ b/src/views/components/calendar/Calendar.tsx
@@ -2,8 +2,8 @@ import type { CalendarTabMessages } from '@shared/messages/CalendarMessages';
 import type { Course } from '@shared/types/Course';
 import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar';
 import CalendarGrid from '@views/components/calendar/CalendarGrid';
+import CalendarHeader from '@views/components/calendar/CalendarHeader';
 import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules';
-import CalendarHeader from '@views/components/calendar/CalenderHeader';
 import ImportantLinks from '@views/components/calendar/ImportantLinks';
 import Divider from '@views/components/common/Divider';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
diff --git a/src/views/components/calendar/CalenderHeader.tsx b/src/views/components/calendar/CalendarHeader.tsx
similarity index 100%
rename from src/views/components/calendar/CalenderHeader.tsx
rename to src/views/components/calendar/CalendarHeader.tsx
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index 671b1a577..d7e89207e 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -21,11 +21,11 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-full w-0 flex items-center gap-2.5 whitespace-nowrap'>
+        <div className='min-w-full w-0 flex items-baseline gap-2.5 whitespace-nowrap'>
             <Text className='truncate text-ut-burntorange uppercase' variant='h1' as='span'>
                 {`${scheduleName}: `}
             </Text>
-            <Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-theme-black'>
+            <Text variant='h3' as='span' className='flex flex-row items-baseline gap-2 text-theme-black'>
                 {totalHours} {totalHours === 1 ? 'Hour' : 'Hours'}
                 <Text variant='h4' as='span' className='hidden capitalize screenshot:inline sm:inline'>
                     {totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}

From 0afc6c9fb7691caf456703fc6a08bed162041ff4 Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Wed, 23 Oct 2024 10:36:40 -0500
Subject: [PATCH 02/13] feat: updated font style in header and dropdown

---
 .../components/common/ScheduleDropdown.tsx    |  4 ++--
 .../common/ScheduleTotalHoursAndCourses.tsx   | 24 ++++++++++++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
index c806478c8..b3c29cfae 100644
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -27,14 +27,14 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                     <>
                         <DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
                             <div className='flex-1'>
-                                <Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
+                                <Text as='div' variant='h3' className='mb-1 w-100% text-ut-burntorange'>
                                     {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
                                 </Text>
                                 <p className='-mb-0.5'>
                                     <Text variant='h3' className='text-theme-black leading-[75%]!'>
                                         {activeSchedule ? activeSchedule.hours : 0} HOURS
                                     </Text>
-                                    <Text variant='h4' className='ml-2.5 text-ut-black leading-[75%]!'>
+                                    <Text variant='h3' className='ml-2.5 text-ut-black leading-[75%]!'>
                                         {activeSchedule ? activeSchedule.courses.length : 0} Courses
                                     </Text>
                                 </p>
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index d7e89207e..4e251cfbc 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -21,16 +21,28 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-full w-0 flex items-baseline gap-2.5 whitespace-nowrap'>
+        <div className='min-w-full w-0 flex items-baseline gap-5 whitespace-nowrap'>
             <Text className='truncate text-ut-burntorange uppercase' variant='h1' as='span'>
                 {`${scheduleName}: `}
             </Text>
-            <Text variant='h3' as='span' className='flex flex-row items-baseline gap-2 text-theme-black'>
-                {totalHours} {totalHours === 1 ? 'Hour' : 'Hours'}
-                <Text variant='h4' as='span' className='hidden capitalize screenshot:inline sm:inline'>
-                    {totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}
+            <div className='flex flex-row items-baseline gap-5'>
+                <Text
+                    variant='h3'
+                    as='span'
+                    className='text-smallcaps flex flex-row items-baseline gap-2 text-theme-black sm:inline-flex'
+                >
+                    <span className='font-bold'>{totalHours}</span>
+                    <span className='font-normal'>{totalHours === 1 ? 'Hour' : 'Hours'}</span>
                 </Text>
-            </Text>
+                <Text
+                    variant='h3'
+                    as='span'
+                    className='text-smallcaps hidden flex flex-row items-baseline gap-2 text-theme-black screenshot:inline-flex sm:inline-flex'
+                >
+                    <span className='font-bold'>{totalCourses}</span>
+                    <span className='font-normal'>{totalCourses === 1 ? 'Course' : 'Courses'}</span>
+                </Text>
+            </div>
         </div>
     );
 }

From 312cc1e9d7c66b2da3d62137d4f88b3f82c324c4 Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Wed, 23 Oct 2024 19:40:25 -0500
Subject: [PATCH 03/13] fix: new hour/course styling per discussion

i love having 80 different ideas, hopefully after this there's like maybe a tiny commit left to do before this is done..
---
 .../components/common/ScheduleDropdown.tsx    |  4 +-
 .../common/ScheduleTotalHoursAndCourses.tsx   | 40 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
index b3c29cfae..ae2a242df 100644
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -27,14 +27,14 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                     <>
                         <DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
                             <div className='flex-1'>
-                                <Text as='div' variant='h3' className='mb-1 w-100% text-ut-burntorange'>
+                                <Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
                                     {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
                                 </Text>
                                 <p className='-mb-0.5'>
                                     <Text variant='h3' className='text-theme-black leading-[75%]!'>
                                         {activeSchedule ? activeSchedule.hours : 0} HOURS
                                     </Text>
-                                    <Text variant='h3' className='ml-2.5 text-ut-black leading-[75%]!'>
+                                    <Text variant='h3' className='ml-2.5 text-theme-black leading-[75%]!'>
                                         {activeSchedule ? activeSchedule.courses.length : 0} Courses
                                     </Text>
                                 </p>
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index 4e251cfbc..86f25be50 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -21,27 +21,31 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-full w-0 flex items-baseline gap-5 whitespace-nowrap'>
+        <div className='min-w-full w-0 flex items-baseline gap-2.5 whitespace-nowrap'>
             <Text className='truncate text-ut-burntorange uppercase' variant='h1' as='span'>
                 {`${scheduleName}: `}
             </Text>
-            <div className='flex flex-row items-baseline gap-5'>
-                <Text
-                    variant='h3'
-                    as='span'
-                    className='text-smallcaps flex flex-row items-baseline gap-2 text-theme-black sm:inline-flex'
-                >
-                    <span className='font-bold'>{totalHours}</span>
-                    <span className='font-normal'>{totalHours === 1 ? 'Hour' : 'Hours'}</span>
-                </Text>
-                <Text
-                    variant='h3'
-                    as='span'
-                    className='text-smallcaps hidden flex flex-row items-baseline gap-2 text-theme-black screenshot:inline-flex sm:inline-flex'
-                >
-                    <span className='font-bold'>{totalCourses}</span>
-                    <span className='font-normal'>{totalCourses === 1 ? 'Course' : 'Courses'}</span>
-                </Text>
+            <div className='flex flex-row items-baseline gap-2'>
+                <div>
+                    <Text variant='h1' as='span' className='font-normal normal-case!'>
+                        <span className='text-theme-black'>{totalHours}</span>{' '}
+                    </Text>
+                    <Text variant='h3' as='span' className='normal-case!'>
+                        <span className='text-theme-black font-bold' style={{ fontVariant: 'all-small-caps' }}>
+                            {totalHours === 1 ? 'HOUR' : 'HOURS'}
+                        </span>
+                    </Text>
+                </div>
+                <div>
+                    <Text variant='h1' as='span' className='font-normal normal-case!'>
+                        <span className='text-theme-black'>{totalCourses}</span>{' '}
+                    </Text>
+                    <Text variant='h3' as='span' className='normal-case!'>
+                        <span className='text-theme-black font-bold' style={{ fontVariant: 'all-small-caps' }}>
+                            {totalCourses === 1 ? 'COURSE' : 'COURSES'}
+                        </span>
+                    </Text>
+                </div>
             </div>
         </div>
     );

From 50b17fcdad3f2c7459f8e3bc35471aa63747ef0e Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Wed, 30 Oct 2024 11:20:45 -0500
Subject: [PATCH 04/13] feat(header): added icons to cal header

WORK IN PROGRESS
---
 package.json                                  |  2 ++
 pnpm-lock.yaml                                | 20 +++++++++++++++++++
 .../common/ScheduleTotalHoursAndCourses.tsx   | 17 ++++++++++------
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 8fcae1f88..b23d34ef6 100644
--- a/package.json
+++ b/package.json
@@ -59,9 +59,11 @@
         "@commitlint/types": "^19.5.0",
         "@crxjs/vite-plugin": "2.0.0-beta.21",
         "@iconify-json/bi": "^1.2.1",
+        "@iconify-json/ic": "^1.2.1",
         "@iconify-json/iconoir": "^1.2.2",
         "@iconify-json/material-symbols": "^1.2.4",
         "@iconify-json/ri": "^1.2.1",
+        "@iconify-json/streamline": "^1.2.1",
         "@semantic-release/exec": "^6.0.3",
         "@sentry/types": "^8.34.0",
         "@storybook/addon-designs": "^8.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9eb4f46a7..4c4eaa33f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,6 +110,9 @@ importers:
       '@iconify-json/bi':
         specifier: ^1.2.1
         version: 1.2.1
+      '@iconify-json/ic':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@iconify-json/iconoir':
         specifier: ^1.2.2
         version: 1.2.2
@@ -119,6 +122,9 @@ importers:
       '@iconify-json/ri':
         specifier: ^1.2.1
         version: 1.2.1
+      '@iconify-json/streamline':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@semantic-release/exec':
         specifier: ^6.0.3
         version: 6.0.3(semantic-release@24.1.2(typescript@5.6.3))
@@ -914,6 +920,9 @@ packages:
   '@iconify-json/bi@1.2.1':
     resolution: {integrity: sha512-wsIWb6bcnBkfN8/2puIIE2ul6NYVjclbE/nI7JZsPnfzBamd3NuRFstXQH9Ckkbrw9eiBTNKwHbH90w3UE5QIg==}
 
+  '@iconify-json/ic@1.2.1':
+    resolution: {integrity: sha512-UjL/bjJP/T5EV881+hTzcfTKVo0KEUjhnMiJcLtPzNgPtU2KZZmRx8BSKKR61H4CN/5FTEbyawGyG0aEt3SwGQ==}
+
   '@iconify-json/iconoir@1.2.2':
     resolution: {integrity: sha512-ytC2V7WeIHsQSyd5r+Iq/ExNb/yM45iR0jhbKNqFFSWhJvuanfIyuTHH/SQJpPYwV1grGtIx7v+kZ7xIjltdpA==}
 
@@ -923,6 +932,9 @@ packages:
   '@iconify-json/ri@1.2.1':
     resolution: {integrity: sha512-xI3+xZHBI+wlhQqd6jRRcLD5K8B8vQNyxcSB43myxNZ/SfXIn7Ny28h0jyPo9e0gT8fGhqx6R5PeLz/UBB8jwQ==}
 
+  '@iconify-json/streamline@1.2.1':
+    resolution: {integrity: sha512-hqNodkjyIHBymkFY3zMip0F/D5yw4qXgwMJCaTF3zlbpQMgNJhY3D2ikTFTDVcTHfCSd6EX6enKXj4Rvu+5hnw==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -7477,6 +7489,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/ic@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/iconoir@1.2.2':
     dependencies:
       '@iconify/types': 2.0.0
@@ -7489,6 +7505,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/streamline@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.1.33':
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index 86f25be50..ff2cf532d 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -1,6 +1,9 @@
 import Text from '@views/components/common/Text/Text';
 import React from 'react';
 
+import ClockIcon from '~icons/ic/baseline-access-time-filled';
+import BookIcon from '~icons/material-symbols/book-2-rounded';
+
 /**
  * Props for ScheduleTotalHoursAndCourses
  */
@@ -22,25 +25,27 @@ export default function ScheduleTotalHoursAndCourses({
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
         <div className='min-w-full w-0 flex items-baseline gap-2.5 whitespace-nowrap'>
-            <Text className='truncate text-ut-burntorange uppercase' variant='h1' as='span'>
-                {`${scheduleName}: `}
+            <Text className='truncate text-ut-burntorange' variant='h1' as='span'>
+                {`${scheduleName} `}
             </Text>
             <div className='flex flex-row items-baseline gap-2'>
-                <div>
+                <div className='flex flex-row items-baseline gap-1'>
+                    <ClockIcon className='text-theme-black' style={{ fontSize: '2em' }} />
                     <Text variant='h1' as='span' className='font-normal normal-case!'>
                         <span className='text-theme-black'>{totalHours}</span>{' '}
                     </Text>
-                    <Text variant='h3' as='span' className='normal-case!'>
+                    <Text variant='h1' as='span' className='normal-case!'>
                         <span className='text-theme-black font-bold' style={{ fontVariant: 'all-small-caps' }}>
                             {totalHours === 1 ? 'HOUR' : 'HOURS'}
                         </span>
                     </Text>
                 </div>
-                <div>
+                <div className='flex flex-row items-baseline gap-1'>
+                    <BookIcon className='text-theme-black' style={{ fontSize: '2em' }} />
                     <Text variant='h1' as='span' className='font-normal normal-case!'>
                         <span className='text-theme-black'>{totalCourses}</span>{' '}
                     </Text>
-                    <Text variant='h3' as='span' className='normal-case!'>
+                    <Text variant='h1' as='span' className='normal-case!'>
                         <span className='text-theme-black font-bold' style={{ fontVariant: 'all-small-caps' }}>
                             {totalCourses === 1 ? 'COURSE' : 'COURSES'}
                         </span>

From 4c3098edfae9ee48bc7dac47d42bd84edf5a0cf3 Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Fri, 1 Nov 2024 12:16:18 -0500
Subject: [PATCH 05/13] style: updated layout of header and main popup

---
 .../components/common/ScheduleDropdown.tsx    | 20 +++++---
 .../common/ScheduleTotalHoursAndCourses.tsx   | 46 ++++++++-----------
 2 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
index ae2a242df..a42ca5a37 100644
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -27,16 +27,22 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                     <>
                         <DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
                             <div className='flex-1'>
-                                <Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
+                                <Text as='div' variant='h3' className='mb-1 w-100% text-ut-burntorange'>
                                     {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
                                 </Text>
                                 <p className='-mb-0.5'>
-                                    <Text variant='h3' className='text-theme-black leading-[75%]!'>
-                                        {activeSchedule ? activeSchedule.hours : 0} HOURS
-                                    </Text>
-                                    <Text variant='h3' className='ml-2.5 text-theme-black leading-[75%]!'>
-                                        {activeSchedule ? activeSchedule.courses.length : 0} Courses
-                                    </Text>
+                                    <Text variant='h4' className='text-theme-black font-normal leading-[75%]!'>
+                                        {activeSchedule ? activeSchedule.hours : 0}
+                                    </Text>{' '}
+                                    <span className='font-bold' style={{ fontVariant: 'all-small-caps' }}>
+                                        {activeSchedule.hours === 1 ? 'Hour' : 'Hours'}
+                                    </span>{' '}
+                                    <Text variant='h4' className='text-theme-black font-normal leading-[75%]!'>
+                                        {activeSchedule ? activeSchedule.courses.length : 0}
+                                    </Text>{' '}
+                                    <span className='font-bold' style={{ fontVariant: 'all-small-caps' }}>
+                                        {activeSchedule.courses.length === 1 ? 'Course' : 'Courses'}
+                                    </span>
                                 </p>
                             </div>
                             <Text className='text-ut-burntorange text-2xl! font-normal!'>
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index ff2cf532d..da15d19e8 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -1,9 +1,6 @@
 import Text from '@views/components/common/Text/Text';
 import React from 'react';
 
-import ClockIcon from '~icons/ic/baseline-access-time-filled';
-import BookIcon from '~icons/material-symbols/book-2-rounded';
-
 /**
  * Props for ScheduleTotalHoursAndCourses
  */
@@ -24,32 +21,27 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-full w-0 flex items-baseline gap-2.5 whitespace-nowrap'>
-            <Text className='truncate text-ut-burntorange' variant='h1' as='span'>
-                {`${scheduleName} `}
+        <div className='block min-w-full w-0 items-center gap-2.5 whitespace-nowrap'>
+            <Text className='truncate text-ut-burntorange uppercase' variant='h1' as='span'>
+                {`${scheduleName}:`}
             </Text>
-            <div className='flex flex-row items-baseline gap-2'>
-                <div className='flex flex-row items-baseline gap-1'>
-                    <ClockIcon className='text-theme-black' style={{ fontSize: '2em' }} />
-                    <Text variant='h1' as='span' className='font-normal normal-case!'>
-                        <span className='text-theme-black'>{totalHours}</span>{' '}
-                    </Text>
-                    <Text variant='h1' as='span' className='normal-case!'>
-                        <span className='text-theme-black font-bold' style={{ fontVariant: 'all-small-caps' }}>
-                            {totalHours === 1 ? 'HOUR' : 'HOURS'}
-                        </span>
-                    </Text>
+            <br />
+            <div className='flex flex-row items-center gap-2.5 text-ut-black'>
+                <div className='flex flex-row items-center gap-1 text-ut-black font-normal'>
+                    <Text variant='h4' as='span' className='hidden capitalize screenshot:inline sm:inline'>
+                        {totalHours}
+                    </Text>{' '}
+                    <span className='font-bold' style={{ fontVariant: 'all-small-caps' }}>
+                        {totalHours === 1 ? 'Hour' : 'Hours'}
+                    </span>
                 </div>
-                <div className='flex flex-row items-baseline gap-1'>
-                    <BookIcon className='text-theme-black' style={{ fontSize: '2em' }} />
-                    <Text variant='h1' as='span' className='font-normal normal-case!'>
-                        <span className='text-theme-black'>{totalCourses}</span>{' '}
-                    </Text>
-                    <Text variant='h1' as='span' className='normal-case!'>
-                        <span className='text-theme-black font-bold' style={{ fontVariant: 'all-small-caps' }}>
-                            {totalCourses === 1 ? 'COURSE' : 'COURSES'}
-                        </span>
-                    </Text>
+                <div className='flex flex-row items-center gap-1 text-ut-black'>
+                    <Text variant='h4' as='span' className='hidden font-normal capitalize screenshot:inline sm:inline'>
+                        {totalCourses}
+                    </Text>{' '}
+                    <span className='font-bold' style={{ fontVariant: 'all-small-caps' }}>
+                        {totalCourses === 1 ? 'Course' : 'Courses'}
+                    </span>
                 </div>
             </div>
         </div>

From 1931d344c58db15330f0e02722aabf0f30ecf6b3 Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Tue, 5 Nov 2024 00:03:11 -0600
Subject: [PATCH 06/13] fix: updated font and spacing for header and popup

---
 .../components/common/ScheduleDropdown.tsx    | 40 ++++++++++++-------
 .../common/ScheduleTotalHoursAndCourses.tsx   | 28 ++++++++-----
 2 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
index a42ca5a37..6528b775b 100644
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -30,20 +30,32 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                                 <Text as='div' variant='h3' className='mb-1 w-100% text-ut-burntorange'>
                                     {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
                                 </Text>
-                                <p className='-mb-0.5'>
-                                    <Text variant='h4' className='text-theme-black font-normal leading-[75%]!'>
-                                        {activeSchedule ? activeSchedule.hours : 0}
-                                    </Text>{' '}
-                                    <span className='font-bold' style={{ fontVariant: 'all-small-caps' }}>
-                                        {activeSchedule.hours === 1 ? 'Hour' : 'Hours'}
-                                    </span>{' '}
-                                    <Text variant='h4' className='text-theme-black font-normal leading-[75%]!'>
-                                        {activeSchedule ? activeSchedule.courses.length : 0}
-                                    </Text>{' '}
-                                    <span className='font-bold' style={{ fontVariant: 'all-small-caps' }}>
-                                        {activeSchedule.courses.length === 1 ? 'Course' : 'Courses'}
-                                    </span>
-                                </p>
+                                <div className='flex gap-2.5 text-theme-black leading-[75%]!'>
+                                    <div className='flex gap-1.25'>
+                                        <Text variant='h4' className='text-theme-black leading-[75%]!'>
+                                            {activeSchedule ? activeSchedule.hours : 0}
+                                        </Text>
+                                        <Text
+                                            variant='h4'
+                                            className='text-theme-black leading-[75%]!'
+                                            style={{ fontVariant: 'all-small-caps' }}
+                                        >
+                                            {activeSchedule.hours === 1 ? 'Hour' : 'Hours'}
+                                        </Text>
+                                    </div>
+                                    <div className='flex gap-1.25'>
+                                        <Text variant='h4' className='text-theme-black leading-[75%]!'>
+                                            {activeSchedule ? activeSchedule.courses.length : 0}
+                                        </Text>
+                                        <Text
+                                            variant='h4'
+                                            className='text-theme-black leading-[75%]!'
+                                            style={{ fontVariant: 'all-small-caps' }}
+                                        >
+                                            {activeSchedule.courses.length === 1 ? 'Course' : 'Courses'}
+                                        </Text>
+                                    </div>
+                                </div>
                             </div>
                             <Text className='text-ut-burntorange text-2xl! font-normal!'>
                                 {open ? <DropdownArrowDown /> : <DropdownArrowUp />}
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index da15d19e8..6489dd935 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -27,21 +27,31 @@ export default function ScheduleTotalHoursAndCourses({
             </Text>
             <br />
             <div className='flex flex-row items-center gap-2.5 text-ut-black'>
-                <div className='flex flex-row items-center gap-1 text-ut-black font-normal'>
+                <div className='flex flex-row items-center gap-1.25 text-ut-black'>
                     <Text variant='h4' as='span' className='hidden capitalize screenshot:inline sm:inline'>
                         {totalHours}
-                    </Text>{' '}
-                    <span className='font-bold' style={{ fontVariant: 'all-small-caps' }}>
+                    </Text>
+                    <Text
+                        variant='h4'
+                        as='span'
+                        className='hidden capitalize screenshot:inline sm:inline'
+                        style={{ fontVariant: 'all-small-caps' }}
+                    >
                         {totalHours === 1 ? 'Hour' : 'Hours'}
-                    </span>
+                    </Text>
                 </div>
-                <div className='flex flex-row items-center gap-1 text-ut-black'>
-                    <Text variant='h4' as='span' className='hidden font-normal capitalize screenshot:inline sm:inline'>
+                <div className='flex flex-row items-center gap-1.25 text-ut-black'>
+                    <Text variant='h4' as='span' className='hidden capitalize screenshot:inline sm:inline'>
                         {totalCourses}
-                    </Text>{' '}
-                    <span className='font-bold' style={{ fontVariant: 'all-small-caps' }}>
+                    </Text>
+                    <Text
+                        variant='h4'
+                        as='span'
+                        className='hidden capitalize screenshot:inline sm:inline'
+                        style={{ fontVariant: 'all-small-caps' }}
+                    >
                         {totalCourses === 1 ? 'Course' : 'Courses'}
-                    </span>
+                    </Text>
                 </div>
             </div>
         </div>

From fa2eda8b188d30b1551a1d0395dd2bacac0513c0 Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Tue, 5 Nov 2024 13:43:46 -0600
Subject: [PATCH 07/13] fix: updated cal + popup style details - schedule title
 is now in normal casing w/ colon removed - last updated on is now entirely
 deleted from everywhere - hour and course numbers now h3 in calendar ONLY

---
 src/views/components/PopupMain.tsx                     |  3 ---
 src/views/components/calendar/CalendarHeader.tsx       | 10 ----------
 src/views/components/common/ScheduleDropdown.tsx       |  9 +++++++--
 .../components/common/ScheduleTotalHoursAndCourses.tsx |  8 ++++----
 src/views/components/settings/Settings.tsx             |  6 +-----
 5 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index 999999a8e..3b733d398 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -187,9 +187,6 @@ export default function PopupMain(): JSX.Element {
                 </div>
                 {enableDataRefreshing && (
                     <div className='inline-flex items-center self-center gap-1'>
-                        <Text variant='mini' className='text-ut-gray !font-normal'>
-                            LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
-                        </Text>
                         {/* <button
                             className='h-4 w-4 bg-transparent p-0 btn'
                             onClick={() => {
diff --git a/src/views/components/calendar/CalendarHeader.tsx b/src/views/components/calendar/CalendarHeader.tsx
index c16f71f22..c4364c1b8 100644
--- a/src/views/components/calendar/CalendarHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader.tsx
@@ -76,16 +76,6 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
                     totalHours={activeSchedule.hours}
                     totalCourses={activeSchedule.courses.length}
                 />
-                {enableDataRefreshing && (
-                    <div className='flex items-center gap-1 screenshot:hidden'>
-                        <Text variant='mini' className='text-nowrap text-ut-gray font-normal!'>
-                            LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
-                        </Text>
-                        {/* <button className='inline-block h-4 w-4 bg-transparent p-0 btn'>
-                            <RefreshIcon className='h-4 w-4 animate-duration-800 text-ut-black' />
-                        </button> */}
-                    </div>
-                )}
             </div>
             <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
                 {enableCourseStatusChips && (
diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
index 6528b775b..7e5cbdccc 100644
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -27,8 +27,13 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                     <>
                         <DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
                             <div className='flex-1'>
-                                <Text as='div' variant='h3' className='mb-1 w-100% text-ut-burntorange'>
-                                    {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
+                                <Text
+                                    as='div'
+                                    variant='h3'
+                                    className='mb-1 w-100% text-ut-burntorange'
+                                    style={{ textTransform: 'none' }}
+                                >
+                                    {activeSchedule ? activeSchedule.name : 'Schedule'}
                                 </Text>
                                 <div className='flex gap-2.5 text-theme-black leading-[75%]!'>
                                     <div className='flex gap-1.25'>
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index 6489dd935..0bcd62ec4 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -22,13 +22,13 @@ export default function ScheduleTotalHoursAndCourses({
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
         <div className='block min-w-full w-0 items-center gap-2.5 whitespace-nowrap'>
-            <Text className='truncate text-ut-burntorange uppercase' variant='h1' as='span'>
-                {`${scheduleName}:`}
+            <Text className='truncate text-ut-burntorange' variant='h1' as='span' style={{ textTransform: 'none' }}>
+                {`${scheduleName}`}
             </Text>
             <br />
             <div className='flex flex-row items-center gap-2.5 text-ut-black'>
                 <div className='flex flex-row items-center gap-1.25 text-ut-black'>
-                    <Text variant='h4' as='span' className='hidden capitalize screenshot:inline sm:inline'>
+                    <Text variant='h3' as='span' className='hidden capitalize screenshot:inline sm:inline'>
                         {totalHours}
                     </Text>
                     <Text
@@ -41,7 +41,7 @@ export default function ScheduleTotalHoursAndCourses({
                     </Text>
                 </div>
                 <div className='flex flex-row items-center gap-1.25 text-ut-black'>
-                    <Text variant='h4' as='span' className='hidden capitalize screenshot:inline sm:inline'>
+                    <Text variant='h3' as='span' className='hidden capitalize screenshot:inline sm:inline'>
                         {totalCourses}
                     </Text>
                     <Text
diff --git a/src/views/components/settings/Settings.tsx b/src/views/components/settings/Settings.tsx
index 8ccec15b5..cefd4362d 100644
--- a/src/views/components/settings/Settings.tsx
+++ b/src/views/components/settings/Settings.tsx
@@ -421,11 +421,7 @@ export default function Settings(): JSX.Element {
                             </div>
                             {DISPLAY_PREVIEWS && (
                                 <Preview>
-                                    <div className='inline-flex items-center self-center gap-1'>
-                                        <Text variant='small' className='text-ut-gray !font-normal'>
-                                            LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
-                                        </Text>
-                                    </div>
+                                    <div className='inline-flex items-center self-center gap-1' />
                                     <Text
                                         variant='h2-course'
                                         className={clsx('text-center text-theme-red !font-normal', {

From 6c715c42d5514a8a190ae2deea6926cb662fa91b Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Tue, 5 Nov 2024 18:17:30 -0600
Subject: [PATCH 08/13] refactor: changed size for calendar header

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

diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index 0bcd62ec4..9bac6c58d 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -32,7 +32,7 @@ export default function ScheduleTotalHoursAndCourses({
                         {totalHours}
                     </Text>
                     <Text
-                        variant='h4'
+                        variant='h3'
                         as='span'
                         className='hidden capitalize screenshot:inline sm:inline'
                         style={{ fontVariant: 'all-small-caps' }}
@@ -45,7 +45,7 @@ export default function ScheduleTotalHoursAndCourses({
                         {totalCourses}
                     </Text>
                     <Text
-                        variant='h4'
+                        variant='h3'
                         as='span'
                         className='hidden capitalize screenshot:inline sm:inline'
                         style={{ fontVariant: 'all-small-caps' }}

From e0bad1cf55eab9ba62e2042578998bf241190d85 Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Tue, 5 Nov 2024 18:31:27 -0600
Subject: [PATCH 09/13] refactor: changed ut-black to theme-black

---
 src/views/components/calendar/CalendarHeader.tsx            | 2 +-
 .../components/common/ScheduleTotalHoursAndCourses.tsx      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/components/calendar/CalendarHeader.tsx b/src/views/components/calendar/CalendarHeader.tsx
index c4364c1b8..7f4482314 100644
--- a/src/views/components/calendar/CalendarHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader.tsx
@@ -88,7 +88,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
 
                 {/* <Button variant='single' icon={UndoIcon} color='ut-black' />
                 <Button variant='single' icon={RedoIcon} color='ut-black' /> */}
-                <Button variant='single' icon={SettingsIcon} color='ut-black' onClick={handleOpenOptions} />
+                <Button variant='single' icon={SettingsIcon} color='theme-black' onClick={handleOpenOptions} />
             </div>
         </div>
     );
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index 9bac6c58d..4348accd1 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -26,8 +26,8 @@ export default function ScheduleTotalHoursAndCourses({
                 {`${scheduleName}`}
             </Text>
             <br />
-            <div className='flex flex-row items-center gap-2.5 text-ut-black'>
-                <div className='flex flex-row items-center gap-1.25 text-ut-black'>
+            <div className='flex flex-row items-center gap-2.5 text-theme-black'>
+                <div className='flex flex-row items-center gap-1.25 text-theme-black'>
                     <Text variant='h3' as='span' className='hidden capitalize screenshot:inline sm:inline'>
                         {totalHours}
                     </Text>
@@ -40,7 +40,7 @@ export default function ScheduleTotalHoursAndCourses({
                         {totalHours === 1 ? 'Hour' : 'Hours'}
                     </Text>
                 </div>
-                <div className='flex flex-row items-center gap-1.25 text-ut-black'>
+                <div className='flex flex-row items-center gap-1.25 text-theme-black'>
                     <Text variant='h3' as='span' className='hidden capitalize screenshot:inline sm:inline'>
                         {totalCourses}
                     </Text>

From 7a4561994c6489f0f25c8dbcd11341137e2bac0c Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Tue, 5 Nov 2024 19:44:22 -0600
Subject: [PATCH 10/13] refactor: remove hiding on small window sizes

---
 .../components/common/ScheduleDropdown.tsx    | 20 ++++---------------
 .../common/ScheduleTotalHoursAndCourses.tsx   | 10 +++++-----
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
index 7e5cbdccc..183bedbc3 100644
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -37,26 +37,14 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                                 </Text>
                                 <div className='flex gap-2.5 text-theme-black leading-[75%]!'>
                                     <div className='flex gap-1.25'>
-                                        <Text variant='h4' className='text-theme-black leading-[75%]!'>
-                                            {activeSchedule ? activeSchedule.hours : 0}
-                                        </Text>
-                                        <Text
-                                            variant='h4'
-                                            className='text-theme-black leading-[75%]!'
-                                            style={{ fontVariant: 'all-small-caps' }}
-                                        >
+                                        <Text variant='h4'>{activeSchedule ? activeSchedule.hours : 0}</Text>
+                                        <Text variant='h4' style={{ fontVariant: 'all-small-caps' }}>
                                             {activeSchedule.hours === 1 ? 'Hour' : 'Hours'}
                                         </Text>
                                     </div>
                                     <div className='flex gap-1.25'>
-                                        <Text variant='h4' className='text-theme-black leading-[75%]!'>
-                                            {activeSchedule ? activeSchedule.courses.length : 0}
-                                        </Text>
-                                        <Text
-                                            variant='h4'
-                                            className='text-theme-black leading-[75%]!'
-                                            style={{ fontVariant: 'all-small-caps' }}
-                                        >
+                                        <Text variant='h4'>{activeSchedule ? activeSchedule.courses.length : 0}</Text>
+                                        <Text variant='h4' style={{ fontVariant: 'all-small-caps' }}>
                                             {activeSchedule.courses.length === 1 ? 'Course' : 'Courses'}
                                         </Text>
                                     </div>
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index 4348accd1..27c659810 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -21,33 +21,33 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='block min-w-full w-0 items-center gap-2.5 whitespace-nowrap'>
+        <div className='min-w-full w-0 items-center whitespace-nowrap'>
             <Text className='truncate text-ut-burntorange' variant='h1' as='span' style={{ textTransform: 'none' }}>
                 {`${scheduleName}`}
             </Text>
             <br />
             <div className='flex flex-row items-center gap-2.5 text-theme-black'>
                 <div className='flex flex-row items-center gap-1.25 text-theme-black'>
-                    <Text variant='h3' as='span' className='hidden capitalize screenshot:inline sm:inline'>
+                    <Text variant='h3' as='span' className='capitalize screenshot:inline sm:inline'>
                         {totalHours}
                     </Text>
                     <Text
                         variant='h3'
                         as='span'
-                        className='hidden capitalize screenshot:inline sm:inline'
+                        className='capitalize screenshot:inline sm:inline'
                         style={{ fontVariant: 'all-small-caps' }}
                     >
                         {totalHours === 1 ? 'Hour' : 'Hours'}
                     </Text>
                 </div>
                 <div className='flex flex-row items-center gap-1.25 text-theme-black'>
-                    <Text variant='h3' as='span' className='hidden capitalize screenshot:inline sm:inline'>
+                    <Text variant='h3' as='span' className='capitalize screenshot:inline sm:inline'>
                         {totalCourses}
                     </Text>
                     <Text
                         variant='h3'
                         as='span'
-                        className='hidden capitalize screenshot:inline sm:inline'
+                        className='capitalize screenshot:inline sm:inline'
                         style={{ fontVariant: 'all-small-caps' }}
                     >
                         {totalCourses === 1 ? 'Course' : 'Courses'}

From 77ee74735534b160a94e6770ea9b453efa879177 Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Tue, 5 Nov 2024 20:24:22 -0600
Subject: [PATCH 11/13] refactor: reduced spacing in popup

---
 src/views/components/common/ScheduleDropdown.tsx             | 2 +-
 src/views/components/common/ScheduleTotalHoursAndCourses.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
index 183bedbc3..523b61c48 100644
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -30,7 +30,7 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                                 <Text
                                     as='div'
                                     variant='h3'
-                                    className='mb-1 w-100% text-ut-burntorange'
+                                    className='w-100% text-ut-burntorange'
                                     style={{ textTransform: 'none' }}
                                 >
                                     {activeSchedule ? activeSchedule.name : 'Schedule'}
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index 27c659810..876214f19 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -25,7 +25,6 @@ export default function ScheduleTotalHoursAndCourses({
             <Text className='truncate text-ut-burntorange' variant='h1' as='span' style={{ textTransform: 'none' }}>
                 {`${scheduleName}`}
             </Text>
-            <br />
             <div className='flex flex-row items-center gap-2.5 text-theme-black'>
                 <div className='flex flex-row items-center gap-1.25 text-theme-black'>
                     <Text variant='h3' as='span' className='capitalize screenshot:inline sm:inline'>

From 1763598da025693c59c26f8ecad48540d3e1609f Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Mon, 11 Nov 2024 23:33:03 -0600
Subject: [PATCH 12/13] refactor: updated unocss for small-caps configuration

---
 src/views/components/common/ScheduleDropdown.tsx      | 11 +++--------
 .../common/ScheduleTotalHoursAndCourses.tsx           | 10 ++++------
 src/views/components/settings/Settings.tsx            |  1 -
 unocss.config.ts                                      |  1 +
 4 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
index 523b61c48..73a10c84e 100644
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -27,24 +27,19 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                     <>
                         <DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
                             <div className='flex-1'>
-                                <Text
-                                    as='div'
-                                    variant='h3'
-                                    className='w-100% text-ut-burntorange'
-                                    style={{ textTransform: 'none' }}
-                                >
+                                <Text as='div' variant='h3' className='w-100% text-ut-burntorange normal-case!'>
                                     {activeSchedule ? activeSchedule.name : 'Schedule'}
                                 </Text>
                                 <div className='flex gap-2.5 text-theme-black leading-[75%]!'>
                                     <div className='flex gap-1.25'>
                                         <Text variant='h4'>{activeSchedule ? activeSchedule.hours : 0}</Text>
-                                        <Text variant='h4' style={{ fontVariant: 'all-small-caps' }}>
+                                        <Text className='font-all-small-caps!' variant='h4'>
                                             {activeSchedule.hours === 1 ? 'Hour' : 'Hours'}
                                         </Text>
                                     </div>
                                     <div className='flex gap-1.25'>
                                         <Text variant='h4'>{activeSchedule ? activeSchedule.courses.length : 0}</Text>
-                                        <Text variant='h4' style={{ fontVariant: 'all-small-caps' }}>
+                                        <Text className='font-all-small-caps!' variant='h4'>
                                             {activeSchedule.courses.length === 1 ? 'Course' : 'Courses'}
                                         </Text>
                                     </div>
diff --git a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
index 876214f19..af6b509e6 100644
--- a/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses.tsx
@@ -22,8 +22,8 @@ export default function ScheduleTotalHoursAndCourses({
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
         <div className='min-w-full w-0 items-center whitespace-nowrap'>
-            <Text className='truncate text-ut-burntorange' variant='h1' as='span' style={{ textTransform: 'none' }}>
-                {`${scheduleName}`}
+            <Text className='truncate text-ut-burntorange normal-case!' variant='h1' as='span'>
+                {scheduleName}
             </Text>
             <div className='flex flex-row items-center gap-2.5 text-theme-black'>
                 <div className='flex flex-row items-center gap-1.25 text-theme-black'>
@@ -33,8 +33,7 @@ export default function ScheduleTotalHoursAndCourses({
                     <Text
                         variant='h3'
                         as='span'
-                        className='capitalize screenshot:inline sm:inline'
-                        style={{ fontVariant: 'all-small-caps' }}
+                        className='font-all-small-caps! capitalize screenshot:inline sm:inline'
                     >
                         {totalHours === 1 ? 'Hour' : 'Hours'}
                     </Text>
@@ -46,8 +45,7 @@ export default function ScheduleTotalHoursAndCourses({
                     <Text
                         variant='h3'
                         as='span'
-                        className='capitalize screenshot:inline sm:inline'
-                        style={{ fontVariant: 'all-small-caps' }}
+                        className='font-all-small-caps! capitalize screenshot:inline sm:inline'
                     >
                         {totalCourses === 1 ? 'Course' : 'Courses'}
                     </Text>
diff --git a/src/views/components/settings/Settings.tsx b/src/views/components/settings/Settings.tsx
index cefd4362d..66418853b 100644
--- a/src/views/components/settings/Settings.tsx
+++ b/src/views/components/settings/Settings.tsx
@@ -421,7 +421,6 @@ export default function Settings(): JSX.Element {
                             </div>
                             {DISPLAY_PREVIEWS && (
                                 <Preview>
-                                    <div className='inline-flex items-center self-center gap-1' />
                                     <Text
                                         variant='h2-course'
                                         className={clsx('text-center text-theme-red !font-normal', {
diff --git a/unocss.config.ts b/unocss.config.ts
index 2221da017..9a4206bfd 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -18,6 +18,7 @@ export default defineConfig({
                 '--un-ring-offset-width': '0px',
             },
         ],
+        ['font-all-small-caps', { 'font-variant-caps': 'all-small-caps' }],
     ],
     shortcuts: {
         focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4',

From fd3c9f0d8eddcac8263cafe2b670f2719fd88f1f Mon Sep 17 00:00:00 2001
From: Warith Rahman <warithr21@gmail.com>
Date: Mon, 11 Nov 2024 23:58:23 -0600
Subject: [PATCH 13/13] style: changed variant + className order

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

diff --git a/src/views/components/common/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
index 73a10c84e..cb28ba137 100644
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -33,13 +33,13 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                                 <div className='flex gap-2.5 text-theme-black leading-[75%]!'>
                                     <div className='flex gap-1.25'>
                                         <Text variant='h4'>{activeSchedule ? activeSchedule.hours : 0}</Text>
-                                        <Text className='font-all-small-caps!' variant='h4'>
+                                        <Text variant='h4' className='font-all-small-caps!'>
                                             {activeSchedule.hours === 1 ? 'Hour' : 'Hours'}
                                         </Text>
                                     </div>
                                     <div className='flex gap-1.25'>
                                         <Text variant='h4'>{activeSchedule ? activeSchedule.courses.length : 0}</Text>
-                                        <Text className='font-all-small-caps!' variant='h4'>
+                                        <Text variant='h4' className='font-all-small-caps!'>
                                             {activeSchedule.courses.length === 1 ? 'Course' : 'Courses'}
                                         </Text>
                                     </div>