Broke button styles

[fyastreb]

Laravel Nova 4.12.14

'Toggle Switch Field' has been installed and buttons on every Resource Create Page are broken (styles):

'Toggle Switch Field' has been removed and buttons is OK

Could you fix it?

[scramatte]

Hello,

Same issue here, it's quite annoying. Could you fix it ?

Regards

[davidpiesse]

Looks like a tailwind conflict.... Do you know what CSS / tw class is being a problem?

[scramatte]

These are button css class ml-auto shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 ml-auto cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 inline-flex items-center justify-center h-9 px-3 ml-auto shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 ml-auto

This are toggle css class tw-bg-green-500 tw-relative tw-inline-flex tw-h-6 tw-w-12 tw-items-center tw-rounded-full tw-shrink-0 tw-cursor-pointer tw-border-2 tw-border-transparent tw-transition-colors tw-duration-200 tw-ease-in-out tw-focus:tw-outline-none tw-focus-visible:tw-ring-2 tw-focus-visible:tw-ring-white tw-focus-visible:tw-ring-opacity-75

All your class are prefixed by tw- I really don't know what can be the conflict. This is probably something with button default background color.

[davidpiesse]

laravel/nova-issues#4394

It is an opacity thing... You may need to remove the opacity settings from your default colors.

ala

'colors' => [
    "400" => "251,154,164",
    "500" => "238,43,71",
    "600" => "245,103,118",
]

[scramatte]

Hi,

Fix doesn't work for me. Have you test it on your side? Regards

[davidpiesse]

I set my nova color defaults in the config file and it worked!

[scramatte]

Which version of nova 4 are you using? I've made php artisan config:clear and php artisan optimize and nothing ... What I've missed?

[davidpiesse]

Have you rebuilt your nova js and CSS?

[scramatte]

No, I don’t know how to achieve this …

[davidpiesse]

php artisan nova:publish should help out. Its in the Nova 4 install instructions. It doesn't seem to be necessary, but it may help

[jodhaakbar]

still issue on nova 4.13.0

[davidpiesse]

I have just pushed another commit onto the v4 branch that should fix this. When adding in the tw extras it for some reason sets the button bg back to transparent...

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

[kitro]

Same issue still ocurred with v4

[davidpiesse]

@kitro Just want to double check you are using the v4 branch and not the main branch?

[kitro]

@davidpiesse The issue is fixed in dev-master :+1: just in my project, there is another package https://github.com/Visanduma/nova-two-factor/issues/8 has the same issue it's also fixed. Thank you,

[davidpiesse]

I have implemented another fix for the CSS. Please check the v4 branch now.

[kitro]

It works :+1: The SHA tested is 3b21f7979a692faacb32ec51d065b2a6f74a36bf Thanks,

[matthewhutchings]

Getting the same issue using:

Nova v4.16.1 davidpiesse/nova-toggle (4.0) "tailwindcss": "^3.1.0",