User Feedback Widget issues

[pdziugas]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/angular

SDK Version

8.27.0

Framework Version

No response

Link to Sentry event

No response

Reproduction Example/SDK Setup

Sentry.feedbackIntegration({
    colorScheme: 'light',
    enableScreenshot: true,
    ...
})

Steps to Reproduce

The issue here is that using the light color scheme inside the feedback integration and adding a darker color for --actor-background is enough to break the contrast of the icon shown in the widget__actor button.

#sentry-feedback {
    --actor-color: #fff !important;
    --actor-background: #0d5788 !important;
    ...
}

The problem is that changing the --foreground color to a lighter one also changes the content inside the modal, causing it to be messed up. There should be a way to change the color or icon itself, or even remove it altogether.

---

Another issue is that modal content seems to be messed up on screens (600px or less) where the modal is opened and takes up full device screen

Expected Result

I'd expect for an easy change for the icon color or maybe the icon itself. Expected result:

Actual Result

[andreiborza]

Hi, thank you for the valuable feedback and improvement suggestions! These all seem very reasonable to me.

cc @billyvg

[c298lee]

HI @pdziugas! A PR is up to fix the feedback icon issue. Once it's released, actor-color will also apply to the feedback icon.
How did you get into the state where the feedback modal looks like that on small screens? Through my own testing using Chrome dev tools and using the widget on a mobile device, it looks as expected to me.

[pdziugas]

hey, @c298lee. Thanks! I'm not sure to be honest regarding the modal. Haven't made any changes to that, Looks exactly the same on my phone. The .form class seems to mess the alignment up

[andreiborza]

hi @pdziugas, do you have a reproduction repo for this?

[pdziugas]

Hello, @andreiborza, I've created a new repo here which has the same issue reproduced. Thanks!

[andreiborza]

@pdziugas thanks, taking a look!

[c298lee]

@pdziugas Thanks for the repo! This PR should fix the modal issues, and should be out in the next SDK release. Let us know if you encounter anymore issues!

[pdziugas]

@c298lee That will be it for now, thank you :)

[AbhiPrasad]

This was released with https://github.com/getsentry/sentry-javascript/releases/tag/8.31.0 - thanks for the GH issue @pdziugas