Adjust UI according to the design review

[ShGKme]

How to use GitHub

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

---

Conversation and composing

• Top bar title is cut off @Antreesy
  style(TopBar): fit two-lines with normal line-height #12851
  fix(TopBar): align lines #12875
• Date marker "Today, July 23, 2024" border radius should be reduced to make it similar to the button @Antreesy
  • fix(design): adjustments for Nextcloud 30 - v3 #12810

List view

• Emoji in the avatar is slightly misaligned? @Antreesy
• Margin on the left of list item is too much and on the right is too little --> it should nicely aligned with the left of the search bar and right aligned with the new conversation button (upstream issue?) @Antreesy
  • fix(design): adjustments for Nextcloud 30 - v3 #12810
• Settings button should be left aligned and not bold like in Files (visually) @ShGKme
  • feat: add NcAppNavigationSettingsButton nextcloud-libraries/nextcloud-vue#5866
• Counter bubble should have min-width such that width is never lesser than height (even when counter bubble has "1" it should be a circle) @ShGKme
  • fix(NcCounterBubble): adjust min-width to make it a right circle nextcloud-libraries/nextcloud-vue#5905

Sidebar

• Participant list: @Antreesy
  • Issues:
    • Too much padding on left and right of each participant is too much
    • Vertical space can also be reduced
    • border radius should be reduced
    • avatar focus should be circle
  • Migrate to NcListItem? feat(NcListItem): provide additional slots for NcActions / extra actions customization nextcloud-libraries/nextcloud-vue#5870
• Media tab: thumbnails are top left aligned their containers @Antreesy fix(design): adjustments for Nextcloud 30 - v3 #12810

Calling

• Media settings:
  • border radius on bg should be consistent
    • @Antreesy fix(design): adjustments for Nextcloud 30 - v3 #12810
  • "Test devices" button should be left aligned with select components
    • @Antreesy fix(design): adjustments for Nextcloud 30 - v3 #12810
  • Height changes when you change between devices and background tabs --> render both tabs and make one not visible @ShGKme
    • fix(MediaSettings): jumping on devices/backgrounds switch #12815
• Ongoing call:
  • Hide participants and timer in mobile? @ShGKme
    • fix(TopBar): hide some buttons under menu on mobile #12928
  • Chat view read receipt: width can be reduced to 20px @Antreesy fix(MessageList): rewrite CSS layout of chat #12823
  • Reduce gap between avatar and message @Antreesy fix(MessageList): rewrite CSS layout of chat #12823
  • Is it possible to have an animation when "raise hand" button appears on the top? @ShGKme
    fix(TopBar): hand raised button animation #12926

Admin settings

• Use the password field for shared secrets @ShGKme
  • fix(AdminSettings): hide secrets in password fields #12812
• Some icon-only buttons don't have hover feedback @ShGKme
  • fix(AdminSettings): server buttons visual interactivity #12814