Miscellaneous MUI styling fixes

[Sakelun]

This PR addresses two issues:

• Opening a new project comment warnings  #5
• New outcome/entity is displayed offscreen #7

Testing

1. Prepare your local environment as described in the project's README (package installation, node version selection, etc.)
2. Launch MEME's Admin panel and create a group with two users (to test Comment read styling)
3. Log in with the first user you created.
4. Create some new entities and outcomes. Refresh the page and do the same. Note that they appear on page. This tests the behavior reported in New outcome/entity is displayed offscreen #7.
5. Create a few new comments. Note that there are no warnings in the console when doing so. This tests the behavior reported in Opening a new project comment warnings  #5.
6. Open a separate browser window and log in as the second user that you created.
7. Look at the Comment button in the toolbar, it should have a "unread" state (it will look like a chat bubble with text).
8. Open the comments
9. Note that the Comment button switches to a solid filled chat bubble indicating that the comments have been read.

Developer Notes

The fixed issues are related to MUI components that were partially migrated from MUI v4 to v5. These changes revolve around including the styled utility, properly wrapping components to inject styles, and misc. styling fixes to accommodate other changes.

[Sakelun]

Hey @benloh, @dsriseah

Claimfixed: #5, #7

This PR does some MUI styling component conversions which may overlap or be rendered unnecessary by your recent decision to move off of MUI entirely.

[dsriseah]

quick scan file changes, looks innocuous enough :-) next step is for me to check the build itself.

[dsriseah]

As far as I can tell, it looks OK and there are no console errors I see. @benloh is the one who wrote the initial issue up so should be the final arbiter.

[benloh]

Confirmed that SVG elements are displayed in the right position and that warnings are no longer present.