Plus Button and Menu #9
Conversation
… need to stand out against the blurred and darkened background when the menu is open.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| } | ||
| }) | ||
| }); | ||
| }, [plusButtonMenuState]); |
There was a problem hiding this comment.
React Hook useEffect has missing dependencies
| /> | ||
| </motion.div> | ||
| {plusButtonMenuState == PlusButtonMenuState.QUESTION_MARK_SELECTED && ( | ||
| <div className="btn-shadow-dark fixed inset-x-[21px] bottom-[227px] top-[21px] bg-white rounded-lg shadow-lg overflow-auto z-50"> |
There was a problem hiding this comment.
Can we use built-in Tailwind classes instead of fixed number of pixels?
There was a problem hiding this comment.
Same for other places we use fixed number of pixels
There was a problem hiding this comment.
Or maybe use rem instead of px
There was a problem hiding this comment.
Okk, I realized what is going on now. Good job on making it "pixel perfect"! But maybe we need to talk to the design team so the spaces are multiples of 4 for the Tailwind classes...
| const handleClick = () => { | ||
| if (plusButtonMenuState == PlusButtonMenuState.USER_SELECTED) { | ||
| setPlusButtonMenuState(PlusButtonMenuState.OPEN); | ||
| return; |
| /> | ||
| </motion.div> | ||
| {plusButtonMenuState == PlusButtonMenuState.QUESTION_MARK_SELECTED && ( | ||
| <div className="btn-shadow-dark fixed inset-x-[21px] bottom-[227px] top-[21px] bg-white rounded-lg shadow-lg overflow-auto z-50"> |
There was a problem hiding this comment.
Or maybe use rem instead of px
|
Need to be reformatted with prettier or biome. |
|
Might be worth it to make an |
| className={(plusButtonMenuState == PlusButtonMenuState.CLOSED ? "" : "btn-shadow-dark ") + "fixed flex right-3 bottom-3 sm:right-3.5 sm:bottom-3.5 rounded-full z-50"} | ||
| > | ||
|
|
||
| <div ref={userButtonRef} className="absolute right-[4px] -z-10 opacity-0 pointer-events-none z-50"> |
There was a problem hiding this comment.
'-z-10' applies the same CSS properties as 'z-50'.(cssConflict)
…matted IconsDisplay.tsx
Plus Button with expanding menu with button for user settings and placeholders for About CMUMaps and Schedule.
Spacing of menu and darkness of shadows has been adjusted to more closely align with the design in Figma.