Style Emotion Form

[Leon910]

As a user I want to interact with a well-styled emotion form in order to have a better user experience and identify with the app cd.

Description

Acceptance criteria

• The form should take up 90% of the available width and remain centered.
• The form should scale appropriately on different screen sizes.
• The background and font colors should match the UX/UI design
• The dropdown for selecting emotions should be styled with a clear and user-friendly appearance
• The slider handle should be styled as a thin range line where the intensity is attached to
• The Date and Time input field should be styled different to the browsers standard
• The Notes input field should be styled different to the browsers standard

Tasks

• [x] Create a new branch feature/style-emotionform
• [x] Implement several styled components for different fields
• [x] Implement styled containers to combine the different html-tags
• [x] Add global styling for the labels inside styles.js

[laurasliwa]

Good US so far! But I have a suggestion for your tasks:

If you want to work with font sizes, line height, font families and define variables for colors, you could implement those in your tasks. For consistency put those maybe in styles.js