Accordion design 1453

[jjijon7000]

Issue Description

Fixes #1453

• fixes the dropdown form in the 'My Profile' page
• The items should be consolidated into the larger accordion.
• Items were originally in a dropdown form in the top right of the page, this caused issues since the users were not able to find certain actions.
• Some accordions needed to be changed to hold some of the actions

Changes

• these changes were to the userProfile.html file
• the 'Choose an Action' form has been scrapped, and the actions have been integrated into the accordions
• 'Edit Volunteer Information' accordion was added to hold some of the actions that dealt with editing the user's info
• 'Dietary Restrictions' accordion was removed and integrated with the 'Edit Volunteer Information' accordion for a more visually appealing page
• The 'Print Travel Form' action was converted to a button in the 'Upcoming Events' accordion
• The 'View Service Transcript' and 'Manage CCE Minor' actions were also converted to buttons and are now placed in the 'Participation History' accordion.
• The 'Phone Number' action that was originally in the top with the rest of the User's info was moved into the new 'Edit Volunteer Information' accordion
• The 'Phone Number' edit/save button was changed to an icon
• The base.js file was changed to handle the new 'Phone Number' edit/save icons

Testing

Before

After

• run flask
• go to 'My Profile'
• click 'Edit Volunteer Information'
• enter a phone number to ensure that the edit/save button icons work
• click 'Edit Emergency Contact' to ensure that it redirects to the Emergency Contact Link
• click 'Edit Insurance Information' to ensure that it redirects to the Edit Insurance Information Link
• Add any dietary restrictions to ensure that they save even after a refresh of the page
• Click 'Upcoming Events' and click 'Print Travel Form' to ensure that it redirects to the Travel Form
• Click 'Participation History' and click 'View Service Transcript' and 'Manage CCE Minor' to ensure that they go to their respective links

[jjijon7000]

Currently redesigning the 'Edit Volunteer Information' accordion into a modal

[Shenderaz]

Currently redesigning the 'Edit Volunteer Information' accordion into a modal

We are done with all the new designs.

[Shenderaz]

We are done with the new designs that Scott suggested.

[Karina-Agliullova]

In your Edit Volunteer Information Modal, there is an issue with Dietary Restrictions. Add a save button so people can save it whenever they input information in that box.

[Karina-Agliullova]

In the first accordion, you are referring to the admin being interested in the minor. This should only be available for students, as they are the ones who can be interested in a minor. If an admin has the ability to indicate interest for a student, then the language should be changed to refer to a student and not to an admin

[BrianRamsay]

The buttons should be a consistent color. Right now we are using blue, gray, and yellow. Maybe all Yellow? That's generally our 'action' color that isn't a save, cancel, or main action.

[BrianRamsay]

We need to have the same or similar behavior for dietary restrictions in the modal as the functionality we added in #1516, so that it's clear when a student has no restrictions vs they just haven't looked at it.

[github-actions]

View Code Coverage