Add branding to the login screen

[SebastiaanKloos]

I was wondering if more people need branding on the login screen.

For now I have overwritten the login partial in my project. I'd be happy to make a PR if you think this is a good idea too.

I'd love to hear what you think!

---

Create a new file /resources/views/vendor/filament/login.blade.php and add the following code

<div class="flex items-center justify-center min-h-screen bg-gray-100 text-gray-900">
    <div class="p-2 max-w-md space-y-8 w-screen">
        <form wire:submit.prevent="authenticate" class="bg-white space-y-8 shadow border border-gray-300 rounded-2xl p-8">
            <div class="w-full flex justify-center">
                <x-filament::brand></x-filament::brand>
            </div>

            <h2 class="font-bold tracking-tight text-center text-2xl">
                {{ __('filament::login.heading') }}
            </h2>

            {{ $this->form }}

            <x-filament::button type="submit" class="w-full">
                {{ __('filament::login.buttons.submit.label') }}
            </x-filament::button>
        </form>

        <x-filament::footer />
    </div>
</div>

---

[ralphjsmit]

I think this is a good idea Sebastiaan!

[danharrin]

This looks good for your custom logo, but how does it look with the default brand (APP_NAME)?

[SebastiaanKloos]

@danharrin I would suggest adding a custom partial specifically for the top of the card on the login screen like <x-filament::brand></x-filament::brand> is being used in the sidebar. I think that should default to a title with APP_NAME.

[danharrin]

What happens if you use <x-filament::brand /> there though, does it look ok?

[SebastiaanKloos]

This one is with the default <x-filament::brand />. I think it's okay to re-use the <x-filament::brand />` on the login page.

[danharrin]

Yeah, I don't think this looks too bad! Make a PR.