Design details for top bar elements: search bar, add button, sidebar toggle

[jancborchardt]

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.

---

Steps to reproduce

1. Open the Talk app
2. Start a call to see more specifically the difference of call icons on the right and the sidebar toggle.

Expected behaviour

Icons / buttons and input field are nicely aligned:

• The input field radius is pill, fitting snugly with the outside container radius. Alternatively, the input field could be larger and with less margin, then it would not have to be pill radius.
• The "Add" button has 8px padding to the right (calc(var(--default-grid-baseline) * 2)))
• The sidebar toggle is moved 4px down and 4px to the right to have 8px margin to top and left, same as all the other icons in the top bar.

@marcoambrosini some simple fixes which make it look much much cleaner :)

Actual behaviour

From left to right:

• The radius of the input field does not fit nicely with the radius of the outside container.
• The "Add" button has no padding to the right
• The sidebar toggle has a different position than the other icons / actions in the top bar

Talk app

Talk app version: latest on cloud.nc.com