[MM-58561] Calls: Add stop recording confirmation; update call screen

[cpoile]

Summary

• 3 main changes:
  • Recording & Recording with transcription confirmation to match [MM-57365] Stop recording confirmation modal mattermost-plugin-calls#760
  • Update the call screen to balance the header with/without the loading and recording badge, following designs: https://www.figma.com/design/9HL2HADCQ0lLmn1RBOBGGV/Calls%3A-Recording?node-id=13-90030&m=dev
  • The call screen's duration timer needs to be changed from mm:ss to hh:mm (removing the ss) when duration goes over an hour (there isn't enough space)

call screen	rec loading	rec active	new stop rec confirmation

Ticket Link

• https://mattermost.atlassian.net/browse/MM-58561

Checklist

• Added or updated unit tests (required for all new features)
• Has UI changes
• Includes text changes and localization file updates
• Have tested against the 5 core themes to ensure consistency between them.
• Have run E2E tests by adding label E2E iOS tests for PR.

Device Information

• Android: 13, Pixel 6
• iOS: 16.5.1, iPhone 14

Release Note

Calls: Added stop recording confirmation; redesigned the header of the call screen to better display recording badge

[abhijit-singh]

Looks awesome @cpoile! Thank you! A couple of minor things I noticed but they aren't blockers:

1. The call title and the time are slightly misaligned. The title probably needs to be moved down a bit so that they are in the same line. It is more visible on iOS than on Android.

2. The minimize icon needs to be moved to the right to match the spacing on the left and right of the header content. Probably needs to be moved by about 12pts.

3. Not directly related to this PR, but the icon on the Stop recording menu item should also be red instead of the default grey.

[streamer45]

Nice!

[cpoile]

@abhijit-singh Can you take a look now? I made some changes: the left and right padding stays at 24 now. When the rec badge pops in, we increase the left and right width (but keep the collapse icon in the same place), which keeps the center title in the same position but reduces its width symmetrically. This way we can keep left/right balance, but maximize the center title size. Let me know what you think? We can go back to the original if you would prefer the time to not change (but then the center title will always be smaller).

[abhijit-singh]

Thanks @cpoile! Looks great visually now!