Not fully compatible with the dark mode

[frantz45]

Some areas are not compatible with the dark theme:

Wizard Alert Rules main page:

Wizard Lists main page:

Text box when creating/editing a rule:

Background of rule conditions when creating/editing a THEN/OR/AND rule:

[c8y3]

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

[c8y3]

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.

[frantz45]

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:

[c8y3]

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:

• keep HiglightedDiv
• chose another way to highlight (our own custom colors adapted to the dark mode toggle, or some lines around, or something else. Maybe there are other components in Graylog to do just that, if there is some example...)
• drop the highlighting and just have the same white background

[frantz45]

Fixed in the latest master build (5.1.1). Issue can be closed after the version is officially released