[TASK] change style of boats on water

templates/includes/forms/log.html.tera

@@ -137,26 +137,23 @@
 	<div class="grid grid-cols-1 gap-3 mb-3 w-full">
 		<div class="pt-2 px-3 {% if not loop.first %} border-t {% endif %}">
 			<div class="w-full">
-				<div class="flex justify-between">
+				<div class="flex justify-between items-center">
 					<div>
-						<strong class="text-primary-900">
+						<strong class="block text-primary-900">
 							{{ log.departure_timestamp | date(format="%H:%M") }}
 							Uhr
 						</strong>
-						<small class="text-gray-600">({{ log.boat.name }})</small>
-					</div>
-
-					<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="inline-block link-primary mr-3">
-						Details
+            <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="text-sm link-primary break-all">
+              {{ log.boat.name }}
             </a>
 					</div>
-
           <div>
             {% if allowed_to_close and state == "on_water" %}
-						<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="btn btn-dark w-full mt-3">
-							Beenden
+              <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="border-0 btn btn-dark text-white flex items-center justify-center ml-3">
+                {% include "includes/pencil" %}
               </a>
             {% endif %}
+          </div>
 				</div>
 
 				<div class="hidden">

templates/includes/pencil.html.tera

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
+  <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
+  <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
+</svg>