.contextMenu is including a background coloration the place it isn’t alleged to

Spread the love


I’ve a Message View constructed from an avatar and a message bubble, I wish to add a .contextMenu to popup when urgent on the bubble and it ought to spotlight the bubble and avatar. The issue is that the context menu is including a whiteish background coloration between the avatar and bubble, when i wished to be clear.

enter image description here

The way it needs to be

enter image description here

Right here is my code:

struct MessageCellView: View {

@ObservedObject var viewModel: MessageCellViewModel

var physique: some View {
    HStack {
            HStack(alignment: .backside) {
                avatar("avatar")
                bubble()
                    .cornerRadius(17, corners: [.topLeft, .topRight, .bottomRight])
                    .cornerRadius(5, corners: [.bottomLeft])
            }
            .contextMenu {
                Button {
                    // Do somethind
                } label: {
                    if viewModel.isUserMuted {
                        Label("Unmute Person", systemImage: "particular person.fill.checkmark")
                    } else {
                        Label("Mute Person", systemImage: "particular person.fill.xmark")
                    }
                }
            Spacer()
        }
    }
}

personal func bubble() -> some View {
    VStack(alignment: .main) {
        Textual content(" identify ")
            .foregroundStyle(Shade.grey900)
            .font(.system(measurement: 13, weight: .semibold))
        Textual content(" Textual content ")
            .font(.system(measurement: 15, weight: .common))
        Textual content("9m")
            .foregroundStyle(Shade.grey700)
            .font(.system(measurement: 12, weight: .common))
    }
    .body(maxWidth: 250, alignment: .main)
    .padding(.horizontal, 10)
    .padding(.vertical, 6)
    .background(Shade.grey100)
}

personal func avatar(_ picture: String) -> some View {
    AsyncImage(url: URL(string: picture)) { section in
        change section {
        case .empty:
            ProgressView()
                .padding()
        case .success(let picture):
            picture.resizable()
                .aspectRatio(contentMode: .match)
                .body(maxWidth: 40, maxHeight: 40)
                .clipShape(Circle())
        case .failure:
            ProgressView()
                .padding()
        @unknown default:
            ProgressView()
                .padding()
        }
    }
}

}

Leave a Reply

Your email address will not be published. Required fields are marked *