react decompose #4257
react decompose #4257
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on decomposing the application into separate components! The project structure is much cleaner and follows the task requirements well. However, this requires a small change because the CSS decomposition is not yet complete. The styles for the Article component, specifically the media query block, are still in the global src/App.scss file. Please move these remaining styles into src/components/Article/Article.scss to ensure each component is fully self-contained. Once you've made that change, the solution will be ready for approval!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
src/App.scss
Outdated
| @media (min-width: 800px) { | ||
| .article { | ||
| margin: 3.5em auto; | ||
| } | ||
| } |
There was a problem hiding this comment.
These styles are specific to the Article component. According to the task requirements, all component-specific styles should be moved into their corresponding component's SCSS file. Please move this block to src/components/Article/Article.scss.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on this task! I am approving your solution because you have successfully decomposed the application into self-contained components, each with its own dedicated stylesheet, which was the main goal. The project structure is clean and all requirements have been met.
There is one minor failing unit test, but this is due to an overly strict assertion in the test file itself, not a flaw in your CSS. To fix it and get the build to pass, you can make a small change in src/components/Navigation/Navigation.spec.jsx.
Change this line:
cy.get('.navigation__link').should('have.css', 'text-decoration', 'none');To this:
cy.get('.navigation__link').should('have.css', 'text-decoration-line', 'none');This change makes the test more reliable by checking the specific property for the underline. Fantastic job overall!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
DEMO LINK