Overhaul app cards
This commit tweaks the layout of app cards shown in browse and search views to make them more visually parse-able.
- Make the app name bigger and use demi-bold font. There just isn't another way to make it stand out enough.
- Move the description/caption so that it's right under the app name, so the two are visually close and therefore associated in the user's mind.
- Move the category label to the bottom of the card, under the rating and align the two in their own little group that is separated from the app name + description group with whitespace. This reinforces that they are separate metadata.
- Move the backend name out of the Install button and instead display it as small, de-emphasized text in the corner. It's important that we still show this information to help disambiguate apps that appear multiple times but from different backends, due to mismatching appstream IDs between the instances causing Discover to be unable to de-duplicate them. However we don't need to shove this information in the user's face by sticking it in the Install button. So now it is demoted to a corner.
- Don't show the install button in compact/mobile view. There just isn't enough space on the cards without the layout looking really visually busy.
Desktop | Mobile |
---|---|
cc @teams/vdg
Edited by Nate Graham