Add an "X" button that closes Add Event Form modal

[isaaclee12]

Intro

This issue has been opened specifically to give 100Devs members a chance to get involved. The issues presented will have more instruction and be easier to solve. If you are already contributing to this project or your skills are well-ahead of this issue, consider letting someone else take this on!

Summary

Currently, the Add Event Form modal (i.e. popup) can only be closed by clicking outside of it. It could use an "X" button in the to make closing the modal more intuitive.

The Task

• Work with the design team to come up with how the "X" button should look.
• Implement the "X" button be in the top right, overlaying the form.
• Make the form modal close upon clicking the "X" button. The behavior should be the same as when you click outside the modal.

Creating your branch

• Fork the Together repository.
• Navigate to the development branch using git checkout development.
• Create a new branch using git checkout -b your-branch-name-here.
• If you have questions, more instructions about this can be found in our contributing document.

Setting up a local server

• Execute npm install
• Execute npm run dev-concurrent in a vscode terminal.
• If you get errors, you may have to do one of the following:
• Delete your node_modules folder and then run npm i
• Make sure you have a .env file with the necessary secrets

When you are done

-Use git add . and then git commit -m 'add a descriptive commit message here' to commit your changes to your local branch.
-Push your commit(s) using git push.
-Open your fork in github and you will see a message saying you can create a pull request. Make sure your pull request is pulling into the 'development' branch instead of 'main'.

Other Info

Who to contact

If you have any questions, you can either send a message in the Together channel in 100Devs Discord or contact (put your name or contact info here).

Relevant file locations

The files for the Add Event Form can be found in client/src/features/form/
The files for the Modal can be found in client/src/features/modal/

Potential Problems

This is a little more of an intermediate First Try issue, so if you get lost, don't hesitate to ask around in the #Together thread in #general in the Discord.

If you're interested in working on this feature, please comment so you can be assigned

[jaesalaski]

Please assign me this issue -- I will follow-up in the thread.

[colinborows]

@jsalaski send me a DM - @intelagense please assign

[Caleb-Cohen]

Howdy @jsalaski and @colinborows - are you able to provide an update?

[jaesalaski]

@colinborows and I have not connected --
I intend to get to this by standup on 2/14.
Feel free to reassign if that does not meet the project's timeline.

[Caleb-Cohen]

Thank you, please proceed!

[jaesalaski]

We are still connecting on this one -- it'll get done!
EDIT: should be done -- needs styling. Could open an issue to create a CloseButton component.