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
GitHub
@@ -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';
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
@@ -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 />}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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', {
|
||||
|
||||
Reference in New Issue
Block a user