Add styling to task page (button and details)

Author: far1h

resources/views/layouts/app.blade.php

@@ -7,6 +7,11 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Laravel 10 Task List App</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <style type="text/tailwindcss">
+        .btn {
+            @apply rounded-md px-2 py-1 text-center font-medium shadow-sm ring-1 ring-slate-700/10 hover:bg-slate-50 text-slate-700
+        }
+    </style>
     @yield('styles')
 </head>
 

resources/views/show.blade.php

@@ -8,41 +8,39 @@
     class="font-medium text-gray-700 underline decoration-pink-500">← Go back to the task list!</a>
     </div>
 
-    <p>{{ $task->description }}</p>
+    <p class="mb-4 text-slate-700">{{ $task->description }}</p>
     @if ($task->long_description)
-        <p>{{ $task->long_description }}</p>
+        <p class="mb-4 text-slate-700">{{ $task->long_description }}</p>
     @endif
 
-    <p>{{ $task->created_at }}</p>
-    <p>{{ $task->updated_at }}</p>
+    <p class="mb-4 text-sm text-slate-500">Created {{ $task->created_at->diffForHumans() }} · Updated {{ $task->updated_at->diffForHumans() }}</p>
 
-    <p>
+    <p class="mb-4">
         @if ($task->completed)
-            Completed
+            <span class="font-medium text-green-500">
+                Completed
+            </span>
         @else
-            Not completed
+            <span class="font-medium text-red-500">
+                Not completed
+            </span>
         @endif
     </p>
 
-    <div>
-        <a href="{{ route('tasks.edit', ['task' => $task]) }}">Edit</a>
-    </div>
-
-    <div>
+    <div class="flex gap-2">
+        <a href="{{ route('tasks.edit', ['task' => $task]) }}"
+            class="btn">Edit</a>
         <form method="POST" action="{{ route('tasks.toggle-complete', ['task' => $task]) }}">
             @csrf
             @method('PUT')
-            <button type="submit">
+            <button type="submit" class="btn">
                 Mark as {{ $task->completed ? 'not completed' : 'completed ' }}
             </button>
         </form>
-    </div>
-
-    <div>
         <form action="{{ route('tasks.destroy', ['task' => $task]) }}" method="post">
             @csrf
             @method('DELETE')
-            <button type="submit">Delete</button>
+            <button type="submit" class="btn">Delete</button>
         </form>
     </div>
 @endsection