Plugin delete and token detail UI

qgis-app/plugins/templates/plugins/plugin_delete_confirm.html

@@ -1,9 +1,25 @@
 {% extends 'plugins/plugin_base.html' %}{% load i18n %}
 {% block content %}
-    <h2>{% trans "Delete plugin"%}: {{ plugin.title }}</h2>
-    <form action="" method="post">{% csrf_token %}
-        <p class="alert alert-danger">{% trans "You asked to delete the plugin and all its versions. The plugin will be permanently deleted. This action cannot be undone. Please confirm."%}</p>
-        <p><input type="submit" class="button is-danger" name="delete_confirm" value="{% trans "Ok" %}" /> <a class="button is-success" href="javascript:history.back()">{% trans "Cancel" %}</a></p>
+    <h2 class="title is-4">{% trans "Delete plugin" %}: {{ plugin.title }}</h2>
+    <form action="" method="post">
+        {% csrf_token %}
+        <div class="notification">
+            <p>{% trans "You asked to delete the plugin and all its versions. The plugin will be permanently deleted. This action cannot be undone. Please confirm." %}</p>
+        </div>
+        <div class="field is-grouped">
+            <p class="control">
+                <button type="submit" class="button is-danger" name="delete_confirm">
+                    <span class="icon"><i class="fas fa-trash"></i></span>
+                    <span>{% trans "Ok" %}</span>
+                </button>
+            </p>
+            <p class="control">
+                <a class="button is-success" href="javascript:history.back()">
+                    <span class="icon"><i class="fas fa-undo"></i></span>
+                    <span>{% trans "Cancel" %}</span>
+                </a>
+            </p>
+        </div>
     </form>
 
 {% endblock %}

qgis-app/plugins/templates/plugins/plugin_token_detail.html

@@ -2,53 +2,63 @@
 {% load local_timezone %}
 {% block content %}
 <h2>{% trans "Token for" %} {{ plugin.name }}</h2>
-<div class="alert">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
-  To enhance the security of the plugin token, 
-  it will be displayed only once. Please ensure 
-  to save it in a secure location. If the token 
-  is lost, you can generate a new one at any time.
+<div class="notification is-info">
+  <button class="delete" onclick="this.parentElement.style.display='none'"></button>
+  {% trans "To enhance the security of the plugin token, it will be displayed only once. Please ensure to save it in a secure location. If the token is lost, you can generate a new one at any time." %}
 </div>
-<dl class="dl-horizontal">
-    <dt>{% trans "User"%}</dt>
-    <dd>
-        <a href="{% url "user_details" object.user %}">{{ object.user }}</a>
-    </dd>
-    <dt>{% trans "Jti"%}</dt>
-    <dd>
-       {{object.jti}}
-    </dd>
-    <dt>{% trans "Created at"%}</dt>
-    <dd>
-        {{ object.created_at|local_timezone }}
-    </dd>
-    <dt>{% trans "Expires at"%}</dt>
-    <dd>
-        {{ object.expires_at|local_timezone }}
-    </dd>
-    <dt>{% trans "Access token"%}</dt>
-    <dd>
+
+<table class="table is-fullwidth is-striped">
+  <tbody>
+    <tr>
+      <th>{% trans "User" %}</th>
+      <td><a href="{% url "user_details" object.user %}">{{ object.user }}</a></td>
+    </tr>
+    <tr>
+      <th>{% trans "Jti" %}</th>
+      <td>{{ object.jti }}</td>
+    </tr>
+    <tr>
+      <th>{% trans "Created at" %}</th>
+      <td>{{ object.created_at|local_timezone }}</td>
+    </tr>
+    <tr>
+      <th>{% trans "Expires at" %}</th>
+      <td>{{ object.expires_at|local_timezone }}</td>
+    </tr>
+    <tr>
+      <th>{% trans "Access token" %}</th>
+      <td>
         <textarea 
-            id="access_token" 
-            name="access_token" 
-            rows="5" 
-            cols="50" 
-            style="width: auto"
-            readonly
-        >{{access_token}}</textarea>
+          id="access_token" 
+          name="access_token" 
+          class="textarea" 
+          rows="5" 
+          readonly
+        >{{ access_token }}</textarea>
         <div class="tooltip">
-            <button class="button is-success" onclick="copyToClipBoard('{{ access_token }}')">
-              <span class="tooltiptext" id="copyTooltip">{% trans "Copy token to clipboard" %}</span>
-              <i class="icon-copy icon-white"></i>
-            </button>
+          <button class="button is-success" onclick="copyToClipBoard('{{ access_token }}')" style="width: unset !important;">
+            <span class="icon"><i class="fas fa-copy"></i></span>
+          </button>
+          <span class="tooltiptext" id="copyTooltip">{% trans "Copy token to clipboard" %}</span>
         </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
-    </dd>
-
-</dl>
-<div>
-  <a class="button" href="{% url "plugin_token_list" plugin.package_name %}?v={{ timestamp_from_last_edit }}">{% trans "Back to the list" %}</a>
-  <a class="button is-success" href="{% url "plugin_token_update" plugin.package_name object.pk %}">{% trans "Edit description" %}</a>
+<div class="buttons">
+  <a class="button" href="{% url "plugin_token_list" plugin.package_name %}?v={{ timestamp_from_last_edit }}">
+    <span class="icon">
+      <i class="fas fa-arrow-left"></i>
+    </span>
+    <span>{% trans "Back to the list" %}</span>
+  </a>
+  <a class="button is-success" href="{% url "plugin_token_update" plugin.package_name object.pk %}">
+    <span class="icon">
+      <i class="fas fa-edit"></i>
+    </span>
+    <span>{% trans "Edit description" %}</span>
+  </a>
 </div>
 {% endblock %}
 {% block extracss %}

qgis-app/plugins/templates/plugins/plugin_token_list.html

@@ -52,9 +52,9 @@ <h2>
   </table>
 </div>
 {% else %}
-<div class="alert">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
-  {% trans "This list is empty!" %}
+<div class="notification">
+    <i class="fas fa-info mr-3"></i>
+    {% trans "This list is empty!" %}
 </div>
 {% endif %}