Dialer view facelift

The current dialer screen layout has a few issues:

• The delete button is at the top, which is nice semantically but not ideal ergonomically
• The button being next to the phone number entry means it can hold fewer digits, and also makes it look a bit off-balance
• The grid of rectangular buttons is a bit heavy visually. @sam.hewitt played with round buttons in a web mockup, which would help a lot with this
• The phone number entry uses the regular UI font size, which makes it look quite small for something so important. Other phone OSes use significantly larger sizes here.
• The phone number looks a bit odd left-aligned

Some suggestions to make it nicer:

• Centering the phone number
• Making the phone number larger
• Moving the delete button to the bottom
• Rounding all buttons, and making the grid buttons circular
• Making the call button a bit less wide

cc @sam.hewitt

My one misgiving is having the delete button so close to the call button it's just asking to be pressed accidentally when trying to initiate a call. And their close proximity in that concept would imply some related function/intent that they don't actually have, I'd much prefer seeing it as part of the dialpad numbers somehow.

I wonder if that could be addressed by simply making the call button a bit narrower?

Some relevant art for delete button placement:

Android/Google has the delete button in the phone number entry, the latest iOS has it next to the call button.

mentioned in merge request !67 (merged)

marked the checklist item Centering the phone number as completed

mentioned in merge request !87 (merged)

mentioned in commit julian.sparber/calls@06481155

closed via merge request !87 (merged)