[Task 4] Styling in React

[vadym-zinchenko-moc]

• Main repository - https://github.com/MastersAcademy/fe-react-2024
• Design - https://www.figma.com/file/mRAOMdJiAsD8fHSVnYwUl9/React-web-page
• Branch name - task/04-styling

Task Description

In this homework assignment, you will implement logic for dynamically changing theme of your website. All component styles need to be rewritten using modules styles (if you haven't done so already). Additionally, for the bonus task, you will need to add logic to automatically fetch the theme of your device and store the data in Local storage.

1. Add Layout of Search Bar:

• Integrate the design layout for the search bar as per the provided design specifications.

2. Rewrite All Styles with Module Styles:

• Review and refactor all existing inline and simple import styles across the entire application to adhere to module styles.

3. Implement Dynamic Theme Change Logic:

• Develop functionality to dynamically change the theme of the application upon clicking the designated icons. Ensure that the theme changes are reflected consistently across all components and pages, aligning with the provided design guidelines.

Advance Task Description

(1*)

1. Use user device settings for fetching current theme :

• Implement logic to automatically fetch the theme of the user's device.

2. Add LocalStorage

• When reload the page, we can use theme from Local storage.

Design

For consistent styling and layout, refer to the Figma design you used in the previous task: React Web Page Design.

Acceptance Criteria for 1

• Mentor is added to pr
• AC copied to pr description
• Link to deployed version is added to pr
• Added layout of Search Bar
• Rewritten all styles with Module Styles
• Implemented dynamic theme change logic

Acceptance Criteria for 1*

• Implemented logic for fetching user's theme.
• Saved theme to the Local storage.
  Note: if we have saved theme in Local storage, we use it first after reloading of the page