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/base-ui/all-components/
• If you run into any questions, add a comment to the issue and tag "@trillium"