Fix the calendar icon color on dark theme

[ashu8912]

In some of the places, the color of the calendar icon is still dark instead it should be white as shown below How it is:

How it should be

[xdevore]

Hello! I'm new to open source, but would love to try take on this bug if possible. If that would be alright, do you have any tips for potential solutions or getting started? Thanks :)

[egomezbpedro]

Hi @ashu8912,

I've been searching through the frontend codebase for a possible explanation for this issue, but I've not found anything. I'm still getting familiar with the code. I first thought to be a misbehaviour of the theme library but so far is been a dead end.

I'll appreciate any insights that you may have on where to look for this behavior.

Cheers

Dark Theme Wrong Dark Theme Correct Light Theme Correct Light Theme Wrong

[ashu8912]

Hello @egomezbpedro first of all welcome to headlamp codebase :D, Ok so about the issue It's an issue that is there in only some views like if you go to the namespace list view the calendar icon contrast there is not correct in dark theme and then the detail view for it also has the same issue, So this issue can be solved in two parts where we first find all the places where this is happening and then adding a pr that fixes this.

If you need any help with this i am more than happy to help.

[egomezbpedro]

Hi @ashu8912,

thanks for your inputs. What I've seen is that in the Labels file there are a set of classes that are being applied. In here to normalize this behavior and the correct color in all pages is to target the svg and force the correct color.

const useHoverInfoLabelStyles = makeStyles({
  display: {
      display: 'inline-block',
+    '& svg': {
+     color: 'unset !important'
+  }
  },

I'm sure that there is another workaround to this same goal, please let me know your feedback on this and any other hints or tips on what to think for this change.

Thanks :)

[egomezbpedro]

Hi @ashu8912,

Following the work done in #1359 we can close this issue.

Thank you