feat: restyle pruning_strip and photo_gallery partials — Bootstrap to Tailwind

plants/templates/plants/partials/photo_gallery.html

@@ -1,30 +1,35 @@
-<div class="mb-3">
+<div class="mb-4">
-    <h6 class="mb-2">Photos</h6>
+    <h6 class="font-nunito font-bold text-sm text-[#1A1208] mb-2">Photos</h6>
 
     {% with photos=plant.photos.all %}
     {% if photos %}
-    <div class="d-flex flex-wrap gap-2 mb-2">
+    <div class="flex flex-wrap gap-2 mb-3">
         {% for photo in photos %}
-        <div class="position-relative">
+        <div class="relative">
             <img src="{{ photo.image.url }}" width="80" height="80"
-                 class="rounded {% if photo.is_thumbnail %}border border-success border-2{% endif %}"
+                 class="rounded-lg object-cover {% if photo.is_thumbnail %}ring-2 ring-[#52B788]{% endif %}"
                  style="object-fit:cover;" alt="">
-            <div class="d-flex gap-1 mt-1">
+            <div class="flex gap-1 mt-1">
                 {% if not photo.is_thumbnail %}
                 <form method="post" action="{% url 'set_thumbnail' photo.pk %}"
                       hx-post="{% url 'set_thumbnail' photo.pk %}"
                       hx-target="#photo-gallery" hx-swap="innerHTML">
                     {% csrf_token %}
-                    <button type="submit" class="btn btn-outline-success btn-sm py-0 px-1" style="font-size:.7rem;" title="Set as thumbnail">★</button>
+                    <button type="submit"
+                            class="inline-flex items-center justify-center w-6 h-6 rounded text-[#52B788] border border-[#52B788] hover:bg-[#E8F4EC] text-xs leading-none"
+                            title="Set as thumbnail">★</button>
                 </form>
                 {% else %}
-                <span class="btn btn-success btn-sm py-0 px-1 disabled" style="font-size:.7rem;" title="Thumbnail">★</span>
+                <span class="inline-flex items-center justify-center w-6 h-6 rounded bg-[#52B788] text-white text-xs leading-none cursor-default"
+                      title="Thumbnail">★</span>
                 {% endif %}
                 <form method="post" action="{% url 'delete_photo' photo.pk %}"
                       hx-post="{% url 'delete_photo' photo.pk %}"
                       hx-target="#photo-gallery" hx-swap="innerHTML">
                     {% csrf_token %}
-                    <button type="submit" class="btn btn-outline-danger btn-sm py-0 px-1" style="font-size:.7rem;" title="Delete">✕</button>
+                    <button type="submit"
+                            class="inline-flex items-center justify-center w-6 h-6 rounded text-[#F07040] border border-[#F07040] hover:bg-orange-50 text-xs leading-none"
+                            title="Delete">✕</button>
                 </form>
             </div>
         </div>
@@ -37,13 +42,13 @@
           hx-post="{% url 'upload_photo' plant.pk %}" hx-target="#photo-gallery" hx-swap="innerHTML"
           hx-encoding="multipart/form-data" hx-indicator="#photo-upload-spinner">
         {% csrf_token %}
-        <div class="d-flex gap-2 align-items-center flex-wrap">
+        <div class="flex gap-2 items-center flex-wrap">
-            <label class="btn btn-sm btn-outline-secondary mb-0" for="photo-upload-input">📷 Choose photo</label>
+            <label class="btn-bloom-outline text-xs px-3 py-1 cursor-pointer" for="photo-upload-input">📷 Choose photo</label>
-            <input type="file" id="photo-upload-input" name="image" accept="image/*" class="d-none"
+            <input type="file" id="photo-upload-input" name="image" accept="image/*" class="hidden"
                    onchange="document.getElementById('photo-filename').textContent = this.files[0]?.name || ''">
-            <span id="photo-filename" class="text-muted small"></span>
+            <span id="photo-filename" class="text-xs text-[#B0A090]"></span>
-            <button type="submit" class="btn btn-sm btn-outline-secondary">Upload</button>
+            <button type="submit" class="btn-bloom-outline text-xs px-3 py-1">Upload</button>
-            <span id="photo-upload-spinner" class="htmx-indicator text-muted small">Uploading…</span>
+            <span id="photo-upload-spinner" class="htmx-indicator text-xs text-[#B0A090]">Uploading…</span>
         </div>
     </form>
 </div>

plants/templates/plants/partials/pruning_strip.html

@@ -1,23 +1,23 @@
 {% load plant_extras %}
-<div id="pruning-strip" class="pruning-strip {% if pruning_status == 'overdue' %}overdue{% endif %} mb-3 rounded-end">
+<div id="pruning-strip" class="pruning-strip {% if pruning_status == 'overdue' %}overdue{% endif %} mb-4 p-3 rounded-2xl bg-[#E8F4EC]">
-    <div class="d-flex justify-content-between align-items-start gap-2">
+    <div class="flex justify-between items-start gap-2">
         <div>
-            <strong>✂️ Pruning</strong>
+            <p class="font-nunito font-bold text-[11px] text-[#1b4332] mb-1">✂️ Pruning months</p>
             {% if plant.pruning_months %}
             <div class="mt-1">{% month_strip plant.pruning_months %}</div>
             {% endif %}
             {% with plant.pruning_logs.first as last_log %}
             {% if last_log %}
-            <div class="small text-muted mt-1 text-nowrap">Last pruned: {{ last_log.pruned_on|date:"j M Y" }}</div>
+            <div class="text-xs text-[#B0A090] mt-1 whitespace-nowrap">Last pruned: {{ last_log.pruned_on|date:"j M Y" }}</div>
             {% endif %}
             {% endwith %}
         </div>
-        <div class="flex-shrink-0">
+        <div class="shrink-0">
-        {% if pruning_status == 'overdue' %}
+            {% if pruning_status == 'overdue' %}
-        <span class="badge bg-danger">Overdue</span>
+            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-700">Overdue</span>
-        {% elif pruning_status == 'due_this_month' %}
+            {% elif pruning_status == 'due_this_month' %}
-        <span class="badge bg-warning text-dark">Due this month</span>
+            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-yellow-100 text-yellow-800">Due this month</span>
-        {% endif %}
+            {% endif %}
         </div>
     </div>
 
@@ -28,9 +28,9 @@
         class="mt-2"
     >
         {% csrf_token %}
-        <div class="d-flex gap-2 align-items-end flex-wrap">
+        <div class="flex gap-2 items-end flex-wrap">
             {{ log_form.pruned_on }}
-            <button type="submit" class="btn btn-sm btn-success">Log pruning</button>
+            <button type="submit" class="btn-bloom-outline text-xs px-3 py-1">Log pruning</button>
         </div>
     </form>
 </div>