feat(ui): Modify Calendar Footer design and Unscheduled courses (#503)

* feat: update styling and text for unscheduled courses in footer

* refactor: correct offwhite theme colors

* fix(ui): adjust em dash spacing, footer bottom padding, and vertically align course text

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Ethan Lanting
2025-02-13 13:09:40 -06:00
committed by GitHub
parent 846070ebb5
commit b171f01d01
6 changed files with 11 additions and 12 deletions

View File

@@ -65,7 +65,7 @@ export default function Calendar(): JSX.Element {
<div className='h-screen flex overflow-auto'>
<div
className={clsx(
'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-theme-offwhite1 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-theme-offwhite/50 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
{
'max-w-[20.3125rem] ': showSidebar,
'max-w-0 pointer-events-none': !showSidebar,

View File

@@ -23,18 +23,18 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
const displayCourses = asyncCourseCells && asyncCourseCells.length > 0;
return (
<div className='w-full flex py-1.25 pl-7.5 pr-6.25'>
<div className='w-full flex pl-spacing-7 pr-spacing-3 pt-spacing-4'>
<div
className={clsx('flex flex-grow items-center gap-3.75 text-nowrap', {
className={clsx('flex flex-grow items-center gap-1 text-nowrap', {
'py-7.5': !displayCourses,
})}
>
{displayCourses && (
<>
<Text variant='p' className='text-ut-black'>
ASYNC / OTHER
<Text variant='p' className='text-ut-black uppercase'>
Unscheduled
</Text>
<Text variant='h4' className='text-gray-300'>
<Text variant='h4' className='text-theme-offwhite/50'>
</Text>
<div className='inline-flex gap-2.5'>
@@ -46,7 +46,7 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
courseDeptAndInstr={courseDeptAndInstr}
status={status}
key={courseDeptAndInstr}
className={clsx(className, 'w-35! h-15!')}
className={clsx(className, 'w-35! h-12.5! items-center')}
onClick={() => setCourse(block.course)}
blockData={block}
/>