feat(ui): calendar header redesign #479
Conversation
doprz
added
wip
feature
UI/UX-figma
There was a problem hiding this comment.
Ensure all gaps/padding is using the new spacing system values from the Figma. See PR #474.
Another note is that the buttons are supposed to be of the minimal variant but that hasnt been implemented yet in a different Issue #470.
Also, does the responsiveness break if we were to add or remove a feature button from the toolbar?
|
|
||
| return ( | ||
| <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'> | ||
| <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite py-5 pl-6 md:overflow-x-hidden'> | ||
| <Button | ||
| variant='single' | ||
| icon={Sidebar} | ||
| color='ut-gray' |
There was a problem hiding this comment.
- Change the button color to
theme-blackfor now (Ethan's Calendar Sidebar PR already has it black too)
There was a problem hiding this comment.
Right now, yes, adding more buttons would break it. I can try to find workarounds, though. I have a few ideas.
| <> | ||
| <LargeLogo className='flex-shrink-0' /> | ||
| <Divider className='mx-2 flex-shrink-0 self-center md:mx-4' size='2.5rem' orientation='vertical' /> | ||
| </> |
There was a problem hiding this comment.
- Since the logo is moved to the calendar sidebar, we can remove it from the header. This divider would also be removed.
| <Button variant='single' icon={RedoIcon} color='ut-black' /> */} | ||
| <Button variant='single' icon={GearSix} color='theme-black' onClick={handleOpenOptions} /> | ||
|
|
||
| <Divider size='2.5rem' orientation='vertical' /> |
There was a problem hiding this comment.
- Change divider height/size to
1.75remand use thetheme-offwhite1color (assuming your color PR is merged in main)
| </Menu> | ||
| </DialogProvider> | ||
| </div> | ||
| <Divider size='2.5rem' orientation='vertical' /> |
There was a problem hiding this comment.
- Change divider height/size to
1.75remand use thetheme-offwhite1color (assuming your color PR is merged in main)
| </> | ||
| )} | ||
|
|
||
| <div className='min-w-0 screenshot:transform-origin-left screenshot:scale-120'> |
There was a problem hiding this comment.
- This container should have a minimm width of
10.9375remto prevent the following overlap:
|
|
||
| return ( | ||
| <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'> | ||
| <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite py-5 pl-6 md:overflow-x-hidden'> |
There was a problem hiding this comment.
- Remove the offwhite border since the toolbar/header will no longer have a bottom border.
…n-Cook/UT-Registration-Plus into modified-calendar-toolbar
Preston-Cook
changed the title
There was a problem hiding this comment.
There is a lot of added dynamic Javascript code to deal with screen sizes, and hiding text. This should be done entirely in CSS by either using media queries (in tailwind) or container queries. Keep in mind that accessibility is also important, so this text should be hidden on displays but still read on screen-readers.
This is a WIP for the modified toolbar on the calendar. I want to get some feedback on the code to see if there's a more efficient way to achieve this. Thanks!
This change is