Make card have border on dark mode

[ettiennelouw]

Added gray border-gray-600 on card for dark mode to outline of card and to title bottom border.

Before

After

[PH7-Jack]

@ettiennelouw I think that it can be a prop to enable borders in the card. @dansysanalyst @putera @trippo What's your option about it?

[putera]

What's your option about it?

I think this is good for the dark mode. 👍🏽

[ettiennelouw]

I can make it a prop might make it more configurable. On light mode it has a shadow but then just give it a light shade of gray on light and the light shade on dark aswell but enable or disable with prop? I will make the change.

[PH7-Jack]

@ettiennelouw Will be good if you add an prop option to enable borders

[trippo]

I think is better to change the bg color of card

[ettiennelouw]

Made the border configurable but with defaults to match the rest of the components.

Default Light

Default Dark

Matches all components

Custom Pass to card <x-card title="Your title here" border="border-orange-600 dark:border-red-600"> to override with custom border styles.

[PH7-Jack]

@ettiennelouw Great, thanks, but change the default card style without border in the dark mode. Many websites are using the card without borders in the dark mode, like the WireUI documentation, if enable the borders in the dark mode, the wireui docs will be strange.

[ettiennelouw]

@PH7-Jack instead of making a border property, I just moved the classes for the card, header and footer to the PHP class so that you can pass in the classes that you want for instance border, dark:border. Just had to do a little check on the header class as you had dark:border-0, if you can just check the logic in the file.

I think this might make it a bit more flexible and cater for all kinds of classes and styles someone wants to add to the card.

<x-card title="Your title here" cardClasses="border border-gray-200 dark:border-secondary-600" headerClasses="dark:border-secondary-600">
code sdf sdf sd fsd f sdf

     <x-slot name="footer">
         <div class="flex items-center justify-between">
                <x-button label="Delete" flat negative />
               <x-button label="Save" primary />
         </div>
    </x-slot>
</x-card>

[ettiennelouw]

Awsome all comitted.