Move add user form from navbar to under user list and add icon to navbar

templates/users.html

@@ -8,15 +8,30 @@
     <tbody>
         {% for u in users %}
         <tr class="hover:bg-gray-100">
-            <td class="py-4 px-6 border-b border-gray-200"><a href="{{ url_for('new_workout', user_id=u.id) }}">{{
+            <td class="py-4 px-6 border-b border-gray-200">
-                    u.name }}</a></td>
+                <a href="{{ url_for('new_workout', user_id=u.id) }}">
+                    <div class="flex">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 pr-2" data-darkreader-inline-stroke=""
+                            style="--darkreader-inline-stroke:currentColor;">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z">
+                            </path>
+                        </svg>
+
+                        <div>
+                            {{ u.name }}
+                        </div>
+                    </div>
+                </a>
+            </td>
             <td class="py-4 px-6 border-b border-gray-200 flex inline">
                 <div class="flex justify-between w-full">
                     <div>{{ u.workouts_count }}</div>
                     <div class="flex">
                         <div hx-delete="{{ url_for('delete_user', user_id=u.id) }}"
                             hx-confirm="Are you sure you wish to delete your account?" hx-target="#users-container"
-                            class="pr-1">
+                            class="pr-2">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="w-6 h-6">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -38,4 +53,18 @@
         </tr>
         {% endfor %}
     </tbody>
-</table>
+</table>
+
+<form class="w-full" hx-post="{{ url_for('users') }}" hx-target="#users-container">
+    <div class="flex items-center border-b border-teal-500 py-2">
+        <input
+            class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
+            type="text" placeholder="Jane Doe" aria-label="Full name" name="name" required>
+        <button
+            class="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
+            type="submit">
+            Add
+        </button>
+
+    </div>
+</form>

templates/users_and_workouts.html

@@ -14,19 +14,21 @@
         <div class="container mx-auto px-4">
             <div class="flex justify-between">
                 <div class="flex items-center">
-                    <a class="text-gray-800 text-xl font-bold" href="/">Cardio Tracker</a>
+                    <a class="text-gray-800 text-xl font-bold" href="/">
+                        <div class="flex">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-8 h-8 mr-2">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0" />
+                            </svg>
+                            <div>
+                                Cardio Tracker
+                            </div>
+                        </div>
+                    </a>
                 </div>
                 <div class="flex items-center">
-                    <form class="flex py-1" hx-post="{{ url_for('users') }}" hx-target="#users-container">
+
-                        <input
-                            class="rounded-l-lg p-2 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white"
-                            name="name" placeholder="New user name" required />
-                        <button
-                            class="px-4 rounded-r-lg bg-green-500 text-white font-bold p-2 uppercase border-green-600 border-t border-b border-r"
-                            type="submit">
-                            Add User
-                        </button>
-                    </form>
                 </div>
             </div>
         </div>