Migrated Checkin Button to Material UI

[ntrehan]

Fixes #1683

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

Changed from Default react components to Material UI in CheckinButtons.js

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 ntrehan-1683 development
git pull https://github.com/ntrehan/VRMS.git 1683

[JackHaeg]

@ntrehan & @trillium - looks like the updated MUI buttons used in the above screenshots are no longer viewable to the user (no outline viewable on the button, only button text is viewable which may impact clear usability / understanding that this is an interactive element for the user).

I might recommend using the following MUI component if we want to replicate a similar style to the old button layout: <Button variant="outlined">Outlined</Button>. See more here: https://mui.com/material-ui/react-button/

That said, I'd check with @trillium on this first to get his thoughts :)

[trillium]

Looks good!

[JackHaeg]

@trillium Do you think we should change this to an outlined button, like I mentioned in my previous comment before we go ahead and merge?

[JackHaeg]

@ntrehan, confirmed with @trillium that we should change the button style to contain borders - please make the updates according to the above comment: #1725 (comment)

[ntrehan]

Hi @JackHaeg , @trillium
I have made the required changes as pointed out by jack and have also taken the liberty to add a small margin to avoid clumping of the outlined buttons

Please let me know if this is okay or any further changes are required

[JackHaeg]

@trillium agrees with the changes above. Any team member can review this issue.