backups: Use inline SVG icons

Tests:

- All the icons appear as before in both light/dark themes.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/modules/backups/templates/backups.html

@@ -5,6 +5,7 @@
 
 {% load i18n %}
 {% load static %}
+{% load plinth_extras %}
 
 {% block page_head %}
   <link type="text/css" rel="stylesheet"
@@ -17,28 +18,28 @@
     <a title="{% trans 'Create a new backup' %}"
        role="button" class="btn btn-primary"
        href="{% url 'backups:create' %}">
-      <span class="fa fa-plus" aria-hidden="true"></span>
+      {% icon 'plus' %}
       {% trans 'Create Backup' %}
     </a>
 
     <a title="{% trans 'Upload and restore a backup archive' %}"
        role="button" class="btn btn-default"
        href="{% url 'backups:upload' %}">
-      <span class="fa fa-upload" aria-hidden="true"></span>
+      {% icon 'upload' %}
       {% trans 'Upload and Restore' %}
     </a>
 
     <a title="{% trans 'Add a backup location' %}"
        role="button" class="btn btn-default"
        href="{% url 'backups:add-repository' %}">
-      <span class="fa fa-plus" aria-hidden="true"></span>
+      {% icon 'plus' %}
       {% trans 'Add Backup Location' %}
     </a>
 
     <a title="{% trans 'Add a remote backup location' %}"
        role="button" class="btn btn-default"
        href="{% url 'backups:add-remote-repository' %}">
-      <span class="fa fa-plus" aria-hidden="true"></span>
+      {% icon 'plus' %}
       {% trans 'Add Remote Backup Location' %}
     </a>
   </div>

plinth/modules/backups/templates/backups_add_remote_repository.html

@@ -6,6 +6,7 @@
 {% load bootstrap %}
 {% load i18n %}
 {% load static %}
+{% load plinth_extras %}
 
 {% block page_js %}
   <script src="{% static 'backups/backups_add_remote_repository.js' %}"
@@ -127,7 +128,7 @@
 
     <div class="alert alert-warning d-flex align-items-center" role="alert">
       <div class="me-2">
-        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+        {% icon 'exclamation-triangle' %}
         <span class="visually-hidden">{% trans "Caution:" %}</span>
       </div>
       <div>

plinth/modules/backups/templates/backups_repository.html

@@ -3,6 +3,7 @@
 {% endcomment %}
 
 {% load i18n %}
+{% load plinth_extras %}
 
 <div class="table-responsive repository" data-repository-name="{{ repository.name }}">
   <table class="table" class="archives-list">
@@ -14,12 +15,11 @@
                  data-bs-toggle="collapse" data-bs-target="#{{ uuid }}">
               <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
               {% if repository.error %}
-                <span class="fa fa-exclamation-triangle mount-error"
+                <span title={{ repository.error }}>
-                      aria-hidden="true" title="{{ repository.error }}">
+                  {% icon 'exclamation-triangle' %}</span>
-                </span>
               {% elif repository.is_encrypted %}
-                <span class="fa fa-lock encrypted"
+                <span title="{% trans "This repository is encrypted" %}">
-                      aria-hidden="true" title="{% trans "This repository is encrypted" %}">
+                  {% icon 'lock' class='svg-icon encrypted' %}
                 </span>
               {% endif %}
 
@@ -29,7 +29,7 @@
             <div class="text-end">
               <a class="repository-schedule btn btn-sm btn-primary"
                  href="{% url 'backups:schedule' uuid %}">
-                <span class="fa fa-clock-o" aria-hidden="true"></span>
+                {% icon 'clock-o' %}
                 {% trans "Schedule" %}
               </a>
 
@@ -42,7 +42,7 @@
                     {% csrf_token %}
                     <button type="submit" class="btn btn-sm btn-default"
                            title="{% trans 'Unmount Location' %}">
-                      <span class="fa fa-eject" aria-hidden="true"></span>
+                      {% icon 'eject' %}
                     </button>
                   </form>
 
@@ -53,7 +53,7 @@
                     {% csrf_token %}
                     <button type="submit" class="btn btn-sm btn-default"
                             title="{% trans 'Mount Location' %}">
-                      <span class="fa fa-eye" aria-hidden="true"></span>
+                      {% icon 'eye' %}
                     </button>
                   </form>
 
@@ -66,7 +66,7 @@
                 <a title="{% trans 'Remove Backup Location. This will not delete the remote backup.' %}"
                    role="button" class="repository-remove btn btn-sm btn-default"
                    href="{% url 'backups:repository-remove' uuid %}">
-                  <span class="fa fa-trash-o" aria-hidden="true"></span>
+                  {% icon 'trash-o' %}
                 </a>
 
               {% endif %}
@@ -93,8 +93,7 @@
               </a>
               <a class="archive-delete btn btn-sm btn-default"
                  href="{% url 'backups:delete' uuid archive.name %}">
-                <span class="fa fa-trash-o" aria-hidden="true">
+                {% icon 'trash-o' %}
-                </span>
               </a>
             </td>
           </tr>

plinth/modules/backups/templates/backups_upload.html

@@ -5,6 +5,7 @@
 
 {% load bootstrap %}
 {% load i18n %}
+{% load plinth_extras %}
 
 {% block page_head %}
 {% endblock %}
@@ -24,7 +25,7 @@
   {% if max_filesize %}
     <div class="alert alert-warning d-flex align-items-center" role="alert">
       <div class="me-2">
-        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+        {% icon 'exclamation-triangle' %}
         <span class="visually-hidden">{% trans "Caution:" %}</span>
       </div>
       <div>

plinth/modules/backups/templates/verify_ssh_hostkey.html

@@ -5,6 +5,7 @@
 
 {% load bootstrap %}
 {% load i18n %}
+{% load plinth_extras %}
 
 {% block content %}
 
@@ -23,7 +24,7 @@
       {% if form.keyscan_error %}
         <div class="alert alert-danger d-flex align-items-center">
           <div class="me-2">
-            <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+            {% icon 'exclamation-triangle' %}
             <span class="visually-hidden">{% trans "Caution:" %}</span>
           </div>
           <pre class="mb-0">{{ form.keyscan_error }}</pre>

static/themes/default/css/main.css

@@ -290,7 +290,7 @@ html {
 }
 
 .alert pre {
-    margin-top: 1rem;
+    margin-top: 0.25rem;
 }
 
 /* Tags */