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 <razboy20@gmail.com>
Co-authored-by: Samuel Gunter <sgunter@utexas.edu>
Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Warith Rahman
2024-11-21 20:56:56 -06:00
committed by GitHub
parent 7dbffc6eef
commit 7dd93690d6
9 changed files with 76 additions and 44 deletions

View File

@@ -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';

View File

@@ -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>
);