Epic: Review file tree and update MUI Components

[JackHaeg]

Overview

Currently, components throughout the VRMS app do not match - some use MUI styling while others do not, thus creating a fractured user experience. All components throughout the VRMS file tree below must be updated to Material-UI components.

What if we're unable to access the component listed

Do your best to change the HTML elements out anyway and note in the PR that you're unable to get the component to render within VRMS for screenshots.

Should I try to match the CSS of the app beforehand

No, there will be some changes to the look and feel of the app switching to MUI components, we plan on going back in a second set of issues to match the CSS to our current figma design or a new figma design as it comes available.

Action Items

Check off these items when we have fully moved from standard HTML components to MUI components (note that same may already be updated to MUI). Each can be broken into its own issue.

• Update HTML components to MUI: ./src/components/ProjectForm.js #1623
• Update HTML components to MUI: ./src/components/Navbar.js #1625
• Update HTML components to MUI: ./src/components/auth/Auth.js #1626
• Update HTML components to MUI: ./src/components/auth/HandleAuth.js #1640
• Update HTML components to MUI: ./src/components/user-admin/EditUsers.js #1641
• Update HTML components to MUI: ./src/components/user-admin/AddNewProject.js #1642
• Update HTML components to MUI: ./src/components/user-admin/UserManagement.js #1648
• Update HTML components to MUI: ./src/components/admin/donutChartContainer.js #1649
• Update HTML components to MUI: ./src/components/admin/donutChartLoading.js #1657
• Update HTML components to MUI: ./src/components/admin/dashboard/index.js #1671
• Update HTML components to MUI: ./src/components/admin/donutChart.js #1672 [ closed, unused component ]
• Update HTML components to MUI: ./src/components/admin/reports/index.js #1679 [ closed, unused component ]
• Update HTML components to MUI: ./src/components/dashboard/AddTeamMember.js #1680
• Update HTML components to MUI: ./src/components/dashboard/RosterTable.js #1681 [ closed, unused component ]
• Update HTML components to MUI: ./src/components/dashboard/RosterTableRow.js #1682 [ closed, unused component ]
• Update HTML components to MUI: ./src/components/presentational/CheckInButtons.js #1683
• Update HTML components to MUI: ./src/components/presentational/returnUserForm.js #1684
• Update HTML components to MUI: ./src/components/presentational/newUserForm.js #1693
• Update HTML components to MUI: ./src/components/presentational/profile/UserTable.js #1694
• Update HTML components to MUI: ./src/components/presentational/upcomingEvent.js #1698
• Update HTML components to MUI: ./src/components/manageProjects/eventForm.js #1699
• Update HTML components to MUI: ./src/components/manageProjects/editableField.js #1700
• Update HTML components to MUI: ./src/components/manageProjects/editableMeeting.js #1701
• Update HTML components to MUI: ./src/components/manageProjects/editMeetingTimes.js #1665
• Update HTML components to MUI: ./src/components/manageProjects/editProject.js #1703
• Update HTML components to MUI: ./src/components/manageProjects/addProject.js #1704
• Update HTML components to MUI: ./src/components/parts/form/ValidatedTextField.js #1705
• Update HTML components to MUI: ./src/components/parts/boxes/TitledBox.js #1707
• Update HTML components to MUI: ./src/components/Form.js #1708
• Update HTML components to MUI: ./src/components/Leaderboard.test.js #1709 [ closed, unused component ]
• Update HTML components to MUI: ./src/components/Footer.js #1710
• Update HTML components to MUI: ./src/pages/Events.js #1711
• Update HTML components to MUI: ./src/pages/CheckInForm.js #1712
• Update HTML components to MUI: ./src/pages/ProjectLeaderDashboard.js #1713
• Update HTML components to MUI: ./src/pages/UserAdmin.js #1714
• Update HTML components to MUI: ./src/pages/UserProfile.js #1715
• Update HTML components to MUI: ./src/pages/ReturningUser.js #1716
• Update HTML components to MUI: ./src/pages/Home.js #1717
• Update HTML components to MUI: ./src/pages/ProjectList.js #1718
• Update HTML components to MUI: ./src/pages/ManageProjects.js #1719
• Update HTML components to MUI: ./src/pages/NewUser.js #1720
• Update HTML components to MUI: ./src/pages/SecretPassword.js #1721
• Update HTML components to MUI: ./src/App.jsx #1722

Resources/Instructions

https://mui.com/base-ui/all-components/

[trillium]

#1549 has a list of all the files with jsx

./src/components/ProjectForm.js
./src/components/Navbar.js
./src/components/auth/Auth.js
./src/components/auth/HandleAuth.js
./src/components/user-admin/EditUsers.js
./src/components/user-admin/AddNewProject.js
./src/components/user-admin/UserManagement.js
./src/components/admin/donutChartContainer.js
./src/components/admin/donutChartLoading.js
./src/components/admin/dashboard/index.js
./src/components/admin/donutChart.js
./src/components/admin/reports/index.js
./src/components/dashboard/AddTeamMember.js
./src/components/dashboard/RosterTable.js
./src/components/dashboard/RosterTableRow.js
./src/components/presentational/CheckInButtons.js
./src/components/presentational/returnUserForm.js
./src/components/presentational/newUserForm.js
./src/components/presentational/profile/UserTable.js
./src/components/presentational/upcomingEvent.js
./src/components/manageProjects/eventForm.js
./src/components/manageProjects/editableField.js
./src/components/manageProjects/editMeetingTimes.js
./src/components/manageProjects/editProject.js
./src/components/manageProjects/addProject.js
./src/components/parts/form/ValidatedTextField.js
./src/components/parts/boxes/TitledBox.js
./src/components/Form.js
./src/components/Leaderboard.test.js
./src/components/Footer.js
./src/pages/Events.js
./src/pages/CheckInForm.js
./src/pages/ProjectLeaderDashboard.js
./src/pages/UserAdmin.js
./src/pages/UserProfile.js
./src/pages/ReturningUser.js
./src/pages/Home.js
./src/pages/ProjectList.js
./src/pages/ManageProjects.js
./src/pages/NewUser.js
./src/pages/SecretPassword.js
./src/App.js

[trillium]

Hey all, @chukalicious was asking what we should do for components that aren't being used and aren't accessible if they're in this MUI update list.

We should close those issues as unplanned and mark in the list after the issue number that the component isn't used in the current iteration of the app.

eg

• Update HTML components to MUI: ./src/components/dashboard/RosterTable.js #1681 [ closed, unused component ]

And inside that issue mark it as unplanned

[JackHaeg]

@trillium Can you please close issues containing components that are not being used, add text: [ closed, unused component ] next to these issues, and make an update to this issue within the section "What if we're unable to access the component listed."

[trillium]

@JackHaeg Done :)