Refactor Modal component

## Basic Information
Refactor the modal component from #34

Known issues with it:
- Inconsistent `CSS` making it look weird (main issue)
- Ugly placement of scrollbar when there's an overflow
- The source code being a bit spaghetti with lots of nested `div`s and `Tailwind CSS` styling
- The exit button for the modal might be too small or too big depending on modal size
- Content (specifically forms) looking weird on it. Although this might be an issue with the forms instead of the modal

Ideas on how to fix:
- Might be better to separate the modal component by different sizes,
- Or find a nice way to specify sizes in its props

## Other Information
The Modal is being used in the following pages (that I know of):
- Admin volunteers page -> Adding/Removing repairers from events
- Admin repair-requests page -> Adding/Viewing repair-requests
- Repairers' page for viewing repair-requests -> Editing repair-requests

The modal is mainly used for displaying forms

Locate the Modal component and inspect its uses on the admin volunteers, admin repair-requests, and repairers' repair-requests pages. Review the current CSS, nested div structure, sizing behavior, scrollbar placement, exit button, and form presentation; done means the modal has a consistent, agreed sizing approach and no longer exhibits the listed visual issues.

Written by the indexing model from the issue text.