CSS Refactoring

[Inelukas]

Value proposition As a developer I want to refactor and organize all styled components into separate files In order to improve code maintainability and readability

Description

Refactor all existing styled components into individual files.

Acceptance criteria

• [ ] All styled components are moved to separate files.
• [ ] The application functions correctly after refactoring, with no styling regressions.
• [ ] Folder structure reflects organized separation of styled components.

Tasks

• [ ] Create a new folder structure for styled components.
• [ ] Update import statements in the main files to use the new paths.
• [ ] Test the application to ensure no styles are broken after refactoring.

[F-Kirchhoff]

The user story looks good to me, however, it might not be the best move to separate your styled components from the component they are used in. Separating things just so that "the css is in another file" can add unnecessary complexity to your project. JS and HTML are no longer separated in React, so why should CSS be stored in a different file? The true separation of concerns lies between different components. Keep this a thought and decide for yourself if you want .styled.js files or not. In the end its a matter of taste, but both ways are valid and equally professional.