Replace html elements with MUI in editableField.jsx

[dannyprikaz]

Fixes #1700

Note:

This seems to be an unused component, but I went ahead and made the changes anyways.

What changes did you make and why did you make them ?

• Replaced HTML div tag with MUI Box componenet
• Replaced HTML button tag with MUI Button component
• Replaced HTML textarea tag with MUI TextareaAutosize component
• Replaced HTML input tag with MUI TextField component
• WHY: To modernize the editableMeeting.jsx component using MUI

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b dannyprikaz-issue1700-editable-fileds-mui development
git pull https://github.com/dannyprikaz/VRMS.git issue1700-editable-fileds-mui

[sasszz]

Low risk because it is an unused component, approved

[hollydo]

Changes looks good to me. @JackHaeg or @trillium can we merge this issue?

[JackHaeg]

@trillium Can we merge this PR? Looks like we have 2 approving reviews from Holly & Lucie. Looks like some of the fields may be slightly misaligned (e.g., "edit" is contained on a separate line from "Some Field")...

[JackHaeg]

@dannyprikaz if possible, please update the CSS to fix the alignment issue discussed above.

[dannyprikaz]

@dannyprikaz if possible, please update the CSS to fix the alignment issue discussed above.

@JackHaeg @trillium
I made changes to improve the styling in commit 885879f

Visuals after new changes are applied

[JackHaeg]

Thanks for making these changes, @dannyprikaz - looks great!!
@trillium Okay if we go ahead and merge?