Fix white circle button is visible beneath the ChannelAvatarView

[sheep-q]

🔗 Issue Link

Github issue

🎯 Goal

The channel avatar view should show correctly without a visible white circle below.

🛠 Implementation

• Change the style of button inside ToolbarItem
• Update the initialization of ChannelAvatarView to remove deprecated init warninig.

🧪 Testing

🎨 Changes

☑️ 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)

[laevandus]

Hi, we can't do any changes to the public API at the moment (only in major versions, but the next one is a minor upgrade). Could you please take these out and just keep the buttonStyle change.
Is there an additional issue with the headerImage?

[sheep-q]

Got it, I deleted headerImage because when using it in the initialization of ChannelAvatarView, it shows warning init(avatar:showOnlineIndicator:size:)' is deprecated: Use automatically refreshing avatar initializer.
But no problem, it's not the main reason so I just keep the buttonStyle change

[laevandus]

I did some testing and seems like it also changes spacings:
Before:

After:

I'll investigate this as well.

[laevandus]

What does not break the padding is changing the Button's offset from 8 -> 4.

[sheep-q]

I think changing the Button's offset causes confusing. Clearly, this offset should be equal offset of ChannelAvatarView, either both set to 0 or 8.
I believe that, the issue was from SwiftUI framework that automatically add padding to ToolbarItem(placement: .navigationBarTrailing). I tested the same ZStack's content to several wrapped views without encountering any issues

[sheep-q]

Or you can just configure Button like this without multiple layers in ZStack, it doesn't care about additional padding.
I'm not sure about the purpose of your using separate layers, so I wouldn't use this approach.

               Button {
                    resignFirstResponder()
                    isActive = true
                } label: {
                    ChannelAvatarView(
                        avatar: headerImage,
                        showOnlineIndicator: onlineIndicatorShown,
                        size: CGSize(width: 36, height: 36)
                    )
                    .offset(x: 8)
                }

[laevandus]

Our default design has custom spacing defined for the avatar shown in the toolbar in relative to the messages in the message list. This is why the offset is used there.

[sheep-q]

Hi @laevandus, Would you like to change the offset for both Button and ChannelAvatarView or just for Button

[sheep-q]

which solution did you approve?
Wrap the ChannelAvatarView inside the Button or modify the Button style (current change)

[laevandus]

Hi @sheep-q, let's go with what you proposed before, but with offset 4 (our default design's requirement)

Button {
                    resignFirstResponder()
                    isActive = true
                } label: {
                    ChannelAvatarView(
                        avatar: headerImage,
                        showOnlineIndicator: onlineIndicatorShown,
                        size: CGSize(width: 36, height: 36)
                    )
                    .offset(x: 4)
                }

[sheep-q]

Hi @laevandus, I've pushed an updated commit, take a look. thank you

[laevandus]

Thank you @sheep-q I'll take it in soon.

[laevandus]

Thank you for your contribution! ✅

[laevandus]

I will add a CHANGELOG entry in a separate PR. Also verified that this change does not create any snapshot test failures.