SoftwareBrothers / adminjs

AdminJS is an admin panel for apps written in node.js
https://adminjs.co
MIT License
8.15k stars 659 forks source link

[Bug]: Styling/Color Issue on Confirmation Modals in Dark Theme (Guard Component) #1540

Closed Ellenek closed 11 months ago

Ellenek commented 1 year ago

What happened?

Description:

Expected Behavior:

When using the Dark theme in AdminJS, the colors of the Confirmation Modals should match the theme. The text should be easily readable and aligned with the theme's aesthetic.

Actual Behavior:

The Confirmation Modal appears completely white when the Dark theme is used. This results in unreadable text and misaligned aesthetics.

Steps to reproduce:

  1. Switch to the Dark theme in AdminJS.
  2. Press the Delete button or create a custom action with a guard option.
  3. The Confirmation Modal that appears is completely white, regardless of the Dark theme setting.

Screenshots or Log Errors:

https://github.com/SoftwareBrothers/adminjs/assets/26671103/7f282818-2907-4435-9d51-a5043bb3f72d

image image

Environment:

Additional context

The expected behavior is based on the assumption that all UI components should adjust their colors according to the currently set theme. In this case, the Confirmation Modal is not updating its colors when the Dark theme is activated, leading to usability and aesthetic issues.

Bug prevalence

Whenever I try to use custom component with a guard option or delete a record.

AdminJS dependencies version

What browsers do you see the problem on?

No response

Relevant log output

No response

Relevant code that's giving you issues

No response

jedlikowski commented 12 months ago

@Ellenek I'm experiencing the same issue. Mitigated it like this in custom css until it's fixed:

.adminjs_Overlay + .adminjs_Box {
    background-color: #1a1a1e;
}
image
Ellenek commented 12 months ago

@jedlikowski works like a charm, many thanks!

dziraf commented 11 months ago

This should be fixed via https://github.com/SoftwareBrothers/adminjs-design-system/releases/tag/v4.0.3

The theme should fix itself after you reinstall node modules but you may have to add the following lines to your package.json until the version is updated in main library:

 "resolutions": {
     "@adminjs/design-system": "4.0.3"
 }