fix: place hours and courses under schedule name (#388)

* fix(header): bottom-aligned the schedule name + hours/courses in calendar * feat: updated font style in header and dropdown * 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.. * feat(header): added icons to cal header WORK IN PROGRESS * style: updated layout of header and main popup * fix: updated font and spacing for header and popup * 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 * refactor: changed size for calendar header * refactor: changed ut-black to theme-black * refactor: remove hiding on small window sizes * refactor: reduced spacing in popup * refactor: updated unocss for small-caps configuration * style: changed variant + className order * fix: readded update time text * style: auto formatter, unused imports, capitalization --------- Co-authored-by: Razboy20 <[email protected]> Co-authored-by: Samuel Gunter <[email protected]> Co-authored-by: doprz <[email protected]>
Longhorn-Developers · Nov 22, 2024 · 7dd9369 · 7dd9369
1 parent 7dbffc6
commit 7dd9369
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 44 deletions.
diff --git 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.4",
         "@iconify-json/material-symbols": "^1.2.6",
         "@iconify-json/ri": "^1.2.3",
+        "@iconify-json/streamline": "^1.2.1",
         "@semantic-release/exec": "^6.0.3",
         "@sentry/types": "^8.38.0",
         "@storybook/addon-designs": "^8.0.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git 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
@@ -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/...ws/components/calendar/CalenderHeader.tsx → ...ws/components/calendar/CalendarHeader.tsx b/...ws/components/calendar/CalenderHeader.tsx → ...ws/components/calendar/CalendarHeader.tsx
@@ -4,9 +4,7 @@ import CourseStatus from '@views/components/common/CourseStatus';
 import Divider from '@views/components/common/Divider';
 import { LargeLogo } from '@views/components/common/LogoIcon';
 import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses';
-import Text from '@views/components/common/Text/Text';
 import useSchedules from '@views/hooks/useSchedules';
-import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
 import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import React, { useEffect, useState } from 'react';
 
@@ -33,7 +31,7 @@ interface CalendarHeaderProps {
  */
 export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps): JSX.Element {
     const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
-    const [enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
+    const [_enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
 
     const [activeSchedule] = useSchedules();
 
@@ -76,16 +74,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 && (
@@ -98,7 +86,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/ScheduleDropdown.tsx b/src/views/components/common/ScheduleDropdown.tsx
@@ -27,17 +27,23 @@ 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'>
-                                    {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
+                                <Text as='div' variant='h3' className='w-100% text-ut-burntorange normal-case!'>
+                                    {activeSchedule ? activeSchedule.name : 'Schedule'}
                                 </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%]!'>
-                                        {activeSchedule ? activeSchedule.courses.length : 0} Courses
-                                    </Text>
-                                </p>
+                                <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' 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 variant='h4' className='font-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
@@ -24,16 +24,36 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-full w-0 flex items-center 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'>
-                {totalHours} {totalHours === 1 ? 'Hour' : 'Hours'}
-                <Text variant='h4' as='span' className='hidden capitalize screenshot:inline sm:inline'>
-                    {totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}
-                </Text>
+        <div className='min-w-full w-0 items-center whitespace-nowrap'>
+            <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'>
+                    <Text variant='h3' as='span' className='capitalize screenshot:inline sm:inline'>
+                        {totalHours}
+                    </Text>
+                    <Text
+                        variant='h3'
+                        as='span'
+                        className='capitalize screenshot:inline sm:inline font-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='capitalize screenshot:inline sm:inline'>
+                        {totalCourses}
+                    </Text>
+                    <Text
+                        variant='h3'
+                        as='span'
+                        className='capitalize screenshot:inline sm:inline font-all-small-caps!'
+                    >
+                        {totalCourses === 1 ? 'COURSE' : 'COURSES'}
+                    </Text>
+                </div>
+            </div>
         </div>
     );
 }
diff --git a/src/views/components/settings/Settings.tsx b/src/views/components/settings/Settings.tsx
@@ -3,7 +3,6 @@ import { addCourseByURL } from '@pages/background/lib/addCourseByURL';
 import { deleteAllSchedules } from '@pages/background/lib/deleteSchedule';
 import exportSchedule from '@pages/background/lib/exportSchedule';
 import importSchedule from '@pages/background/lib/importSchedule';
-import { background } from '@shared/messages';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import { downloadBlob } from '@shared/util/downloadBlob';
@@ -23,7 +22,6 @@ import useSchedules from '@views/hooks/useSchedules';
 // import getCourseTableRows from '@views/lib/getCourseTableRows';
 import { GitHubStatsService, LONGHORN_DEVELOPERS_ADMINS, LONGHORN_DEVELOPERS_SWE } from '@views/lib/getGitHubStats';
 // import { SiteSupport } from '@views/lib/getSiteSupport';
-import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useState } from 'react';
 
@@ -454,11 +452,6 @@ 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>
                                     <Text
                                         variant='h2-course'
                                         className={clsx('text-center text-theme-red !font-normal', {

diff --git a/unocss.config.ts b/unocss.config.ts
@@ -10,14 +10,18 @@ export default defineConfig({
     rules: [
         [
             'btn-transition',
-            { transition: 'color 180ms ease-in, border-color 150ms ease-in, background-color 150ms ease-in, box-shadow 200ms ease-in, transform 50ms ease-in' }
+            {
+                transition:
+                    'color 180ms ease-in, border-color 150ms ease-in, background-color 150ms ease-in, box-shadow 200ms ease-in, transform 50ms ease-in',
+            },
         ],
         [
             'ring-offset-0',
             {
                 '--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',