Migrate verification request page to mui material #1777
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
LuizFNJ
changed the title
LuizFNJ
changed the title
LuizFNJ
changed the title
LuizFNJ
force-pushed
the
migrating-verification-request-page-to-mui-material
branch
from
4798e0c to
17b522d
Compare
|
LuizFNJ
changed the title
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 some
Col,Row,Tag,Typographyin the page for creatingverification requestsand in the "verification request" page as well, following the patterns of previous changes. However, this was the firstTagI replaced, and the most accessible in the MUI library, which is theChip. I adapted how to use them and kept the old design.Functionality to manually expand text
Basically, it was done with state management and DOM manipulation. First, I added ellipses via CSS to hide the rest of the text when it exceeds 3 lines if the condition is false. Then, I added the button with a function that would make the condition true, and in that way, set the line limit to 'none', displaying the full text.
After that, I used a 'useEffect' with an 'if' statement and 'useRef' to check if the total content value was greater than the visible part. If it was, it would mean the text was being truncated, so the "show" button would appear; otherwise, it would not.
I kept the functionality where the button doesn't appear in recommendations and in search.
Testing
In this PR, I managed to separate the pages as we discussed. The
ColandRowwere replaced byGrid, and in relation to this, the site's responsiveness needs to be tested. TheTagwas replaced by theChip, which are basically those colored cards inside the report. All theTypographyfrom Ant Design was also replaced, so it’s necessary to check if there is any text that’s out of the pattern or breaking the design.Components:
A visual document outlining which visual parts of the site need to be tested:
Guia visual testes 1.pdf
This guide was created while I was making the changes. You’ll be able to use it in the following PRs as well.
closes #1715, closes #1718, closes #1726, closes #1727, closes #1739, closes #1740, closes #1745