Adjust Table Header Hover Background Color about twenty HOT 6 CLOSED

To adjust the table header hover and click background colors, follow these steps:

1. Open src/components/TableHeader.css.
2. Locate the CSS class for the table header hover state, typically something like .table-header:hover.
3. Update the background-color property to use the Background-Secondary variable:

.table-header:hover {
  background-color: var(--Background-Secondary);
}

4. Locate the CSS class for the table header click state, typically something like .table-header:active.
5. Update the background-color property to use the Background-Tertiary variable:

.table-header:active {
  background-color: var(--Background-Tertiary);
}

Ensure that the Background-Secondary and Background-Tertiary variables are defined in your theme file, usually found in src/styles/theme.css or similar.

References

from twenty.

Hello! I would like to work on this issue.

from twenty.

Sure @joshmurdock, thanks for contributing!

from twenty.

I am unfortunately having issues setting up my dev database. I will continue to troubleshoot but with such a simple bug I would remove this assignment from me.

from twenty.

Thanks @joshmurdock I was able to get up and running, feel free to follow up with questions about running the dev db locally :)

@Bonapara Hello! I've made a working change that addresses this issue, on a fork of mine.

Pull request: #5967

It's my first OSS contribution, but I made sure to get through the Best Practices section on your website. Is there anything else I must do in order to land this code change? Thanks :)

from twenty.

Closed by #5967

from twenty.