From 98230a5ef2b27250503e362721da8ead1cc9f61b Mon Sep 17 00:00:00 2001
From: myrmidex <myrmidex@myrmidex.net>
Date: Sun, 4 Jan 2026 02:42:19 +0100
Subject: [PATCH] feature - 3 - Improve register page layout

---
 resources/views/auth/register.blade.php | 98 ++++++++++---------------
 1 file changed, 39 insertions(+), 59 deletions(-)

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 70293f9..823dbaf 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -1,71 +1,51 @@
 @extends('components.layouts.guest')
 
 @section('content')
-    <h2 class="text-2xl text-center text-accent-blue mb-6">Register</h2>
-    
+    <h2 class="text-xl text-center text-accent-blue mb-4">Create an account</h2>
+
     <form method="POST" action="{{ route('register') }}">
         @csrf
-        
-        <div>
-            <label for="name" class="block text-sm font-medium mb-2">Name</label>
-            <input type="text" 
-                   id="name" 
-                   name="name"
-                   value="{{ old('name') }}"
-                   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('name') border-red-500 @enderror"
-                   placeholder="Enter your name"
-                   required
-                   autofocus>
-            @error('name') 
-                <span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span> 
-            @enderror
-        </div>
-        
-        <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>
-            @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="text"
+            name="name"
+            label="Name"
+            placeholder="Enter your name"
+            required
+            autofocus
+        />
 
-        <div>
-            <label for="password_confirmation" class="block text-sm font-medium mb-2">Confirm Password</label>
-            <input type="password" 
-                   id="password_confirmation" 
-                   name="password_confirmation"
-                   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"
-                   placeholder="Confirm your password"
-                   required>
-        </div>
+        <x-input
+            type="email"
+            name="email"
+            label="Email"
+            placeholder="Enter your email"
+            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">
+        <x-input
+            type="password"
+            name="password"
+            label="Password"
+            placeholder="Enter your password"
+            required
+        />
+
+        <x-input
+            type="password"
+            name="password_confirmation"
+            label="Confirm Password"
+            placeholder="Confirm your password"
+            required
+        />
+
+        <x-button type="submit" class="w-full">
             Register
-        </button>
+        </x-button>
 
-        <div class="text-center">
-            <a href="{{ route('login') }}" class="text-accent-blue hover:underline text-sm">
-                Already have an account? Login here
-            </a>
+        <div class="text-center mt-4">
+            <span class="text-sm text-gray-400">Already have an account?</span>
+            <a href="{{ route('login') }}" class="text-accent-blue hover:underline text-sm ml-1">Login</a>
         </div>
     </form>
-@endsection
\ No newline at end of file
+@endsection