From 3c623d6553b8f3656d1390ccc3c34b8d9a24ef45 Mon Sep 17 00:00:00 2001
From: peaklabs-dev <122374094+peaklabs-dev@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:59:17 +0100
Subject: [PATCH] chore: improve error styling

---
 resources/views/errors/500.blade.php | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
index 0dbb3c59b..ee254a990 100644
--- a/resources/views/errors/500.blade.php
+++ b/resources/views/errors/500.blade.php
@@ -1,21 +1,21 @@
 @extends('layouts.base')
-<div class="flex flex-col items-center justify-center h-full">
-    <div>
-        <p class="font-mono font-semibold text-red-500 text-7xl">500</p>
-        <h1 class="mt-4 font-bold tracking-tight dark:text-white">Wait, this is not cool...</h1>
-        <p class="text-base leading-7 text-neutral-300">There has been an error, we are working on it.</p>
+
+<div class="flex flex-col items-center justify-center min-h-screen px-4 py-16 sm:px-6 sm:py-24">
+    <div class="text-center">
+        <p class="font-mono font-bold text-red-500 text-8xl sm:text-9xl">500</p>
+        <h1 class="mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Wait, this is not cool...</h1>
         @if ($exception->getMessage() !== '')
-            <div class="mt-6 text-xs text-right text-red-500 whitespace-pre-wrap">
+            <div class="max-w-2xl mx-auto mt-8 text-sm text-red-500 whitespace-pre-wrap">
                 Error: {!! $exception->getMessage() !!}
             </div>
         @endif
-        <div class="flex items-center mt-10 gap-x-6">
-            <a href="/">
+        <div class="flex items-center justify-center mt-10 gap-x-6">
+            <a href="/" class="inline-block">
                 <x-forms.button>Go back home</x-forms.button>
             </a>
-            <a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
-                support
-                <x-external-link />
+            <a target="_blank" href="{{ config('constants.urls.contact') }}" class="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
+                Contact support
+                <x-external-link class="ml-1 w-4 h-4" />
             </a>
         </div>
     </div>