Migrate progress antd to MUI #1815
Merged
+70
−30
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
thesocialdev
approved these changes
Feb 19, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
In this PR, I replaced the Progress component from Ant Design with MUI. Overall, I had to use a linear gradient for line progress and a circular progress for circles, as MUI does not unify them under a single component like Ant Design. To replicate the light gray background of the circular progress, I had to use two overlapping circles since it was not possible to define that element with CSS in MUI. In general, I managed to simplify some aspects while maintaining the design and responsiveness.
OBS:
You may notice a color change in the progress components. This happens due to the library switch. To keep the previous, more vibrant, and lighter color, we would need to change the hexadecimal values in the constant where we define these colors or set a new constant with updated colors directly in the progress component. I concluded that maintaining the old color is unnecessary since the difference is minimal. Does this make sense?
before:
after:
before:
after:
before:
after:
Testing
To test, go to different places where we call the personality card or the metrics overview and check if everything is correct and responsive.
Components:
closes #1763