Design bugs & improvements to envelope list (AppContentListItem)

[jancborchardt]

Additionally to the issues reported in the Vue component at https://github.com/nextcloud/nextcloud-vue/issues/2853, here are some specific to Mail:

• [x] 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.
• [x] 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 https://github.com/nextcloud/mail/issues/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. :)