Agenta-AI/agenta

[Bug]: 'Invite Members' modal is not optimized for dark mode

ashrafchowdury opened this issue · 1 comments

ashrafchowdury commented

Describe the bug

The 'Invite Members' model on the settings page is not optimized for dark mode, it's unusable in dark mode but perfectly working in light mode.

To Reproduce
Steps to reproduce the behavior:

  1. Login to the Agenta cloud app.
  2. Twitch to dark mode.
  3. Navigate to the settings page.
  4. Click on the 'Invite' button.
  5. See the model UI.

Expected behavior
The 'Invite Members' modal should be visually accessible in dark mode, with all text, buttons, and input fields.

Screenshots

image

Desktop (please complete the following information):

  • OS: [e.g. Windows]
  • Browser [e.g. chrome, edge]
  • Version [e.g. latest]

Please make sure to provide all the requested information to expedite the debugging process. Thank you for helping us improve our project!

dosubot commented

To optimize the 'Invite Members' modal for dark mode and ensure it is visually accessible and functional, you can use the dark mode color scheme defined in your tailwind.config.ts file. Here is an example of how you can apply these styles to the modal:

<div class="bg-dark-tremor-background-DEFAULT text-dark-tremor-content-DEFAULT border-dark-tremor-border-DEFAULT shadow-dark-tremor-card rounded-tremor-default p-4">
    <h2 class="text-dark-tremor-content-strong">Invite Members</h2>
    <form>
        <label class="block text-dark-tremor-content-emphasis mb-2" for="email">Email:</label>
        <input class="bg-dark-tremor-background-muted text-dark-tremor-content-DEFAULT border-dark-tremor-border-DEFAULT shadow-dark-tremor-input rounded-tremor-small p-2 w-full" type="email" id="email" name="email" required>
        <button class="mt-4 bg-dark-tremor-brand-DEFAULT text-dark-tremor-brand-inverted rounded-tremor-small p-2 w-full">Send Invite</button>
    </form>
</div>

In this example:

  • The modal background uses bg-dark-tremor-background-DEFAULT.
  • The text color uses text-dark-tremor-content-DEFAULT and text-dark-tremor-content-strong for emphasis.
  • The border color uses border-dark-tremor-border-DEFAULT.
  • The shadow uses shadow-dark-tremor-card.
  • The input field background uses bg-dark-tremor-background-muted and text color uses text-dark-tremor-content-DEFAULT.
  • The button background uses bg-dark-tremor-brand-DEFAULT and text color uses text-dark-tremor-brand-inverted.

These styles ensure that the modal is visually accessible and functional in dark mode [1].

To continue talking to Dosu, mention @dosu.

  • 👍1
  • 👎2