LiveKit call redesign - Bottom bar

[tomastiminskas]

Apply new design based on Sphinx Mac design for bottom bar and control buttons

Requirements

• Remove chat button from bottom bar
• Add new box on the bottom left corner with room name and icon to copy call link.
  • Background: #909BAA, opacity: 0.1, cornerRadius: `8px.
  • Font: Roboto-Regular, size: 14px, color: #909BAA
  • Copy Icon: MaterialSymbols font, contentCopy icon, color: #909BAA
• Move settings button to the right and apply new design:
  • Shape: square (40x40 is MacOS reference frame)
  • Background: #909BAA, opacity: 0.1, cornerRadius: `8px.
  • Copy Icon: MaterialSymbols font, settings icon, color: #FFFFFF
• Microphone and Camera buttons: both should be centered in the screen with record button, screen sharing and end call buttons
  • Shape: square (40x40 is MacOS reference frame)
  • Enabled Background: #909BAA, opacity: 0.1, cornerRadius: `8px.
  • Disabled Background: #FF5252, opacity: 0.2, cornerRadius: `8px.
  • Enabled Icon: MaterialSymbols font, mic icon, color: #FFFFFF
  • Disabled Icon: MaterialSymbols font, micOff icon, color: #FF6F6F
• Record call sign: new sign in bottom bar to show if call if being recorded. This will replace the red border on entire call view that currently shows while recording (should be removed). For now this won't be a button, recording will be triggered from setting menu.
  • Shape: square (40x40 is MacOS reference frame)
  • Background: #909BAA, opacity: 0.1, cornerRadius: `8px.
  • Enabled Icon: MaterialSymbols font, radioButtonChecked icon, color: #FF6F6F (alpha should animate intermittently)
  • Disabled Icon: MaterialSymbols font, radioButtonChecked icon, color: #FFFFFF
• Screen sharing button:
  • Shape: square (40x40 is MacOS reference frame)
  • Background: #909BAA, opacity: 0.1, cornerRadius: `8px.
  • Enabled Icon: MaterialSymbols font, screenShare icon, color: #49C998
  • Disabled Icon: MaterialSymbols font, screenShare icon, color: #FFFFFF
• End call button:
  • Shape: rectangle (64x40 is MacOS reference frame)
  • Background: #FF5252, cornerRadius: `8px.
  • Icon: MaterialSymbols font, callEnd icon, color: #FFFFFF

Screenshot references

Current design

New design

Acceptance Criteria

• Implement new design for bottom bar and control buttons

[ThisIsRahmat]

Hey @tomastiminskas I'm looking at picking this issue up, do I have to be signed up to Sphinx to be eligible to collect the bounty?

[tomastiminskas]

@ThisIsRahmat Yes, you can go to https://people.sphinx.chat/bounties, tap on GET SPHINX button on top right corner, then reveal connection code and use it to sign up on any of our platforms :

• iOS (available on TestFlight)
• Mac (available on TestFlight)
• Android (available on Play Store)

Once you are in go to your profile, tap on the QR next to your publicKey/address and share it with me here so we can connect there

[tomastiminskas]

@ThisIsRahmat

Also as a clarification lots of the UI elements come from a library: https://www.npmjs.com/package/@livekit/components-react

And here’s a doc on how to customize them https://docs.livekit.io/reference/components/react/concepts/style-components/

[anujsb]

Hi @tomastiminskas , I’d like to work on this issue. I’ll start implementing the bottom bar redesign based on the Sphinx Mac design and will update here if I have any questions. Let me know if there are any additional details I should consider. i have already signed up to Sphinx.

[anujsb]

Hey @tomastiminskas I've made the possible fix for this issue, can you please review it and let me know if any change is required, Thanks!

[tomastiminskas]

Hi @anujsb you should have wait for me to assign the ticket before working on the changes. That's how we usually work. In this case we have a hunter working on a custom layout infrastructure since some of the re design changes can't be done just by styling the existing UI. So your changes might be useless. I will review your changes and process the pmt or send corrections in this case, but from now on, please wait for the ticket/bounty to be assigned before working on it

[tomastiminskas]

@anujsb just checked the screenshot on the PR you created and saw that the settings button on the right bottom corner is missing. Please do the change and attach new screenshot so then I can review your changes, thanks in advance