feat(ui): calendar sidebar redesign (#464)
* feat: update calendar sidebar, footer, and header with Figma design * chore: run lint * feat: update header with Figma design * chore: run lint * chore: remove unused vars * chore: fix types * fix: adjust sidebar minimum width * fix: update LogoIcon layout to ensure text is always displayed * feat: add spacing constants * fix: add sidebar styling with spacing system and sticky header * fix: update spacing constants to use rem units * refactor: replace padding with spacing system and colors with UTRP theme * refactor: rename ImportantLinks to ResourceLinks * refactor: simplify CalendarHeader button component by using icon prop * feat: add sidebar open and close transition * refactor: rename unused var * fix: update social icon color * feat: improve layout and spacing in calendar components * refactor: remove unused GearSix icon and options handler * feat: update calendar components with new icons and improved spacing * fix: correct class name * refactor: organize social links into array and update link styling * refactor: remove unused import * fix: adjust gap spacing in radio button * fix: update divider component to use theme offwhite1 * fix: increase size of outward arrow icon * feat: add getSpacingInPx function to convert rem to pixels * fix: update gap spacing in CalendarSchedules component to use spacing system * fix: rollback footer social icons to original icons * fix: update Calendar styles to use theme offwhite1 and adjust padding to account for scrollbar * fix: update LargeLogo component to use gap-spacing-3 * fix: update button variants to 'minimal' and adjust styles for consistency * fix: adjust padding in Calendar component for better layout consistency * fix: increase size of arrow icon * fix: add shrink-0 to radio buttons
This commit is contained in:
Ethan
GitHub
@@ -41,7 +41,7 @@ export default function Divider({ className, testId, size, orientation }: Divide
|
||||
<div
|
||||
style={style}
|
||||
data-testid={testId}
|
||||
className={clsx('border-solid border-ut-offwhite w-0 h-0', className)}
|
||||
className={clsx('border-solid border-theme-offwhite1 w-0 h-0', className)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -54,9 +54,9 @@ export function SmallLogo({ className }: LogoIconProps): JSX.Element {
|
||||
*/
|
||||
export function LargeLogo({ className }: LogoIconProps): JSX.Element {
|
||||
return (
|
||||
<div className={clsx('flex items-center gap-2', className)}>
|
||||
<div className={clsx('flex items-center gap-spacing-3', className)}>
|
||||
<LogoIcon className='h-12 w-12' />
|
||||
<div className='mt-1 hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex'>
|
||||
<div className='mt-1 flex flex-col text-[1.35rem] font-medium leading-[1em] screenshot:flex'>
|
||||
<p className='text-nowrap text-ut-burntorange'>UT Registration</p>
|
||||
<p className='text-ut-burntorange'>
|
||||
Plus{' '}
|
||||
|
||||
@@ -92,23 +92,27 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='rounded bg-white'>
|
||||
<li className='w-full flex cursor-pointer items-center text-ut-burntorange'>
|
||||
<div className='h-full cursor-move focusable' {...dragHandleProps}>
|
||||
<div className='h-7.5 rounded bg-white'>
|
||||
<li className='h-full w-full flex cursor-pointer items-center gap-[1px] text-ut-burntorange'>
|
||||
<div className='flex cursor-move items-center justify-center focusable' {...dragHandleProps}>
|
||||
<DotsSixVertical
|
||||
weight='bold'
|
||||
className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='group relative flex flex-1 items-center overflow-x-hidden'>
|
||||
<div
|
||||
className='group/circle flex flex-grow items-center gap-1.5 overflow-x-hidden'
|
||||
className='group/circle flex flex-grow items-center gap-spacing-3 overflow-x-hidden'
|
||||
onClick={(...e) => !isEditing && onClick?.(...e)}
|
||||
>
|
||||
{isActive ? (
|
||||
<RadioButton className='h-7.5 w-7.5 btn-transition active:scale-95' weight='fill' />
|
||||
<RadioButton
|
||||
className='h-7.5 w-7.5 shrink-0 btn-transition active:scale-95'
|
||||
weight='fill'
|
||||
/>
|
||||
) : (
|
||||
<Circle className='h-7.5 w-7.5 btn-transition active:scale-95' />
|
||||
<Circle className='h-7.5 w-7.5 shrink-0 btn-transition active:scale-95' />
|
||||
)}
|
||||
{isEditing && (
|
||||
<Text
|
||||
|
||||
@@ -24,36 +24,19 @@ export default function ScheduleTotalHoursAndCourses({
|
||||
totalCourses,
|
||||
}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
|
||||
return (
|
||||
<div className='min-w-full w-0 items-center whitespace-nowrap'>
|
||||
<Text className='truncate text-ut-burntorange normal-case!' variant='h1' as='span'>
|
||||
{scheduleName}
|
||||
<div className='min-w-full flex flex-col items-start whitespace-nowrap'>
|
||||
<Text className='truncate text-ut-burntorange' variant='h1' as='span'>
|
||||
{`${scheduleName} `}
|
||||
</Text>
|
||||
<Text variant='h3' as='div' className='flex flex-row items-center gap-2.5 text-theme-black'>
|
||||
<Text variant='h4' as='span' className='hidden text-ut-black uppercase screenshot:inline sm:inline'>
|
||||
{totalHours} {totalHours === 1 ? 'Hour' : 'Hours'}
|
||||
</Text>
|
||||
|
||||
<Text variant='h4' as='span' className='hidden text-ut-black uppercase screenshot:inline sm:inline'>
|
||||
{totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}
|
||||
</Text>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user