Cleaned up search area and started putting tasks into cards

2 files changed, 28 insertions, 21 deletions

diff --git a/templates/index.html b/templates/index.html
index 34fde55..46fda41 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -208,18 +208,16 @@
                 <!-- We've used 3xl here, but feel free to try other max-widths based on your needs -->
                 <div class="mx-auto max-w-2xl">
                   <div>
-                   
                     <form hx-post="/search" method="POST" hx-target="#search-results">
-                    <label for="search" class="block text-sm font-medium leading-6 text-gray-900">Quick search</label>
-                    <div class="relative mt-2 flex items-center">
-                    <input type="hidden" id="car_details" name="car_details" value="2001 BMW 540i">
-                      <input type="text" name="search" id="search" class="block w-full rounded-md border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
-                      <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-                        <kbd class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">⌘K</kbd>
+                      <label for="search" class="block text-center text-lg font-medium leading-6 text-gray-900">New Task List</label>
+                      <div class="relative mt-2 flex items-center">
+                      <input type="hidden" id="car_details" name="car_details" value="2001 BMW 540i">
+                        <input type="text" name="search" id="search" class="block w-full rounded-md border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Customer Complaint">
+                        <div class="absolute inset-y-0 right-0 mr-2 flex items-center pr-3">
+                          <button type="submit" class="rounded bg-indigo-600 px-3 py-1 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Search</button>
+                        </div>
                       </div>
-                    </div>
-                    <button type="submit" class="rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 mt-3">Search</button>
-                    </form>
+                      </form>
                   </div>
                 </div>
               </div>
@@ -236,7 +234,7 @@
             </li>
           </ul>
         </div>
-        <div class="mx-auto max-w-2xl mt-10 ml-2 mr-2 mb-5">
+        <div class="mx-auto max-w-4xl mt-10 ml-4 mr-4 mb-5">
         <fieldset>
             <legend class="sr-only">Notifications</legend>
             <div class="space-y-5" id="search-results">
diff --git a/templates/tasks.html b/templates/tasks.html
index 2432aad..1a2e633 100644
--- a/templates/tasks.html
+++ b/templates/tasks.html
@@ -1,11 +1,20 @@
-{% for task in to_do %}
-<div class="relative flex items-start">
-    <div class="flex h-6 items-center">
-      <input id="comments" aria-describedby="comments-description" name="comments" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
-    </div>
-    <div class="ml-3 text-sm leading-6">
-      <label for="comments" class="font-medium text-gray-900">Task {{loop.index}}</label>
-      <p id="comments-description" class="text-gray-500">{{task}}</p>
-    </div>
+<div class="bg-white shadow mx-auto sm:rounded-lg">
+  <div class="bg-gray-500 mx-auto px-4 sm:px-6 lg:px-8">
+    <fieldset>
+      <legend class="text-base font-semibold leading-8 text-gray-900">"{{search_query}}" Tasks</legend>
+      <div class="mt-4 divide-y divide-gray-200 border-b border-t border-gray-200">
+        {% for task in to_do %}
+        <div class="relative flex items-start py-4">
+          <div class="flex h-6 items-center">
+            <input id="comments" aria-describedby="comments-description" name="comments" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
+          </div>
+          <div class="ml-3 text-sm leading-6">
+            <label for="comments" class="font-medium text-gray-900">Task {{loop.index}}</label>
+            <p id="comments-description" class="text-gray-500">{{task}}</p>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </fieldset>
   </div>
-{% endfor %}
\ No newline at end of file
+</div>
\ No newline at end of file