Design review v5

[hamza221]

Thread list

• [x] All items should have the same height if possible
• [x] When you hover over a mail, the width of the preview text should not change (now the text jumps/ellipsises on hover)
• [x] In priority inbox, the whitespace above important is too much, reduce it a bit (the height above "Other" seems better)
• [x] Reduce whitespace above "Follow up"
• [x] Improve element spacing, grouping and text densitiy #11316

Message content

• [x] Change the header design to look more like Talk conversation header
• [x] Avatar: Space on the top and left should be equal
• [x] Content text should be aligned with the text of the header
• [x] Message content itself (needs prototypes)
  • [x] Only 2 states: one collapsed fully, one expanded fully, no max-height for each message
  • [x] Full width boxes?
  • [X] Limit width of text to 700 px? check others
• [x] Thread summary https://github.com/nextcloud/mail/pull/11575
  • [x] Style it like a regular message in a thread
  • [x] avatar --> sparkle icon
  • [x] Sender name --> "Thread summary"
  • [x] sender email --> Nextcloud assistany
  • [x] body --> summary content
• [x] Bug: clicking on a message should scroll to the start of the message not ? middle?

Navigation

• [x] #11918
• [x] #11380
  • [ ] text of "Show only subscribed..." text is indented slightly by like 1px
  • [x] "mailbox" --> "folder" in all cases
• [x] chevron-down icon for selected account should be white

Message to use for testing -> https://cloud.nextcloud.com/s/FjLdD3aD6sGkoHt

Design changes that will not be delivered in the upcoming release

• Borders and separation?
  • all containers
  • only lines between each message?
  • shadows?
• Don't center align
• Add horizontal lines between the list items

Not reproducible anymore

• text of any selected folder should be white (when you select send for example )

[nimishavijay]

Thread summary design update as requested by @GretaD :)

• [x] The idea is that the structure should be the same as any other message with "Thread summary" in place of sender name, "Nextcloud Assistant" in place of sender email, assistant icon in place of the avatar, and "Go to newest message" in place of the actions
• [x] Use the new secondary button style
• [x] Use bold text for "Thread summary"
• [x] Add a "This summary is AI generated and may contains mistakes" notice in --color-text-maxcontrast at the bottom
• [x] Border: 2px solid linear-gradient(120deg, #7398FE 50%, #6104A4 125%); (will have to use a ::before or background-image because it is hard to get a gradient border with border-radius)
• [x] Background: #⁨⁨⁨⁨⁨F6F5FF
• [x] Avatar:
  • [x] 34*34px avatar with 20*20px icon
  • [x] fill for the SVG: linear-gradient(285deg, #9669D3 15%, #00679E 40%, #492083 80%)