feat: redesign recipe info card #5026
Conversation
|
Oh my god this is so much better. I will try to find time today to review |
There was a problem hiding this comment.
Yeah wow love how this looks. I love how the borders/separators are dynamic depending on which times you have set. Very cool.
Did you play around with any other button styles for last made? I think this is fine, and maybe my eyes just need an adjustment since it's new, but the small circle with a plus looks a little out of place to me. Maybe a rounded rectangle instead of a circle?
Only issues I've noticed are with the print view. One text string got deleted, but also the large text looks a little weird since it's so much bigger than the description:
The icons also don't seem to wrap correctly sometimes; maybe need a no-wrap in there somewhere? (this is also an issue with the Mealie icon up top in the first picture, but I know that's not a new issue to this PR)
I don't think the icon wrapping issue is that big of a deal, at least for this PR, but I think the description text needs to be bigger on the print view. Not necessarily the same size as the new stuff, but a little closer in size.
| @@ -547,7 +547,6 @@ | |||
| "failed-to-add-recipe-to-mealplan": "Failed to add recipe to mealplan", | |||
| "failed-to-add-to-list": "Failed to add to list", | |||
| "yield": "Yield", | |||
| "yields-amount-with-text": "Yields {amount} {text}", | |||
There was a problem hiding this comment.
This is still used in the print view (see above)
There was a problem hiding this comment.
Or maybe the print view just needs to be updated with the new component
|
I think the ui of the "last made" FAB could be tweaked a lil to match the visual hierarchy. What would you think of this UI instead? Overall, love the updates you're making here! |
|
@miah120 thanks for the input, I have to see it in context but I think this is an improvement 😊👍 |
What this PR does / why we need it:
This redesignes the recipe info card.
There are a few UI/UX aspects this PR improves.
In the old design
This PR freshens up the UI by removing the chips and using Icons with text. The screenshots below should show the changes pretty clear.
Also removed a small visual bug where two dividers are shown if no recipe description is provided.
Thanks to @Fruchtxzwerg for helping out designing this.
Which issue(s) this PR fixes:
None
Special notes for your reviewer:
Happy to have feedback around the design choices. Am 100% not a designer, so there is probably still a lot of stuff that can be improved.
I don't know why, but the items simply don't want to align vertically. Happy to get a helping hand on this one.
Screenshots