style: use tailwind for Dedication#1543
Conversation
…ion effects - Added state management for dialog visibility using useState. - Implemented open and close functions to handle dialog display. - Enhanced dialog transitions with CSS for smoother appearance and disappearance. - Updated hotkey handling for closing the dialog with escape and toggling with ctrl+shift+0. - Improved accessibility by preventing default behavior on dialog cancel events.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| if (!isVisible) { | ||
| dialogRef.current?.close(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Bubbled transitionend events may close dialog prematurely
Medium Severity
handleTransitionEnd doesn't check whether the transitionend event originated from the <dialog> itself or bubbled up from a child. The inner content div has transition-transform duration-300 and the close button has transition-[filter] duration-200. When closing, these child transitionend events bubble to the dialog and trigger dialogRef.current?.close(). The close button's 200ms filter transition can fire 100ms before the dialog's 300ms opacity transition completes, causing the dialog to snap closed abruptly instead of smoothly fading out. Comparing e.target to e.currentTarget would prevent reacting to bubbled events.
Additional Locations (1)
| import { useRef, useState } from "react"; | ||
| import { useHotkeys } from "react-hotkeys-hook"; | ||
| import Modal from "react-modal"; | ||
| import { XIcon } from "@phosphor-icons/react"; |
There was a problem hiding this comment.
Removed last consumer of StyledXIcon, leaving dead code
Low Severity
The old Dedication.tsx was the only consumer of StyledXIcon from @web/components/Icons/X.tsx. By replacing it with XIcon from @phosphor-icons/react, the entire X.tsx file becomes dead code — it exports StyledXIcon which is no longer imported anywhere in the codebase.
1 participant
Note
Low Risk
Low risk UI-only change that swaps the modal implementation and styling; main risk is behavioral/accessibility differences in focus management and
<dialog>browser quirks.Overview
Reworks the
Dedicationoverlay to use a native<dialog>with Tailwind classes and@phosphor-icons/reactfor the close icon, including explicit open/close + transition handling andEscapekey support.Removes
react-modal(and its transitive deps) frompackage.json/yarn.lock, deletes the oldstyled-componentsstyles and barrel export, and updates imports inCalendarViewandDayViewContentto point directly atDedication/Dedication.Written by Cursor Bugbot for commit 956357b. This will update automatically on new commits. Configure here.