Is your feature request related to a problem? Please describe.
Implement a component in the Shelter Dashboard to display complete details for each shift. Shelter staff need a way to view and manage specific details for shifts, including the ability to request more volunteers, close sign-ups, or delete a shift request.
Describe the solution you'd like
Implement styling to display detailed information for each shift when the More Details button is clicked. This styling should include:
Shift Start Time and Shift End Time, Requested Volunteers (total number of volunteers needed for the shift), Signed Up Volunteers (number of volunteers currently signed up), Required Volunteers (calculated as the difference between requested and signed-up volunteers) into the styled cards
Add the arrow next to Signed Up Volunteers
Style buttons according to the below picture
Add arrow to popover
Implement the sizing and layout of the popover
Acceptance Criteria:
[ ] The component should display all relevant shift details (start time, end time, requested/signed-up/required volunteers) in a clean, organized card format.
[ ] The "Signed Up Volunteers" section should have a functional expand/collapse arrow.
[ ] The action buttons (request more volunteers, close sign-ups, delete shift request) should be styled according to the provided design.
[ ] The popover should be correctly sized, aligned, and include an arrow pointing to the associated element.
[ ] All UI elements should be responsive and work across different screen sizes, including mobile.
[ ] The component should be accessible, following ARIA guidelines.
Is your feature request related to a problem? Please describe. Implement a component in the Shelter Dashboard to display complete details for each shift. Shelter staff need a way to view and manage specific details for shifts, including the ability to request more volunteers, close sign-ups, or delete a shift request.
Describe the solution you'd like Implement styling to display detailed information for each shift when the More Details button is clicked. This styling should include:
Acceptance Criteria: