Open frantz45 opened 2 years ago
For the rule list, it seems to be because we hardcoded the text color to be 000 when the rule is valid (see AlertRuleList.jsx, colorValid variable). Instead, we should probably be changing the className to text-success/text-danger or use bsStyle. See https://getbootstrap.com/docs/3.4/css/#helper-classes-colors and https://getbootstrap.com/docs/3.4/css/#helper-classes-backgrounds
There also seems to be the possibility to style components (with styled-components) using the them colors as illustrated in graylog code: views/components/widgets/MessageTable.tsx.
I've tested with Wizard v5.1.0 but there are still some issues:
For AND and THEN rules:
It's even visible in light mode:
It's also the case with an OR rule but with a different color:
In the case of the THEN and AND, it's because component <HighlightedDiv>
is explicitly written in the code. For the OR, it is a bit more complex, the color is hardcoded: <div style={{ backgroundColor: '#f6f6f6', padding: '10px' }}>.
So, I believe the code was written this way on purpose in order to differentiate the conditions that are linked by the connector AND, THEN, OR from the rest of the configuration.
What would be best to do:
Fixed in the latest master build (5.1.1). Issue can be closed after the version is officially released
Some areas are not compatible with the dark theme:
Wizard Alert Rules main page:![rule](https://user-images.githubusercontent.com/44297634/140374494-2cd0749d-8cca-4055-9997-1089044e6e08.png)
Wizard Lists main page:![list](https://user-images.githubusercontent.com/44297634/140374489-a9a5c764-95c6-4896-9e1b-f842a82c0c98.png)
Text box when creating/editing a rule:![value](https://user-images.githubusercontent.com/44297634/140374492-c7d94a8f-df7c-42d9-8744-503989981c38.png)
Background of rule conditions when creating/editing a THEN/OR/AND rule:![then](https://user-images.githubusercontent.com/44297634/179804784-13b96618-adf0-48f7-bcde-e768123a254a.png)