28-FE-feature-add-home-responsive

[treee97]

Updated Changes

• Now userDetails is only composed of the main component and the content component. The modal was removed and remade on the main component to allow a more smooth transition between media queries.
• Added context to manage a state in multiple components in media query.

Previous Changes

This PR focuses on adding responsive behaviour.

Because the user details and filters will be displayed in two different formats, one as a modal for smaller screens and the other as a normal component for bigger screens, I decided to divide both components in 3 pieces:

• Main component
• Content component
• Modal component

The main component is the one being displayed in bigger screens. Inside the content component can be found. The modal component is the one displayed in smaller screens. The content component is also here. The content component is where the data is placed.

This PR also fixed some scroll errors

• Removed flex in the parent elements and used grid
• Added mockup components to userDetails for better understanding while creating the responsive behaviour.

Feedback

• Buttons of Save users and Message users in the white board where commented out temporarily. To be discuss.
• userDetailsContent must be made another issue to finish the component and children.
• ~userDetailsModal works like DaisyUI intended to. However in the filtersModal I had to use a local boolean state to close and open it.~

[ghost]

👇 Click on the image for a new way to code review

#### [](https://app.codesee.io/r/reviews?pr=30&src=https%3A%2F%2Fgithub.com%2FIT-Academy-BCN%2Fita-profiles-frontend) #### Legend

[sonarcloud[bot]]

Quality Gate passed

The SonarCloud Quality Gate passed, but some issues were introduced.

1 New issue
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud