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.

[laevandus]

This change also has to work for iOS 14 which has brought most of the complexities.

[laevandus]

Hi @sheep-q I did some testing on older iOS versions and this is OK. Also looked into the question of the offset, and the correct is actually 4, not 8. Please change your snippet above to use 4 and let's get this change in.