Enhanced visual feedback for "Mark me as done"

[SelinaBuff]

Ticket: Enhanced visual feedback for "Mark me as done"

Description:

Some users are still unclear about when they should mark themselves as "done." Therefore, we need to add visual feedback for two use cases (Timer and Voting) in addition to the wobbling pill. This enhancement aims to provide clearer guidance and reduce user confusion about when to mark themselves as "done." Consistency in visual feedback across different functionalities (Timer and Voting) is crucial for a seamless user experience.

Acceptance Criteria:

Timer Ends:

• When the timer expires, emits a sound, and starts wobbling, the "Mark me as done" option should automatically open in the left user menu with a 2-second delay.
• This option should remain open until the user marks themselves as "done" either through the left user menu or within the timer pill (see screenshot).
• Additionally, the timer should automatically close 30 seconds after expiring (including the "Mark me as done" option). All users who have not marked themselves as "done" by then will be automatically marked as "done."

Voting Session:

• Once a user has submitted all their votes and the pill starts wobbling, the "Mark me as done" option should automatically open in the left user menu with a 2-second delay.
• This option should remain open until the user marks themselves as "done" either through the left user menu or within the timer pill (see screenshot).

Technical Requirements:

1. Implement a function that triggers the opening of the "Mark me as done" option with a 2-second delay after the timer expires or the voting session ends.
2. Ensure the "Mark me as done" option remains open until the user marks themselves as "done."
3. Implement a feature that automatically closes the timer and the "Mark me as done" option 30 seconds after the timer expires, marking all users who haven't done so as "done."
4. Ensure the visual feedback and interaction are consistent with the design shown in the provided screenshot.