Skip to content

Commit 7e2d0e6

Browse files
jonasfroellerjonasfroeller
committed
improves styling of /login and /register (closes #346)
1 parent 1ba9b88 commit 7e2d0e6

File tree

2 files changed

+56
-57
lines changed

2 files changed

+56
-57
lines changed

‎resources/views/livewire/auth/login.blade.php‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -39,36 +39,42 @@ public function submit()
3939
};
4040
?>
4141

42+
<div class="flex flex-col items-center w-full h-full bg-gray-100">
43+
<div class="flex flex-col justify-center mt-10">
44+
<div class="flex gap-1 items-center mt-16 mb-2 sm:mt-10">
45+
<div class="w-[30px] h-[30px] rounded-full bg-primary-blue"></div>
46+
<div class="w-2 h-1 bg-primary-blue"></div>
47+
<div class="w-[30px] h-[30px] bg-other-grey rounded-full"></div>
48+
</div>
49+
50+
<div class="px-10 pt-8 pb-8 mx-auto w-96 max-w-full bg-white rounded-lg border border-border-color">
51+
<h1 class="mb-8 text-6xl uppercase font-koulen text-primary-blue">Login</h1>
4252

43-
<div class="flex flex-col items-center mt-4 bg-gray-100 sm:justify-center sm:pt-0 dark:bg-gray-900">
44-
<div
45-
class="w-full sm:max-w-md mt-6 p-12 bg-white dark:bg-gray-800 border-[1px] border-border-color sm:rounded-lg">
53+
<form wire:submit="save" class="flex flex-col gap-2">
54+
<sl-input size="medium" required wire:ignore wire:model="name" placeholder="Your name"></sl-input>
55+
<sl-input size="medium" required wire:ignore wire:model="email" placeholder="Your email" type="email"></sl-input>
56+
<sl-input size="medium" required wire:ignore wire:model="password" placeholder="Your password" type="password"></sl-input>
4657

47-
<div class="flex justify-center">
48-
<div class="w-full max-w-md">
49-
<h1 class="mb-9 text-6xl font-koulen text-primary-blue">LOGIN</h1>
58+
<div class="flex items-center pt-2 pb-1">
59+
<div class="flex-grow border-t border-border-color"></div>
60+
<span class="flex-shrink mx-4 text-secondary-grey">or via OAuth</span>
61+
<div class="flex-grow border-t border-border-color"></div>
62+
</div>
5063

51-
<form wire:submit="submit">
52-
<sl-input wire:ignore wire:model="email" placeholder="Your email" type="email"></sl-input>
53-
<br>
54-
<sl-input wire:ignore wire:model="password" placeholder="Your password" type="password"></sl-input>
64+
<a class="block mx-auto" href="{{route('github.login')}}" target="_blank">
65+
<sl-icon wire:ignore name="github" class="mt-0.5 text-4xl"></sl-icon>
66+
</a>
5567

56-
<div class="flex gap-2 mt-4">
57-
<a href="{{route('github.login')}}" target="_blank">
58-
<sl-icon wire:ignore name="github" class="mt-0.5 text-4xl"></sl-icon>
68+
<div class="flex justify-between items-end mt-5">
69+
<a class="text-sm no-underline text-primary-blue hover:underline"
70+
href="{{ url('register') }}">
71+
No Account yet?
5972
</a>
73+
74+
<sl-button size="medium" wire:ignore type="submit">Login</sl-button>
6075
</div>
61-
<div class="flex justify-between items-center mt-2">
62-
<a class="text-sm text-gray-600 underline rounded-md dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
63-
href="{{ url('register') }}">
64-
No Account yet?
65-
</a>
66-
<sl-button wire:ignore type="submit">Login</sl-button>
67-
</div>
68-
</form>
69-
</div>
76+
</form>
7077
</div>
71-
7278
</div>
7379

7480
@if($account_login_message)
@@ -78,5 +84,4 @@ class="w-full sm:max-w-md mt-6 p-12 bg-white dark:bg-gray-800 border-[1px] borde
7884
{{$account_login_message}}
7985
</sl-alert>
8086
@endif
81-
8287
</div>

‎resources/views/livewire/auth/register.blade.php‎

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -44,40 +44,34 @@ public function save()
4444
}
4545
4646
};
47-
4847
?>
49-
<div class="mt-4 flex flex-col sm:justify-center items-center sm:pt-0 bg-gray-100 dark:bg-gray-900">
50-
<div
51-
class="w-full sm:max-w-md mt-6 p-12 bg-white dark:bg-gray-800 border-[1px] border-border-color sm:rounded-lg">
52-
53-
<div class="flex justify-center">
54-
<div class="w-full max-w-md"> <!-- Adjust max width as needed -->
55-
<h1 class="font-koulen text-6xl text-primary-blue mb-9">REGISTER</h1>
56-
57-
<form wire:submit="save">
58-
59-
<sl-input required wire:ignore wire:model="name" placeholder="Your name"></sl-input>
60-
<br>
61-
<sl-input required wire:ignore wire:model="email" placeholder="Your email" type="email"></sl-input>
62-
<br>
63-
<sl-input required wire:ignore wire:model="password" placeholder="Your password"
64-
type="password"></sl-input>
65-
<br>
66-
<sl-input required wire:ignore wire:model="password_confirmation"
67-
placeholder="Confirm your password"
68-
type="password"></sl-input>
69-
70-
71-
<div class="flex items-center justify-between mt-5">
72-
<a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
73-
href="{{ url('login') }}">
74-
Already registered?
75-
</a>
76-
77-
<sl-button wire:ignore type="submit">Register</sl-button>
78-
</div>
79-
</form>
80-
</div>
48+
49+
<div class="flex flex-col items-center w-full h-full bg-gray-100">
50+
<div class="flex flex-col justify-center mt-10">
51+
<div class="flex gap-1 items-center mt-16 mb-2 sm:mt-10">
52+
<div class="w-[30px] h-[30px] rounded-full bg-primary-blue"></div>
53+
<div class="w-2 h-1 bg-primary-blue"></div>
54+
<div class="w-[30px] h-[30px] bg-other-grey rounded-full"></div>
55+
</div>
56+
57+
<div class="px-10 pt-8 pb-8 mx-auto w-96 max-w-full bg-white rounded-lg border border-border-color">
58+
<h1 class="mb-8 text-6xl uppercase font-koulen text-primary-blue">Register</h1>
59+
60+
<form wire:submit="save" class="flex flex-col gap-2">
61+
<sl-input size="medium" required wire:ignore wire:model="name" placeholder="Your name"></sl-input>
62+
<sl-input size="medium" required wire:ignore wire:model="email" placeholder="Your email" type="email"></sl-input>
63+
<sl-input size="medium" required wire:ignore wire:model="password" placeholder="Your password" type="password"></sl-input>
64+
<sl-input size="medium" required wire:ignore wire:model="password_confirmation" placeholder="Confirm your password" type="password"></sl-input>
65+
66+
<div class="flex justify-between items-end mt-5">
67+
<a class="text-sm no-underline text-primary-blue hover:underline"
68+
href="{{ url('login') }}">
69+
Already registered?
70+
</a>
71+
72+
<sl-button size="medium" wire:ignore type="submit">Register</sl-button>
73+
</div>
74+
</form>
8175
</div>
8276
</div>
8377

0 commit comments

Comments
 (0)