@samitouri / QOS-React-2 / commits / fb3b9ead47

fix[react-devtools] component badge in light mode is now not invisible (#29852)

In light mode, component badges in profiler were invisible due to using the alpha channel to produce the grayish color. Instead I'm using the equivalent RGB without that alpha. **before** In light mode, component badges in profiler were invisible (forwardRef badge in this case): ![Screenshot 2024-06-11 at 13 15 16](https://github.com/facebook/react/assets/5188459/385b80a5-d385-4eac-bac6-7fec6938d78f) **after** Profiler tooltip fix. also notice there's no regression on the right menu: ![Screenshot 2024-06-11 at 13 04 41](https://github.com/facebook/react/assets/5188459/64aa27f7-35b8-4e3b-91d4-c12d5a97330e) also works in dark mode: ![Screenshot 2024-06-11 at 13 12 17](https://github.com/facebook/react/assets/5188459/99aa55fd-23ee-4881-9676-63eca86bf761) Still visible in components in light mode, whether selected or not: ![Screenshot 2024-06-11 at 13 04 49](https://github.com/facebook/react/assets/5188459/59c0bf63-d9b0-4d46-a145-f615249d1da0) components dark mode: ![Screenshot 2024-06-11 at 13 10 25](https://github.com/facebook/react/assets/5188459/16e61acc-c431-4bfa-8a65-ca6701f4379b)

Vitali Zaidman committed Jun 11, 2024 at 14:32 UTC fb3b9ead472ec0254e4ce7bd9000eb100010f08e
1 file changed +1 -1
packages/react-devtools-shared/src/devtools/constants.js
+1 -1
@@ -50,7 +50,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
50 '--color-commit-gradient-text': '#000000',
51 '--color-component-name': '#6a51b2',
52 '--color-component-name-inverted': '#ffffff',
53 - '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',
53 + '--color-component-badge-background': '#e6e6e6',
54 '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
55 '--color-component-badge-count': '#777d88',
56 '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',