Hub 9 design fixes and improvements

[ChristophWurst]

Describe the task

This is an overview ticket for many small fixes and improvements with the updated design in Hub 9 aka Nextcloud 30.

Affected components

Calendar, Contacts, Mail

To do

Calendar

• Wrong corner radius for back/forward buttons in navigation calendar#6144
• Redesign app settings toggle so it looks like Files in Nextcloud 30 calendar#6141
• Too little space between calendar properties and action buttons calendar#6136
• Calendar actions menu is too wide calendar#6142
• Simple editor contents and buttons are too close calendar#6137
• Scrolling issues in app settings menu calendar#6138
• Days in mothly view have tiny white border right/bottom calendar#6139
• Update sharing icon to match Files in Nextcloud 30 calendar#6140
• Overlapping colors in calendar color picker and unused choose button calendar#6145
• Superfluous app navigation spacers in calendar list (left sidebar) calendar#6153
• Calendar edit modal should use NcDialog instead of NcModal calendar#6154
• Inconsistent font and height of event resource inputs calendar#6155

Contacts

• Redesign app settings toggle so it looks like Files in Nextcloud 30  contacts#4019
• Contact details properties alignment and spacing contacts#4018
• Improper spacing and wrong component for contact quick search contacts#4020
• Redesign contact details for compactness contacts#4021
• Contact details heavily misaligned on small/mobile screens contacts#4022
• Lost email address subline in contacts list contacts#4023
• Redesign address book sharing dialogue contacts#4024
• Uneven spacing around avatar in contact list contacts#4029
• When creating a new group the arrow isn't aligned with the input space contacts#4031

Mail

• Migrate setup page to NcInput fields mail#9834
• Spacing issues in app navigation mail#9835
• Migrate advanced search dialogue to NcDialog mail#9836
• Rearrange app settings sections mail#9837
• Unread style and early ellipsis for envelopes mail#9838
• Remove dividing lines between to/cc/bcc/subject in the composer mail#9842
• In the composer, change the icon for toggling the formatting bar to format color text icon mail#9823
• Close navigation sidebar button not aligned with search in mailbox mail#9856
• Envelope layout is broken mail#9334
• Email composer menu not aligned properly mail#9892
• Sieve security buttons in account settings look bad mail#9894
• IMAP and SMTP security buttons don't work at all mail#9899
• Spacing issues in accounts setup/edit form mail#9915
• Scrolling *+ New message* button mail#9916
• Composer alignment and text issues mail#9917
• "Notjunk" label should be hidden mail#9918
• Quick search bar alignment mail#9919
• Show *Rely*/*Reply all* in toolbar mail#9920

Nice to have

• Show long date in thread list mail#9839
• Fine-tune CKEditor toolback to look and feel like Nextcloud mail#9841
• Replace vanilla inputs with NcInputFields in contact details contacts#4027
• Hide address book section if there is only one address book available contacts#4028
• Element spacing should use multiples of --default-grid-baseline mail#9944
• NcActionRadio does not align with NcActionButton, NcActionCheckbox, etc nextcloud-libraries/nextcloud-vue#5957

[ChristophWurst]

Raw notes Christoph

• App settings toggle inconsistent. Do it like Files
• Contacts heading sizes
  -> make it smaller
• Contacts container broken on mobile
• Contacts list shows no email addresses
• Contacts list gap left/top is not the same
• Contacts search not alighned with + New contact
• Contacts search does not use NcInput
• Contacts editing avatar upload not aligned
• Contacts Add more info should be at the end
• Contacts settings address book sharing icon should be square
• Calendar top/bottom border in month grid view
• Calendar derounding of previous/next week buttons
• Reduce nc/vue spacer size. Default clickable area * 2 = ~8px
• Calendar color picker overlaps
• Mail too much space above New message
• Mail too much space below email address (header) and INBOX

Raw notes Grigory

• Checkboxes in actions in mail are indented
• Space between headings and descriptions are too large in actions in mail
• Collapse mailboxes needs different contrast
• Maybe reduce icon sizes in mail
• Too many categories for too little actual settings in mail settings modal
• Whether an email is read or unread isn't clear enough in the list
• Read and the abbreviation of Monday in French is too similar

[ChristophWurst]

@GretaD @GVodyanov @st3iny feel free to add any more changes if I forgot them.

I'm now assiging all frontenders of the team. Pick your tickets freely. We have to try to get these in by July 25th.

[ChristophWurst]

Some changes have to be made in nextcloud/vue. If you see one of those try to tackle them first because it takes a few days for the changes to trickle down through a release+update.