react-email icon indicating copy to clipboard operation
react-email copied to clipboard

Tooltip content text is invisible

Open Fadingvision opened this issue 1 year ago • 8 comments

Describe the Bug

image

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

https://demo.react.email/preview/notifications/github-access-token?view=source

To Reproduce

https://demo.react.email/preview/notifications/github-access-token?view=source

Expected Behavior

Tooltip content text is visible

What's your node version? (if relevant)

No response

Fadingvision avatar Feb 23 '24 09:02 Fadingvision

Seems ok for me, the tooltip seems to appear fine image

gabrielmfern avatar Feb 23 '24 13:02 gabrielmfern

@gabrielmfern looked into some details, this bug looks like it is related to os theme, further information:

os info

windows 10 chrome version(121.0.6167.189)

windows light theme:

image

windows dark theme(which looks fine):

image

Looks like the text color should be set to white anyways, hope it helps.

Fadingvision avatar Feb 26 '24 07:02 Fadingvision

is the bug still exists? Shall I give it a try?

devharipragaz007 avatar Mar 04 '24 23:03 devharipragaz007

is the bug still exists? Shall I give it a try?

Yup it's still there. PR's are welcome! Would love to review yours if you do make one. You also don't have to ask permission to open one either. :)

gabrielmfern avatar Mar 11 '24 11:03 gabrielmfern

On Mac OS is the same, depends on the system theme.

Screenshot 2024-03-11 at 16 50 35

ffiona avatar Mar 11 '24 15:03 ffiona

is the bug still exists? Shall I give it a try?

Yup it's still there. PR's are welcome! Would love to review yours if you do make one. You also don't have to ask permission to open one either. :)

Please assign this to me.

devharipragaz007 avatar Mar 12 '24 01:03 devharipragaz007

Screenshot 2024-04-27 210800

Hello, it's my first time commenting on a issue. but I'd like to add something. I think the issue in here <TooltipPrimitive.Content {...props} className={cn( 'bg-black border border-slate-6 z-20 px-3 py-2 rounded-md text-xs', '${inter.variable} font-sans', )} ref={forwardedRef} sideOffset={sideOffset} > {children} </TooltipPrimitive.Content>

instead of giving bg-black we can set the color based on the theme. I haven't explored the entire code so I'm not sure what is being used for themes, but maybe use external package and conditionally change the bg color, for eg dark:bg-black for dark mode and default bg-white. Forgive me if I'm commenting anything wrong

kaustabhws avatar Apr 27 '24 15:04 kaustabhws

@gabrielmfern Hey, I've checked and the issue is still present, can you please assign it to me?

ranafaraznaru avatar Jul 24 '24 23:07 ranafaraznaru