GitLab

Search Bar

• Reduce spacing around the search input
• Add border at the bottom of the search input

Example of a typical GNOME search bar

Message Input

• Give message input the same height/styling as a normal input
• Add a border
• Add blue border on focus
• Remove scrollbar when it's not needed (expand height until 4 lines, and then start scrolling)
• Make the send button the normal button height
• Make the send icon the normal symbolic size (16px)
• Add border to send button

The Fractal message input already implements the exact behavior we want using gtksourceview, so I would just copy that :)

This is the relevant MR

The input looks great when it has focus, but the styling is a bit weird when it doesn't. The message input should be styled like a normal input in every case, so when i doesn't have focus:

• make border 1px
• make border regular non-focused input border color

The message input is taller than the send button, and the button isn't styled the same as other suggested action buttons. I think the problem with the height is because the vertical padding inside the input is too big. Here's Fractal's message input (left) in comparison:

• make message input and button the same height (when the message isn't multi-line).
• style button like normal suggested action buttons

When the input has multiple lines, the send button should remain bottom-aligned, instead of being centered on the input.

• bottom-align the send button
• bottom-align the lock icon

Account List

• Add a border to the list
• Limit list length to the number of contacts)
• Make the "add account" button a list row like in the mockup below

For reference: Allan's list styling mockups

After another round of testing, here are a few more things:

Chat title

The avatar and user name should both be centered, rather than just the title, with the avatar on the left. Fractal used to do this for 1-1 chats, so we could probably just do it the same way it was done there.

• center title and avatar together

Conversation list items

The layout of the conversation list items could be better. I would

• move the second line down a bit so it looks vertically more balanced
• simplify the timestamp as much as possible (e.g. no seconds, if it's today only show the time)
• use the system's time format settings for the timestamp (e.g. 24 hour vs. AM/PM)
• Don't cut off the second line where the timestamp starts, let it continue below the time. If there's no new messages indicator, it can go all the way to the end of the list
• make the icon in the default avatar smaller by about a third

Message Area

There are double borders around the message area

• remove double borders, and let the message view go all the way to the edge

Settings/Preferences

• Rename Settings to Preferences (that's the standard nomenclature in GNOME apps)
• Don't include the XEP number in individual preferences (it's an implementation detail)

New Conversation View

• use the contact-new icon instead of the + in the top right
• move the text in the list items down a bit and add more spacing between them (I'd give more explicit guidance but I can't play with them in inspector :/)

New Contact View

• fix the misaligned animation directions when switching from the "new conversation" view
• pressing the back button should go back to the "new conversation" view, not the main app view
• one of the radio buttons on the account chooser should always be checked (that's how radio buttons are expected to behave)
• the "Alias" label is a bit unclear, I'd replace that with "Name"