Update HTML components to MUI: ./src/pages/Home.js

[JackHaeg]

Overview

Review all components in./src/pages/Home.js and replace all standard HTML components with applicable MUI components.

Action Items

• Review components in:./src/pages/Home.js and search for any standard HTML components.
  • IF standard HTML components are found in the file:
    • Replace these standard HTML components with applicable MUI components.
      • Ensure select field integrates changes from the Selection Field details below
    • Make a PR for this file

Selection Field

This component contains a selection field with selection options. Please reveiw MUI's Selection Component to ensure that "Select One" is displayed by default on page load.

As it currently stands, the old select style is adding a "-- Select One --" option, this behavior doesn't need to be transferred into the new componenet.

Code Snippet

<Box className="form-input-select">
  <label htmlFor={'meeting-checkin'}>
    Select a meeting to check-in:
  </label>
  <Box className="radio-buttons">
    <select
      name={'meeting-checkin'}
      className="select-meeting-dropdown"
      onChange={handleEventChange}
      required
      defaultValue="--SELECT ONE--"
    >
      <option value="--SELECT ONE--" disabled hidden>
        --SELECT ONE--
      </option>
      {events.map((event) => {
        return (
          <option key={event._id || 0} value={event._id}>
            {event?.project?.name + ' - ' + event.name}
          </option>
        );
      })}
    </select>
  </Box>
</Box>

Resources

• https://mui.com/material-ui/
• If you run into any questions, add a comment to the issue and tag "@trillium"
• This issue is part of the epic: Epic: Review file tree and update MUI Components #1617

[JackHaeg]

@jng34 when you assign yourself an issue, please be sure to change the status to "in progress" (I went ahead and changed the status). Also, please only assign yourself 1 issue at a time. I recommend finishing this issue first before working on #1714, which it looks like you assigned yourself to a few days ago.

Thanks!

[jng34]

Oops, totally forgot. Will do, moving forward. Thank you, Jack.