feature - 3 - Improve login page layout

resources/css/app.css

@@ -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);
+}

resources/views/auth/login.blade.php

@@ -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>
+        <x-input
-            <label for="email" class="block text-sm font-medium mb-2">Email</label>
+            type="email"
-            <input type="email" 
-                   id="email" 
             name="email"
-                   value="{{ old('email') }}"
+            label="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="you@example.com"
-                   placeholder="Enter your email"
             required
-                   autofocus>
+            autofocus
-            @error('email') 
+        />
-                <span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span> 
-            @enderror
-        </div>
 
-        <div>
+        <x-input
-            <label for="password" class="block text-sm font-medium mb-2">Password</label>
+            type="password"
-            <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"
+            label="Password"
             placeholder="Enter your password"
-                   required>
+            required
-            @error('password') 
+        />
-                <span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span> 
-            @enderror
-        </div>
 
-        <div class="mb-4">
+        <x-checkbox name="remember" label="Remember me" />
-            <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>
 
-        <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">
+        <x-button type="submit" class="w-full">
-            Login
+            Sign In
-        </button>
+        </x-button>
 
-        <div class="text-center">
+        <div class="text-center mt-4">
-            <a href="{{ route('register') }}" class="text-accent-blue hover:underline text-sm">
+            <span class="text-sm text-gray-400">Don't have an account?</span>
-                Don't have an account? Register here
+            <a href="{{ route('register') }}" class="text-accent-blue hover:underline text-sm ml-1">Register</a>
-            </a>
         </div>
     </form>
 @endsection

resources/views/components/button.blade.php

@@ -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>

resources/views/components/card.blade.php

@@ -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>

resources/views/components/checkbox.blade.php

@@ -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>

resources/views/components/input.blade.php

@@ -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>

resources/views/components/layouts/guest.blade.php

@@ -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="min-h-screen flex flex-col items-center justify-center px-4">
-        <div class="lg:w-1/3 lg:mx-auto w-full px-4" style="margin-top: 15vh;">
+        <div class="w-full max-w-sm">
-            <div class="text-center mb-8">
+            <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>
 

resources/views/components/select.blade.php

@@ -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>

tailwind.config.js

@@ -30,6 +30,7 @@ export default {
                     400: '#444760',
                     500: '#2B2C41',
                     600: '#24263C',
+                    650: '#202239',
                     700: '#1D1E36',
                     800: '#131427',
                     900: '#0A0B1C',