Feat: Improved layout of RecipeCard, RecipeView, and how steps work

[skybird23333]

Before

I dont have a before picture.

After

Changes

Recipe card

• Now displays servings and time it takes to be ready.
• The name is now embedded in the recipe image over a background.
• New prop: info_badges with type infoBadgeProperties (currently 'serves' | 'time')
  • This allows controlling what badges are displayed on the card and in what order by passing in an array of strings which are the properties. This can be edited from inside the component, namely editing the InfoBadgeProperties type and the generateInfoBadges function.

Recipe view

• The image is now slightly taller so you can see the food better.
• The recipe name now embeds into the image like in recipe card, along with the author name, which is moved from the top left corner.
• The layout of the page on PC now has two sides: The ingredients overview and steps will be on the left(main) side, while the remaining information and such are displayed on the right side.
• Implemented <Recipe>.sourceUrl.
• Implemented properties.
• Removed the context menu next to the recipe name, which is now placed in the side bar, under the manage section.
• Improved flow of browsing/checking ingredients.
  • Recipe overview is now named to Ingredients Overview, and is expanded by default.
  • Each step no longer display a full ingredients table, rather an inline list where items can be checked off by clicking on it.

[CLAassistant]

All committers have signed the CLA.