Adjust layout and colors of the voice recording view

[laevandus]

🔗 Issue Link

Resolves IOS-621

🎯 Goal

Voice recording view is using layout not matching to design specifications, in addition, some of the colors and images are not configurable.

🛠 Implementation

• Add ColorPalette.voiceMessageCurrentUserBackground and ColorPalette.voiceMessageOtherUserBackground (background of the whole voice recording view e.g. recording items and additional text)
• Add ColorPalette.voiceMessageCurrentUserRecordingBackground and ColorPalette.voiceMessageOtherUserRecordingBackground (background of the voice recording item)
• Add ColorPalette.voiceMessageControlBackground and use it for play button's background color
• Add Images.pauseFilled and use it for play button
• Use Images.playFilled for the play button
• Use ColorPalette.messageCurrentUserTextColor or ColorPalette.messageOtherUserTextColor for the title of the VoiceRecordingView
• Adjust corner radius and many spacings
• Update snapshot tests

🧪 Testing

N/A - covered by snapshot tests

🎨 Changes

Please refer to updated snapshots.

☑️ Checklist

• I have signed the Stream CLA (required)
• Changelog is updated with client-facing changes
• New code is covered by unit tests
• Affected documentation updated (docusaurus, tutorial, CMS (task created)

[Stream-SDK-Bot]

SDK Size

title	develop	branch	diff	status
StreamChatSwiftUI	7.53 MB	7.54 MB	+2 KB	🟢

[nuno-vieira]

Overall looks to good to me, but we are missing some stuff 👍

[nuno-vieira]

How does the tests look with different text sizes? 🤔 Do we have tests for this?

[nuno-vieira]

We probably could have reused some of the existing Color Pallete colors so that customers could have the styling for free 🤔 On UIKit, we are using the existing background colours in the ColorPallete. So if a customer already set their Theme, the voice recording attachment will be styled for free. In this case, they will need to set the color for this specific component. Which kinda defeats the porpose of a "Theme". That is why most of the names in the color palette don't have context (ex: Background1, Background2, etc..)

Especially for voiceMessageCurrentUserBackground, isn't this the same as messageCurrentUserBackground for example?

[laevandus]

I used exactly the same colors what we have in our Figma specs. These are slightly different from what the current palette has. Not sure what is the best way here.
a) use existing colors which do not match with Figma spec
b) add background9 and background10 to replace the use of streamBarsBackground and streamInnerBorder
c) close the PR and add it for v5 (might allows making more such changes which might break existing customisations)
d) …

[martinmitrevski]

For customers, it's easier if we are explicit about the names of the colors. Naming like backgroundX doesn't mean anything and it's always difficult to figure things out.
However, voiceMessageCurrentUserBackground should be the same as messageCurrentUserBackground, etc. Probably some misalignment also in the Figma.
So my suggestion would be: try to use what's already available for things that logically fit together (like the example above). Introduce new ones for the stuff we don't have with your naming convention, e.g. voiceMessageControlBackground.

[sonarqubecloud]

Quality Gate failed

Failed conditions
63.9% Coverage on New Code (required ≥ 70%)

See analysis details on SonarQube Cloud

[martinmitrevski]

Looks good, let's just align on the naming.

[martinmitrevski]

For customers, it's easier if we are explicit about the names of the colors. Naming like backgroundX doesn't mean anything and it's always difficult to figure things out.
However, voiceMessageCurrentUserBackground should be the same as messageCurrentUserBackground, etc. Probably some misalignment also in the Figma.
So my suggestion would be: try to use what's already available for things that logically fit together (like the example above). Introduce new ones for the stuff we don't have with your naming convention, e.g. voiceMessageControlBackground.

[nuno-vieira]

I think we forgot about this one: #688

The recording view should also be themable