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"

[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.

[JackHaeg]

Hi @jng34 I see that the PR linked to this issue is still open: #1840

• Usually, we allow for the GitHub automation to automatically close an issue once the linked PR is merged. In other words, we leave issues open (with the status "in progress") until the PR is merged. That way, if a PR is not merged and needs more work, the issue is still correctly displayed as "open."

I'll re-open this issue for now and will change the status back to "in progress" :)

[jng34]

@JackHaeg got it! Sorry, and thank you for being patient with me as I learn the ropes. Can I move onto another issue in the meantime?

[JackHaeg]

No worries @jng34! And yes - feel free to hop on another issue 👍