Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated MUI #362

Merged
merged 127 commits into from May 16, 2024
Merged

Updated MUI #362

merged 127 commits into from May 16, 2024

Conversation

sarhiri
Copy link
Contributor

@sarhiri sarhiri commented May 6, 2024

Types of changes

  • Bugfix (change which fixes an issue)
  • New feature (change which adds functionality)
  • Refactor (change which changes the codebase without affecting its external behavior)
  • Non-breaking change (fix or feature that would cause existing functionality to work as expected)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Purpose

  • Upgrade the application's UI framework to Material-UI version 5.
  • Enhance user experience and interface aesthetics by leveraging the new features and improvements introduced in Material-UI 5.
  • Ensure compatibility with the latest design standards and best practices in UI development.

Approach

  • Updated the application to utilize Material-UI version 5, replacing all existing components and styles with their counterparts from the new version.
  • Modified import statements and installed any necessary packages required for Material-UI 5 integration.
  • Manually adjusted and refactored existing useStyles and theme configurations to align with Material-UI 5 specifications.
  • Reviewed and updated any custom CSS syntax to accommodate changes and enhancements introduced in Material-UI 5.
  • Tested the application thoroughly to ensure proper functionality and visual consistency after the Material-UI 5 upgrade.
  • Uninstalled older versions of MUI.

Learning

Screenshot(s)

sarhiri and others added 30 commits April 23, 2024 21:18
the search bar in the dashboard component was
removed from occupied component and given its
own folder with associated styles
For easier readability and DX the developer icons sections was
extracted into its own component and associated style sheet
Done to facilitate readablity and DX
Styles also moved to ApplicationsCard component folder
styles block at the top of occupied component was moved
into a helper function. Tried to only switch the different
styles (background-color, box shadow and another background color)
Ran into trouble becuase those styles depend on the mode state which
is defined in a context which cant be used outside a function component.
Ended up just moving both styling functions whole
The modal component was being rendered multiple times which
was unecessary. Additionally each modal component had a different
state that was only being used to determine if that modal should
be open or not. These states were condensed to one state to simplify
the modal states
this commit represents the changes to all the individual modals
that are now rendered from a single modal state. Done to clarify
which modals are open and prevent unnecessary states
mdtagg and others added 28 commits May 1, 2024 11:41
Clicking example now populates cards that are not wrapped in
a link component. This allows the app to work the traditional
way and with our example button. useNavigate hook was used in
appplication card component to facilitate. Users can now also
click exit example button to reset all states and use the app
the traditional way.
Inside of application context add app was adjusted to
render multiple cards at once. Each cards data is added
to an object that is iterated over
Applications are now filtered inside of mapping function
Cards are now deleted without the ref hook
I believe the delRef hook was being used to
prevent an issue with event bubbling. Becuase
the delete button is nested inside of the
Card component and card has an onClick the
prior teams were calling the onClick on the
card as well as the delete button.
event.stopPropagation was used to prevent
the bubbling the del ref hook is now able
to be removed
@mdtagg mdtagg deleted the MUI branch May 15, 2024 22:51
@mdtagg mdtagg merged commit bdf3b1c into open-source-labs:master May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants