feature - 3 - Improve login page layout
This commit is contained in:
parent
faed07395e
commit
197a74ee9b
9 changed files with 165 additions and 50 deletions
|
|
@ -94,3 +94,38 @@ .button-accent-outline {
|
|||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* Checkbox Styles */
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: var(--color-gray-600);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--color-accent-blue);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +1,37 @@
|
|||
@extends('components.layouts.guest')
|
||||
|
||||
@section('content')
|
||||
<h2 class="text-2xl text-center text-accent-blue mb-6">Login</h2>
|
||||
|
||||
<h2 class="text-xl text-center text-accent-blue mb-4">Sign in to your account</h2>
|
||||
|
||||
<form method="POST" action="{{ route('login') }}">
|
||||
@csrf
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium mb-2">Email</label>
|
||||
<input type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value="{{ old('email') }}"
|
||||
class="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue @error('email') border-red-500 @enderror"
|
||||
placeholder="Enter your email"
|
||||
required
|
||||
autofocus>
|
||||
@error('email')
|
||||
<span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium mb-2">Password</label>
|
||||
<input type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue @error('password') border-red-500 @enderror"
|
||||
placeholder="Enter your password"
|
||||
required>
|
||||
@error('password')
|
||||
<span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
<x-input
|
||||
type="email"
|
||||
name="email"
|
||||
label="Email"
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="inline-flex items-center">
|
||||
<input type="checkbox"
|
||||
name="remember"
|
||||
class="rounded border-secondary bg-gray-600 text-primary focus:ring-accent-blue">
|
||||
<span class="ml-2 text-sm">Remember me</span>
|
||||
</label>
|
||||
</div>
|
||||
<x-input
|
||||
type="password"
|
||||
name="password"
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
/>
|
||||
|
||||
<button type="submit" class="w-full py-2 px-4 bg-primary text-white text-xl rounded hover:bg-secondary transition-colors duration-200 mb-4">
|
||||
Login
|
||||
</button>
|
||||
<x-checkbox name="remember" label="Remember me" />
|
||||
|
||||
<div class="text-center">
|
||||
<a href="{{ route('register') }}" class="text-accent-blue hover:underline text-sm">
|
||||
Don't have an account? Register here
|
||||
</a>
|
||||
<x-button type="submit" class="w-full">
|
||||
Sign In
|
||||
</x-button>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<span class="text-sm text-gray-400">Don't have an account?</span>
|
||||
<a href="{{ route('register') }}" class="text-accent-blue hover:underline text-sm ml-1">Register</a>
|
||||
</div>
|
||||
</form>
|
||||
@endsection
|
||||
@endsection
|
||||
|
|
|
|||
20
resources/views/components/button.blade.php
Normal file
20
resources/views/components/button.blade.php
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@props([
|
||||
'variant' => 'primary',
|
||||
'type' => 'button',
|
||||
])
|
||||
|
||||
@php
|
||||
$baseClasses = 'px-4 py-2 rounded transition-colors duration-200 disabled:opacity-50';
|
||||
|
||||
$variantClasses = match($variant) {
|
||||
'primary' => 'bg-primary text-white hover:bg-secondary',
|
||||
'outline' => 'border-2 border-secondary text-gray-100 hover:bg-gray-700',
|
||||
'danger' => 'bg-danger text-white hover:bg-red-700',
|
||||
'danger-outline' => 'border-2 border-danger text-danger hover:bg-danger hover:text-white',
|
||||
default => 'bg-secondary text-white hover:bg-secondary',
|
||||
};
|
||||
@endphp
|
||||
|
||||
<button type="{{ $type }}" {{ $attributes->merge(['class' => "$baseClasses $variantClasses"]) }}>
|
||||
{{ $slot }}
|
||||
</button>
|
||||
7
resources/views/components/card.blade.php
Normal file
7
resources/views/components/card.blade.php
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@props([
|
||||
'padding' => true,
|
||||
])
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'border-2 border-secondary rounded-lg bg-gray-650' . ($padding ? ' p-6' : '')]) }}>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
17
resources/views/components/checkbox.blade.php
Normal file
17
resources/views/components/checkbox.blade.php
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
@props([
|
||||
'name',
|
||||
'label' => null,
|
||||
'checked' => false,
|
||||
])
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="inline-flex items-center">
|
||||
<input type="checkbox"
|
||||
name="{{ $name }}"
|
||||
{{ $checked ? 'checked' : '' }}
|
||||
{{ $attributes }}>
|
||||
@if($label)
|
||||
<span class="ml-2 text-sm">{{ $label }}</span>
|
||||
@endif
|
||||
</label>
|
||||
</div>
|
||||
28
resources/views/components/input.blade.php
Normal file
28
resources/views/components/input.blade.php
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
@props([
|
||||
'type' => 'text',
|
||||
'name',
|
||||
'label' => null,
|
||||
'placeholder' => '',
|
||||
'value' => null,
|
||||
'required' => false,
|
||||
'autofocus' => false,
|
||||
])
|
||||
|
||||
<div class="mb-4">
|
||||
@if($label)
|
||||
<label for="{{ $name }}" class="block text-sm font-medium mb-1">{{ $label }}</label>
|
||||
@endif
|
||||
|
||||
<input type="{{ $type }}"
|
||||
id="{{ $name }}"
|
||||
name="{{ $name }}"
|
||||
value="{{ old($name, $value) }}"
|
||||
placeholder="{{ $placeholder }}"
|
||||
{{ $required ? 'required' : '' }}
|
||||
{{ $autofocus ? 'autofocus' : '' }}
|
||||
{{ $attributes->merge(['class' => 'w-full p-2 border rounded bg-gray-700 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue' . ($errors->has($name) ? ' border-red-500' : '')]) }}>
|
||||
|
||||
@error($name)
|
||||
<span class="text-red-500 text-xs mt-1 block">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
|
|
@ -12,15 +12,15 @@
|
|||
@livewireStyles
|
||||
</head>
|
||||
<body class="font-sans antialiased bg-gray-600 text-gray-100">
|
||||
<div class="min-h-screen flex flex-col items-center justify-center">
|
||||
<div class="lg:w-1/3 lg:mx-auto w-full px-4" style="margin-top: 15vh;">
|
||||
<div class="text-center mb-8">
|
||||
<div class="min-h-screen flex flex-col items-center justify-center px-4">
|
||||
<div class="w-full max-w-sm">
|
||||
<div class="text-center mb-6">
|
||||
<h1 class="text-2xl font-syncopate text-primary">DISH PLANNER</h1>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-secondary rounded-lg px-5 pt-5 pb-3 lg:pt-10 lg:pb-7 bg-gray-600">
|
||||
<x-card>
|
||||
@yield('content')
|
||||
</div>
|
||||
</x-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
26
resources/views/components/select.blade.php
Normal file
26
resources/views/components/select.blade.php
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
@props([
|
||||
'name',
|
||||
'label' => null,
|
||||
'options' => [],
|
||||
'selected' => null,
|
||||
'required' => false,
|
||||
])
|
||||
|
||||
<div class="mb-4">
|
||||
@if($label)
|
||||
<label for="{{ $name }}" class="block text-sm font-medium mb-2">{{ $label }}</label>
|
||||
@endif
|
||||
|
||||
<select id="{{ $name }}"
|
||||
name="{{ $name }}"
|
||||
{{ $required ? 'required' : '' }}
|
||||
{{ $attributes->merge(['class' => 'w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue']) }}>
|
||||
@foreach($options as $value => $label)
|
||||
<option value="{{ $value }}" {{ $selected == $value ? 'selected' : '' }}>{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
@error($name)
|
||||
<span class="text-danger text-xs mt-1 block">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
|
|
@ -30,6 +30,7 @@ export default {
|
|||
400: '#444760',
|
||||
500: '#2B2C41',
|
||||
600: '#24263C',
|
||||
650: '#202239',
|
||||
700: '#1D1E36',
|
||||
800: '#131427',
|
||||
900: '#0A0B1C',
|
||||
|
|
|
|||
Loading…
Reference in a new issue