Light mode for Dashboard

[deboer-tim]

trafficstars

Is your enhancement related to a problem? Please describe

The Dashboard doesn't support light mode.

Describe the solution you'd like

Define any missing colors in the light mode palette and get the main components of the Dashboard working in light mode.

Describe alternatives you've considered

No response

Additional context

No response

[ekidneyrh]

Here's what I had in Penpot for the Dashboard. I know it's the old layout, but that shouldn't effect the colours.

Dashboard Theming.pdf

[feloy]

Missing colors for ProviderCard:

• color of Podman (text-gray-400 in sources for dark mode)
• color of v5.0.2 (text-gray-800 in sources for dark mode)

[feloy]

Missing colors for Carousel:

color of left / right arrows (bg-gray-800 hover:bg-gray-600 disabled:bg-charcoal-700 in sources for dark mode)

[feloy]

Missing colors for GuideCard:

• color for hover card (hover:bg-zinc-700 in sources for dark mode)

[ekidneyrh]

color of Podman (text-gray-400 in sources for dark mode)

Light mode charcoal-900

color of v5.0.2 (text-gray-800 in sources for dark mode)

Light mode purple-900

Missing colors for Carousel:

color of left / right arrows (bg-gray-800 hover:bg-gray-600 disabled:bg-charcoal-700 in sources for dark mode)

Light mode bg-purple-900 hover:bg-purple-600 disabled:bg-charcoal-200. For the arrows within the circle/button can then be transparent or match the bg colour of the card, so in this case they would be gray-050

Missing colors for GuideCard:

color for hover card (hover:bg-zinc-700 in sources for dark mode)

Is the guide card the cards within the carousel? If so, I have them for gray-300 and hover: gray-200

Thanks for this @feloy!!

[ekidneyrh]

Just re-opening this as I have some comments on the current implementation. If this would be better elsewhere, let me know.

Current implementation of the dashboard:

I think a few minor changes would be beneficial. I'll also have these changed in the design documentation.

Connection Status Labels

This could probably warrant its own ticket. I would recommend the following changes for light mode:

content-card-text

I don't think this colour is defined yet. This could be labelled the error message text. I would recommend changing this to charcoal-500 for better visibility.

content-card-carousel-card-text

Also change this to charcoal-500. I know it was my decision for the purple here, but having it match the provider cards works better I think.

With the changes above, the dashboard should look like this:

[deboer-tim]

@ekidneyrh For the connection status and carousel colors I've opened PR #8236. Please review these and note that they are shared color variables now and providers weren't using them - the connection status won't be updated until both #8236 (updates to colors) and #8235 (provider should use the color vars) are merged, but you will see the status colors change everywhere else they are used in the meantime (e.g. status icons on every page).

For the remaining content-card-text, it's not clear to me which text this color would be used for. Let's chat or please open a separate issue to handle this and I can update it.