From 841a9ee5996a4efdb44d745086c9507c3d258748 Mon Sep 17 00:00:00 2001
From: Thomas Rusiecki <rusieckithomas@gmail.com>
Date: Wed, 8 Jan 2025 01:49:22 -0300
Subject: [PATCH] better bootstrap tables

---
 admin/templates/states_panel.html          |  3 +-
 device/templates/tabs/user_properties.html | 59 +++++++++++-----------
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/admin/templates/states_panel.html b/admin/templates/states_panel.html
index 7c71083..503b3fa 100644
--- a/admin/templates/states_panel.html
+++ b/admin/templates/states_panel.html
@@ -52,9 +52,8 @@
         <!-- action buttons -->
         <td>
           <div class="btn-group float-end">
-            <!-- Edit Button -->
             <button 
-              type="button    " 
+              type="button" 
               class="btn btn-sm btn-outline-info d-flex align-items-center" 
               data-bs-toggle="modal"  data-bs-target="#editStateModal{{ state_definition.id }}">
               <i class="bi bi-pencil me-1"></i>
diff --git a/device/templates/tabs/user_properties.html b/device/templates/tabs/user_properties.html
index 7058d67..8f38e33 100644
--- a/device/templates/tabs/user_properties.html
+++ b/device/templates/tabs/user_properties.html
@@ -2,30 +2,23 @@
 {% load i18n %}
 
 <div class="tab-pane fade" id="user_properties">
-      <div class="btn-group mt-1 mb-3">
-        <a href="{% url 'device:add_user_property' object.pk %}" class="btn btn-primary">
-            <i class="bi bi-plus">
-            </i>
-          {% trans 'New user property' %}
-        </a>
-      </div>
+    <div class="d-flex justify-content-end mt-1 mb-3">
+      <a href="{% url 'device:add_user_property' object.pk %}"
+        class="btn btn-green-admin d-flex align-items-center">
+        <i class="bi bi-plus me-1"></i>
+        {% trans 'New user property' %}
+      </a>
+    </div>
 
-      <h5 class="card-title">{% trans 'User properties' %}
-      </h5>
-      <table class="table table-striped">
-        <thead>
+      <h5 class="card-title">{% trans 'User properties' %}</h5>
+
+      <table class="table table-hover table-bordered table-responsive align-middle">
+        <thead class="table-light">
           <tr>
-            <th scope="col">
-              {% trans 'Key' %}
-            </th>
-            <th scope="col">
-              {% trans 'Value' %}
-            </th>
-            <th scope="col" data-type="date" data-format="YYYY-MM-DD HH:mm">
-              {% trans 'Created on' %}
-            </th>
-            <th>
-            </th>
+            <th scope="col">{% trans 'Key' %}</th>
+            <th scope="col">{% trans 'Value' %}</th>
+            <th scope="col" data-type="date" class="text-end" data-format="YYYY-MM-DD HH:mm">{% trans 'Created on' %}</th>
+            <th scope="col" width="5%" class="text-end" title="{% trans 'Actions' %}"></th>
           </tr>
         </thead>
         <tbody>
@@ -35,17 +28,23 @@
                 </td>
                 <td>{{ a.value }}
                 </td>
-                <td>{{ a.created }}
+                <td class="text-end">{{ a.created }}
                 </td>
               <td>
-                <div class="btn-group float-end">
-                  <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ a.id }}">
-                      <i class="bi bi-pencil">
-                      </i> {% trans 'Edit' %}
+                <div class="btn-group ">
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-info d-flex align-items-center" data-bs-toggle="modal"
+                    data-bs-target="#editModal{{ a.id }}" >
+                    <i class="bi bi-pencil me-1"></i>
+                    {% trans 'Edit' %}
                   </button>
-                  <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ a.id }}">
-                      <i class="bi bi-trash">
-                      </i>
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-danger d-flex align-items-center"
+                    data-bs-toggle="modal" data-bs-target="#deleteModal{{ a.id }}">
+                    <i class="bi bi-trash me-1"></i>
+                    {% trans 'Delete' %}
                   </button>
                 </div>
               </td>