ui: Use inline SVG icons for all spinners

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/networks/templates/wifi_scan.html

@@ -5,6 +5,7 @@
 
 {% load bootstrap %}
 {% load i18n %}
+{% load plinth_extras %}
 
 {% block content %}
 
@@ -31,7 +32,7 @@
               {% trans "never" %}
             {% endif %}
             {% if device.scan_requested %}
-              <span class="fa fa-spinner fa-spin"></span>
+              {% icon 'spinner' class='svg-icon spin' %}
             {% endif %}
           </p>
           <div class="list-group list-group-two-column">

plinth/modules/upgrades/templates/upgrades-dist-upgrade.html

@@ -6,6 +6,7 @@
 {% load bootstrap %}
 {% load i18n %}
 {% load static %}
+{% load plinth_extras %}
 
 {% block content %}
   <h3>{% trans "Distribution Update" %}</h3>
@@ -26,16 +27,16 @@
   </p>
 
   {% if status.running %}
-    <div class="upgrades-dist-upgrade clearfix">
+    <div class="upgrades-dist-upgrade d-flex align-items-center">
-      <div class="upgrades-dist-upgrade-running-icon pull-left">
+      <div class="upgrades-dist-upgrade-running-icon">
-        <span class="fa fa-refresh fa-spin fa-3x fa-pull-left text-info"></span>
+        {% icon 'refresh' class='svg-icon spin text-info' %}
       </div>
-      <p>
+      <div>
         {% blocktrans trimmed %}
           Distribution update is currently running. This operation may take
           several hours. Most apps will be unavailable during this period.
         {% endblocktrans %}
-      </p>
+      </div>
     </div>
   {% else %}
     {% if not status.updates_enabled or not status.dist_upgrade_enabled or not status.has_free_space or not status.current_codename %}

plinth/modules/upgrades/templates/upgrades_configure.html

@@ -17,17 +17,17 @@
   </div>
 
   <h3>{% trans "Status" %}</h3>
-  <div class="upgrades-status-frame clearfix">
+  <div class="upgrades-status-frame d-flex align-items-center">
-    <div class="upgrade-status-icon pull-left">
+    <div class="upgrades-status-icon">
       {% if is_busy %}
-        <span class="fa fa-refresh fa-spin fa-3x fa-pull-left text-info"></span>
+        {% icon 'refresh' class='svg-icon spin text-info' %}
       {% elif new_version %}
-        <span class="fa fa-frown-o fa-3x fa-pull-left text-warning"></span>
+        {% icon 'frown-o' class='svg-icon text-warning' %}
       {% else %}
-        <span class="fa fa-smile-o fa-3x fa-pull-left text-body-tertiary"></span>
+        {% icon 'smile-o' class='svg-icon text-body-tertiary' %}
       {% endif %}
     </div>
-    <p>
+    <div>
       {% blocktrans trimmed %}
         You are running {{ os_release }} and {{ box_name }} version {{ version }}.
       {% endblocktrans %}
@@ -41,7 +41,7 @@
       {% else %}
         {% blocktrans %}{{ box_name }} is up to date.{% endblocktrans %}
       {% endif %}
-    </p>
+    </div>
   </div>
 {% endblock %}
 

plinth/templates/first_setup.html

@@ -6,6 +6,7 @@
 {% load bootstrap %}
 {% load i18n %}
 {% load static %}
+{% load plinth_extras %}
 
 {% block body_class %}
 no-brand
@@ -20,7 +21,7 @@ no-brand
 
   {% if is_first_setup_running %}
     <p class="firstboot-spinner">
-      <span class="fa fa-refresh fa-spin fa-4x fa-pull-left processing"></span>
+      {% icon 'refresh' class='svg-icon spin' %}
     </p>
   {% endif %}
 

plinth/templates/operation-notification.html

@@ -10,7 +10,7 @@
   {% if data.state == "waiting" %}
     {% icon 'clock-o' %}
   {% elif data.state == "running" %}
-    <span class="fa fa-refresh fa-spin processing"></span>
+    {% icon 'refresh' class='svg-icon spin' %}
   {% elif data.state == "completed" %}
   {% endif %}
 

plinth/templates/operations.html

@@ -2,9 +2,11 @@
 # SPDX-License-Identifier: AGPL-3.0-or-later
 {% endcomment %}
 
+{% load plinth_extras %}
+
 {% for operation in operations %}
   <div class="app-operation">
-    <span class="fa fa-refresh fa-spin processing"></span>
+    {% icon 'refresh' class='svg-icon spin' %}
     {{ operation.translated_message }}
   </div>
 {% endfor %}

static/themes/default/css/main.css

@@ -364,6 +364,24 @@ footer {
     margin: 0.125em 0.25em;
 }
 
+@keyframes spin {
+    0% {
+        transform: none;
+    }
+    100% {
+        transform: rotate(1turn);
+    }
+}
+
+.svg-icon.spin {
+    animation: spin 2s infinite linear;
+}
+
+.svg-icon[data-icon-name="spinner"].spin {
+    /* Spin in discrete steps of 8 */
+    animation: spin 1s infinite steps(8);
+}
+
 /*
  * Bootstrap extensions
  */
@@ -675,11 +693,7 @@ footer {
  */
 .firstboot-spinner {
     text-align: center;
-}
+    font-size: 4em;
-
-.firstboot-spinner span.fa {
-    float: none;
-    margin: auto;
 }
 
 .next-steps {
@@ -1077,3 +1091,16 @@ textarea.log {
         width: 80%;
     }
 }
+
+/*
+ * Upgrades app pages
+ */
+.upgrades-status-icon,
+.upgrades-dist-upgrade-running-icon {
+    font-size: 3rem;
+}
+
+.upgrades-status-icon svg,
+.upgrades-dist-upgrade-running-icon svg {
+    margin-left: 0;
+}