feat(ui): added shadows to popup buttons and course blocks #378
Conversation
|
Requested Elie's review. It would be nice if all buttons on hover had a better transition tho (bc the shadow is so abrupt) (but that is a general comment not a comment for this PR) |
DereC4
added
the
UI/UX-figma
| @@ -102,7 +102,7 @@ function List<T>({ draggables, itemKey, children, onReordered, gap }: ListProps< | |||
| ); | |||
|
|
|||
| return ( | |||
| <div style={{ overflow: 'hidden' }}> | |||
| <div style={{ overflow: 'clip', overflowClipMargin: `${gap}px` }}> | |||
There was a problem hiding this comment.
What's the reasoning behind this change?
There was a problem hiding this comment.
I mentioned at the end of my PR but the last shadow in the course list was not shown due to the negative bottom margin in the List component and the hiding of the overflow, those two parts essentially cut the shadow from being visible
There was a problem hiding this comment.
I don't think this method is likely the best method but I'm not sure of another way to resolve it, it essentially limits the overflow rather than completely hiding it, such that the shadow can be shown in the gap's clip
| @@ -63,7 +63,7 @@ export default function PopupCourseBlock({ | |||
| backgroundColor: colors.primaryColor, | |||
| }} | |||
| className={clsx( | |||
| 'h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3 focusable cursor-pointer text-left', | |||
| 'h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3 focusable cursor-pointer text-left hover:shadow-md transition-shadow-100 ease-out', | |||
There was a problem hiding this comment.
When dragging a course block, pointer events are not propagated, thus the hover shadow goes away.
Don't remember off the top of my head what the right way is; ping me if you can't figure it out quickly so I can give better advice.
|
help is on the way |
| icon={CalendarIcon} | ||
| /> | ||
| <Button variant='single' color='ut-black' onClick={handleOpenOptions} icon={SettingsIcon} /> | ||
| <Button variant='single' color='ut-black' onClick={handleCalendarOpenOnClick} icon={Feedback} /> |
There was a problem hiding this comment.
This is the feedback button, but the onClick was for the calendar page
| <Button variant='single' color='ut-black' onClick={handleCalendarOpenOnClick} icon={Feedback} /> | |
| <Button variant='single' color='ut-black' onClick={openReportWindow} icon={Feedback} /> |
Resolves #351.
Before:
Screen.Recording.2024-10-21.at.10.25.47.PM.mov
After:
Screen.Recording.2024-10-21.at.10.22.45.PM.mov
Huly®: UTRP-362
This change is