Changed the success toast to reflect Lazim's design

[namanhboi]

Summary

Changed the design of the success toast to match this design. You click on continue or the X to close the toast.

Locations.-.Carriage.-.Google.Chrome.2024-04-14.12-41-08.mp4

I just changed the design of the toast, so to make a toast appear, you just need to use showToast from useToast in toastContext just like before.

Note that the success modal will stay open even if you switch into a different page. I don't know if this is the intended behavior, but I can change it upon request.

Also, in the file AuthManager.tsx, Toast was used directly, which I don't think is correct since we have toastContext which manages all the calling of the toasts. I changed the code to use toastContext and it compiled but I don't know how to see the changes made in the frontend.

Test Plan

I tested the success modal when adding new employees and locations, but I wasn't able to add students for some reason so I haven't been able to test it on that.

I tried it on different screen sizes and on small screens:

The modal is too big, so I would need to do a media export in the future.

[dti-github-bot]

[diff-counting] Significant lines: 194.

[Atikpui007]

Overall a pretty good PR. I left a couple of comments that should be addressed. Also the expected behavior of modals and by extension this success/ failure toast should be that when any other part of the page is clicked it goes away.

[namanhboi]

I was able to implement what you suggested and now everthing outside the success modal is unclickable. However, I couldn't figure out a way to make the outside unscrollable.