Design bugs & improvements to envelope list (AppContentListItem)

[jancborchardt]

Additionally to the issues reported in the Vue component at nextcloud-libraries/nextcloud-vue#2853, here are some specific to Mail:

• The date format is too verbose for this short space here. We need to use either something like messengers do: 5m, 3h, 5d, etc – or shortened absolute dates like "2 Aug". Both are fine and much better than the current one.
• The container has more padding to the bottom than to the top. This does not appear in Talk, so I assume it’s an issue in Mail instead of the component?
• The Avatar is not correctly vertically aligned with the text. Also does not appear in Talk so assume it’s specific to Mail.
• The color indication bar on the left often seems very off – colors can be very similar like in this example, and it just looks a bit clunky and is often unclear what it represents. We could remove it?
• In the priority inbox, "Important and unread" has 2 issues, to fix them: The text needs to be clearly below the menu toggle, and either it should cleanly break into 2 lines without overlapping the first mail, or it should just ellipsize:
  

cc @GretaD and @ChristophWurst as well since Greta is on holiday

[jancborchardt]

Ref also #6079 by @nimishavijay which has a complete mockup of it. Listed here are mostly current bugs which are very noticeable, and @nimishavijay’s mockup is the ideal state. :)