WEBRTC 2590 Demo app design improvement

[wojciechowskiradek]

WebRTC-2590 - Demo App Design Improvement

---

Contains all changes described here:
https://www.figma.com/design/a9KGD1pCvmxbqyq1bESFGc/Telnyx_WebRTC-App_2024-25?node-id=529-4295&p=f&t=eiK4Kb2oyVByk4Qz-0

[Oliver-Zimmerman]

As expected, I think we need to steer clear from the designers.

The fact that I need to scroll to hit call and can hit disconnect is horrible.

I know none of this is your fault @wojciechowskiradek you were just following the figma designs but they really aren't translating well from the static figma images.

Here are some changes I would request:

Login:

• Padding on login screen below logo is way too big like you flagged
• Padding between information on login screen is also too large
• Production text in the bottom sheet should be gray
• The text in the button when entering Credential Login or Token Login should not say 'Sign In', but instead 'Confirm'. We are not signing in there, we are setting a config.

Home:

• Again padding between logo and text and the info below it is crazy. This should be reduced so we don't need to scroll to find the call button
• The green circle for Socket and Call State info should be the same (one is darker than the other)

Call:

• When we are on a call we should hide the destination green switch between phone number and SIP Address (this is actually in the figma and isn't included)
• The text box should be filled with the number or sip name from the invite. See here:
  

I want to be clear here, none of this is bad implementation but instead the static figma designs do not translate well here. Even in the image above you can see the intended view is meant to be closer together and not like this:

I think in general this redesign should really just be:

1. Implementing the icons they want
2. Adding the green switches they want

We can keep the padding as it was, eg:

[Oliver-Zimmerman]

In general if possible. No Scrolling!

[Oliver-Zimmerman]

TLDR;

• Keep the green switcher for SIP Address -> Phone number and Token -> Credential
• Keep the icons
• Keep the SDK and App version text at the bottom
• Remove everything else to the old padding values
• Fix the call state so when we are on a call we hide the destination switcher and have the caller SIP name or number (depending on what is in the call object) in the edit text

[Oliver-Zimmerman]

1 Last minor change:

Can we reduce the padding between the Session ID and the controls underneath it (Either the Phone SIP switcher or the phone controls).

t seems to be double that of the other padding of the info above it.