Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

daisyUI theme support #427

Merged
merged 29 commits into from
Jul 12, 2024
Merged

Conversation

thomasfortes
Copy link
Contributor

@thomasfortes thomasfortes commented Jun 27, 2024

closes #329

As far as I could check I removed all references to tailwind colors and replaced them with daisyUI semantic ones.

I tried my best to keep the semantic meaning wherever it was possible, but that means that some details will be lost because daisyUI is pretty limited in the amount of colors, to counterbalance that I took a couple liberties with the opacity filter in some places to keep the light theme as close as possible to the actual one.

Also fixed the docs since now backpex support themes :)

There's the question about how to change themes, the daisyUI site recommends theme-change, but this will be a problem for later.

If there's something missing or just plain wrong just let me know and I'll try to fix it as soon as possible.

@thomasfortes
Copy link
Contributor Author

Forget about the last commit, a lot of issues that I didn't catch

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 28, 2024

There is still an issue with tables on show views:

image

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 28, 2024

I think we need a brighter ring for filter badges (right). Moreover, the filter button (left) seems to have a ring too bright.

image

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 28, 2024

We should also update the (dashed) border for upload fields. It's too bright in dark mode:

image

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 28, 2024

I don't know if it was an issue before, but the logout button in the user menu has a color too bright on hover. It should be the same as in the sidebar nav.

image

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 28, 2024

Hey, I commented with some issues I found. Thanks again for your effort! 🙏

@thomasfortes
Copy link
Contributor Author

thomasfortes commented Jun 28, 2024

@Flo0807 I fixed all these (and a few others that I found), just a question about the filter badges, at the moment the left one is using the secondary color and the second one just has a dark background without a ring or anything, could you check the colors and tell me what colors would you like?

I would go with accent for the left one, not so sure about the right one, maybe this.

image

Edit: Nevermind, misunderstood what you meant.

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 28, 2024

I've found some more 😅

Boolean Field: The red color is too bright in light mode (see Posts demo resource)
image

The Logout button is now too bright in light mode
image

The landing page also needs some adjustments (I think we should update this as well, even though Backpex users won't benefit from it)
image

Is there a way to make the values brighter in Show and Index views so that there is a difference between normal black text and the values (like before)? Also, I think the color difference between the table header and the table is too much. But I know it's a challenge to apply shades when you can't work with real colors.

Below you can see the before and after. I think the before is a little better in terms of shading because now the table header is in focus because of the dark gray color. I also liked the light gray color of the values and item actions in the table.

image (1)
image (2)

It's hard to make it look good for every theme, but maybe we can fix all of these 🚀

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 28, 2024

I like the filter badges in the dark mode.

In light mode there is an issue with the x-icon (its too bright on hover):
image

In addition, I liked that the filter label had a background before. It separated the filter label and value:

image

Currently, there is now background anymore.

@thomasfortes
Copy link
Contributor Author

As for the bright stuff, here it is normal, can you check if it isn't cached css or something?

image
image

About the colors and brightness of text and the table headers, I will adjust the opacity and see if I can get a better result.

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 28, 2024

As for the bright stuff, here it is normal, can you check if it isn't cached css or something?

You're right. It works now 🎉

@thomasfortes
Copy link
Contributor Author

Had to put a div wrapper in the overflow section in the resource_index_table.html.heex because opacity was messing with it.

@thomasfortes
Copy link
Contributor Author

Didn't do anything in the index mailing list form, but the rest is updated.

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 29, 2024

The shading looks much better now, thank you! 🙏

Can we add the background to the action buttons (cancel and save) again? It should also be not much of a color difference. A little darker than the white background. What do you think?

image

@Flo0807
Copy link
Collaborator

Flo0807 commented Jun 29, 2024

And can you format the code so that the pipeline succeeds?

@pehbehbeh pehbehbeh self-requested a review July 4, 2024 15:01
lib/backpex/fields/inline_crud.ex Outdated Show resolved Hide resolved
demo/assets/tailwind.config.js Show resolved Hide resolved
lib/backpex/html/resource/form_component.html.heex Outdated Show resolved Hide resolved
demo/assets/tailwind.config.js Outdated Show resolved Hide resolved
lib/backpex/html/resource/resource_index_table.html.heex Outdated Show resolved Hide resolved
@Flo0807 Flo0807 added the enhancement Changes that are not breaking label Jul 5, 2024
@Flo0807
Copy link
Collaborator

Flo0807 commented Jul 5, 2024

@thomasfortes I have updated the CI workflow. Can you merge develop back in here? Then the demo tests will hopefully succeed.

@thomasfortes
Copy link
Contributor Author

Now this is an weird error, mix format --check-formatted don't find anything here.

@Flo0807
Copy link
Collaborator

Flo0807 commented Jul 5, 2024

Now this is an weird error, mix format --check-formatted don't find anything here.

You need to execute it in the demo directory. We have two Mix projects: the demo and backpex itself.

@thomasfortes thomasfortes requested a review from Flo0807 July 8, 2024 16:08
@Flo0807
Copy link
Collaborator

Flo0807 commented Jul 12, 2024

Thank you for your work! 🚀

@Flo0807 Flo0807 merged commit 7d81d09 into naymspace:develop Jul 12, 2024
7 checks passed
@thomasfortes thomasfortes deleted the feature/daisyui-colors branch July 13, 2024 22:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Changes that are not breaking
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use daisyUI colors for theming and darkmode support
3 participants