US 31 - Styling for Random Tip

[arne-witteler]

Value proposition

As a homemade remedies enthusiast I want the app's visual design to be intuitive and appealing, so that I can easily navigate and use the app comfortably without any distractions.

Description

Acceptance criteria

• there is a fixed button at the bottom of the screen with a herbie icon
• when clicking the button, a window open up with a random tip from our herbie and the icon changes to a loading icon
• the rest of the screen is covered by a half transparent black screen to make the tip stand out
• when clicking the loading icon herbie gives a new random tip back
• the window has a x button for closing it and changing the herbie button back having the herbie icon
• if I click on "read more" the user should be forwarded to the Detail Page

Tasks

• [ ] create feature branch feature/tip-styling
• [ ] implement fixed herbie icon button at the bottom of the screen
• [ ] add an onClick event to the Herbie icon button to open the random tip window
• [ ] implement the loading icon to replace the Herbie icon when a random tip is displayed
• [ ] create a half-transparent black screen overlay to highlight the random tip window
• [ ] add an 'X' button to the TipOfTheDay.js component to close the random tip window and reset the herbie button

[Jessica-Windoffer]

LGTM so far! 👍 Just one little comment: In the Wireframe it is shown that the user can click on "read more" and is forwarded to the Recipe of the random tip. But this is not mentioned in the Acceptance criteria nor in the Tasks. Just keep in mind to implement this functionality! 😊