Add styling to forms

Author: far1h

resources/views/form.blade.php

@@ -2,57 +2,49 @@
 
 @section('title', isset($task) ? 'Edit Task' : 'Add Task')
 
-@section('styles')
-<style>
-    .error-message {
-        color:red;
-        font-size: 0.8rem;
-    }
-</style>
-@endsection
-
 @section('content')
     <form action="{{ isset($task) ? route('tasks.update', ['task' => $task->id]) : route('tasks.store') }}" method="POST">
         @csrf
         @isset($task)
             @method('PUT')
         @endisset
-        <div>
+        <div class="mb-4">
             <label for="title">
                 Title
             </label>
-            <input type="text" name="title" id="title" value="{{ $task->title ?? old('title')}}">
+            <input type="text" name="title" id="title" @class(['border-red-500' => $errors->has('title')]) {{-- class="border @error('title') border-red-500 @enderror" --}}
+                value="{{ $task->title ?? old('title') }}">
             @error('title')
-            <p class="error-message">{{ $message }}</p>
+                <p class="error">{{ $message }}</p>
             @enderror
         </div>
-        <div>
+        <div class="mb-4">
             <label for="description">Description</label>
-            <textarea name="description" id="description" rows="5">
-                {{ $task->description ??   old('description')}}
+            <textarea name="description" id="description" @class(['border-red-500' => $errors->has('description')]) rows="5">
+                {{ $task->description ?? old('description') }}
             </textarea>
             @error('description')
-            <p class="error-message">{{ $message }}</p>
+                <p class="error">{{ $message }}</p>
             @enderror
         </div>
-        <div>
+        <div class="mb-4">
             <label for="long_description">Long Description</label>
-            <textarea name="long_description" id="long_description" rows="10">
-                {{ $task->long_description ?? old('long_description')}}
+            <textarea name="long_description" id="long_description" @class(['border-red-500' => $errors->has('long_description')]) rows="10">
+                {{ $task->long_description ?? old('long_description') }}
             </textarea>
             @error('long_description')
-            <p class="error-message">{{ $message }}</p>
+                <p class="error">{{ $message }}</p>
             @enderror
         </div>
-        <div>
-            <button type="submit">
+        <div class="flex gap-2 items-center">
+            <button type="submit" class="btn">
                 @isset($task)
                     Update Task
                 @else
                     Add Task
                 @endisset
             </button>
-
+            <a href="{{ route('tasks.index') }}" class="link">Cancel</a>
         </div>
     </form>
 @endsection

resources/views/layouts/app.blade.php

@@ -14,6 +14,16 @@
         .link {
             @apply font-medium text-gray-700 underline decoration-pink-500
         }
+        label {
+            @apply block uppercase text-slate-700 mb-2
+        }
+        input,
+        textarea {
+            @apply shadow-sm appearance-none border w-full py-2 px-3 text-slate-700 leading-tight focus:outline-none
+        }
+        .error {
+            @apply text-red-500 text-sm
+        }
     </style>
     @yield('styles')
 </head>