feat: changing pop-over x button for hover :) and adding padding to the popover to make it more visible

[Priyansh4444]

Summary

Making the UX just a bit better by creating a transition for the hover on the button

Test Plan

Running the frontend

Issues

• Currently the 4th item on the path goes a bit too left on the screen
• Some steps also go a bit off the page

Closes #1011

[MinhxNguyen7]

Thanks for your contribution!

Code-wise, the button should not be defined with the router; that just doesn't make logical sense. it should go in components/buttons. Also, since we drink the MUI Kool-Aid, we shouldn't have to implement such a simple button. Take a look at this. We should be able to just define the button in-line with some customization. Do say though, if that is not fit-for-purpose.

I have a few things to ask in terms of documentation. These are somewhat matters of pedantry, but I think it's important to maintain standards.

Could you please give more information on the test plan? Yes, we run the front end, but what should we expect to see? You also say that there are some problems. Was that introduced by this PR, or was it there before? If the former is the case, why can't it be addressed? If the latter is the case, you should put that in a "Future Follow-Up" section and add it as an issue.

Also, the "Issues" section is for related GitHub issues. The issues that you have there should go in the summary.

[Priyansh4444]

Thank you for the feedback I will keep this in mind going on when I contribute to other repositories as well!
I think it is fit to make its own component for the button.
There are two ways to edit the button, either by adding it as a component in styles or making a react functional component for it.

I think the MUI button is the best way to approach the matter since the onHover Effect then can be achieved!
though another solution could potentially be manaully taking the .react__tour_close class and adding it to App.css

I am still a bit unsure, how to test frontend other than visually, but in terms of expected result having the tourguide is partially going out of bounds of the screen and therefore cannot be seen I am unsure how to control where the tourguide goes.
The problems I mentioned happens before the PR as well. I will try and fix these issues when I get a bit more time since currently I am a bit busy!

Future Follow Up:

• Fixing the TourGuide So it does not go out of bounds
• Making the 4th step of the tour guide happen to the right of the calendar instead of left (it was on the right before the PR)