From 62dad9336b92fd3cc27353d1920a8f9e99396fe1 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Wed, 13 Nov 2024 16:30:57 -0800
Subject: [PATCH] ui: Use Bootstrap 5 styling for all alerts

- Ensure that .sr-only is replaced with newer classes.

- Ensure that icons are present for all alerts.

- Use flex-box for display of icons on the left center of the alert.

- .close has been renamed to .btn-close.

- &times; is no longer required for close buttons.

Tests:

- Visually verify all the changes by triggering them with code changes.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
---
 .../backups_add_remote_repository.html        | 20 ++--
 .../backups/templates/backups_upload.html     | 18 ++--
 .../backups/templates/verify_ssh_hostkey.html |  8 +-
 .../templates/diagnostics_app.html            | 10 +-
 .../templates/diagnostics_full.html           | 10 +-
 plinth/modules/help/templates/help_about.html | 42 +++++---
 plinth/modules/help/templates/statuslog.html  | 20 ++--
 .../kiwix/templates/kiwix-add-package.html    | 14 ++-
 .../templates/matrix-synapse-pre-setup.html   | 17 +++-
 .../templates/matrix-synapse.html             | 22 +++--
 plinth/modules/names/templates/names.html     | 10 +-
 .../networks/templates/connection_show.html   | 95 +++++++++++--------
 .../templates/connections_fields.html         | 13 ++-
 plinth/modules/nextcloud/__init__.py          | 12 ++-
 .../templates/pagekite_custom_services.html   | 19 ++--
 plinth/modules/power/templates/power.html     | 16 +++-
 .../power/templates/power_restart.html        | 16 +++-
 .../power/templates/power_shutdown.html       | 16 +++-
 .../templates/snapshot_not_supported.html     | 18 ++--
 .../templates/backports-firstboot.html        | 16 +++-
 .../templates/upgrades_configure.html         | 20 ++--
 .../users/templates/users_firstboot.html      | 14 ++-
 plinth/templates/app.html                     | 14 ++-
 plinth/templates/internal-zone.html           | 48 ++++++----
 plinth/templates/messages.html                | 31 ++++--
 plinth/templates/setup.html                   | 44 +++++----
 26 files changed, 390 insertions(+), 193 deletions(-)

diff --git a/plinth/modules/backups/templates/backups_add_remote_repository.html b/plinth/modules/backups/templates/backups_add_remote_repository.html
index 9065216f0..f2c0eacab 100644
--- a/plinth/modules/backups/templates/backups_add_remote_repository.html
+++ b/plinth/modules/backups/templates/backups_add_remote_repository.html
@@ -15,13 +15,19 @@
 
     {{ form|bootstrap }}
 
-    <div class="alert alert-warning" role="alert">
-      {% blocktrans trimmed %}
-      The credentials for this repository are stored on your {{ box_name }}.
-      <br />
-      To restore a backup on a new {{ box_name }} you need the SSH
-      credentials and, if chosen, the encryption passphrase.
-      {% endblocktrans %}
+    <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>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% blocktrans trimmed %}
+          The credentials for this repository are stored on your {{ box_name }}.
+          <br />
+          To restore a backup on a new {{ box_name }} you need the SSH credentials
+          and, if chosen, the encryption passphrase.
+        {% endblocktrans %}
+      </div>
     </div>
 
     <input type="submit" class="btn btn-primary"
diff --git a/plinth/modules/backups/templates/backups_upload.html b/plinth/modules/backups/templates/backups_upload.html
index d63fa499a..bcd463114 100644
--- a/plinth/modules/backups/templates/backups_upload.html
+++ b/plinth/modules/backups/templates/backups_upload.html
@@ -22,13 +22,17 @@
   </p>
 
   {% if max_filesize %}
-    <div class="alert alert-warning" role="alert">
-      <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
-      <span class="sr-only">{% trans "Caution:" %}</span>
-      {% blocktrans trimmed %}
-        You have {{ max_filesize }} available to restore a backup.
-        Exceeding this limit can leave your {{ box_name }} unusable.
-      {% endblocktrans %}
+    <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>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% blocktrans trimmed %}
+          You have {{ max_filesize }} available to restore a backup.
+          Exceeding this limit can leave your {{ box_name }} unusable.
+        {% endblocktrans %}
+      </div>
     </div>
   {% endif %}
 
diff --git a/plinth/modules/backups/templates/verify_ssh_hostkey.html b/plinth/modules/backups/templates/verify_ssh_hostkey.html
index 78d059c65..cdbdb260d 100644
--- a/plinth/modules/backups/templates/verify_ssh_hostkey.html
+++ b/plinth/modules/backups/templates/verify_ssh_hostkey.html
@@ -21,7 +21,13 @@
         {% endblocktrans %}
       </p>
       {% if form.keyscan_error %}
-        <pre class="alert alert-danger">{{ form.keyscan_error }}</pre>
+        <div class="alert alert-danger d-flex align-items-center">
+          <div class="me-2">
+            <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+            <span class="visually-hidden">{% trans "Caution:" %}</span>
+          </div>
+          <pre class="mb-0">{{ form.keyscan_error }}</pre>
+        </div>
       {% endif %}
     {% else %}
       <p>
diff --git a/plinth/modules/diagnostics/templates/diagnostics_app.html b/plinth/modules/diagnostics/templates/diagnostics_app.html
index 70d06526c..65650f9a9 100644
--- a/plinth/modules/diagnostics/templates/diagnostics_app.html
+++ b/plinth/modules/diagnostics/templates/diagnostics_app.html
@@ -25,8 +25,14 @@
   {% if results %}
     {% include "diagnostics_results.html" with results=results %}
   {% elif exception %}
-    <div class="alert alert-danger" role="alert">
-      {{ exception }}
+    <div class="alert alert-danger d-flex align-items-center" role="alert">
+      <div class="me-2">
+        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {{ exception }}
+      </div>
     </div>
   {% else %}
     <p>{% trans "This app does not support diagnostics" %}</p>
diff --git a/plinth/modules/diagnostics/templates/diagnostics_full.html b/plinth/modules/diagnostics/templates/diagnostics_full.html
index a5e607f01..30ebd65b8 100644
--- a/plinth/modules/diagnostics/templates/diagnostics_full.html
+++ b/plinth/modules/diagnostics/templates/diagnostics_full.html
@@ -53,8 +53,14 @@
       {% if app_data.diagnosis %}
         {% include "diagnostics_results.html" with results=app_data.diagnosis %}
       {% elif app_data.exception %}
-        <div class="alert alert-danger" role="alert">
-          {{ app_data.exception }}
+        <div class="alert alert-danger d-flex align-items-center" role="alert">
+          <div class="me-2">
+            <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+            <span class="visually-hidden">{% trans "Caution:" %}</span>
+          </div>
+          <div>
+            {{ app_data.exception }}
+          </div>
         </div>
       {% else %}
         <p><span class="fa fa-hourglass-o"></span></p>
diff --git a/plinth/modules/help/templates/help_about.html b/plinth/modules/help/templates/help_about.html
index 371e71842..5bc6710fa 100644
--- a/plinth/modules/help/templates/help_about.html
+++ b/plinth/modules/help/templates/help_about.html
@@ -14,22 +14,34 @@
   </p>
 
   {% if version %}
-    <div class="alert {% if new_version %}alert-warning{% else %}alert-success{% endif %}">
-      {% blocktrans trimmed %}
-        You are running {{ os_release }} and {{ box_name }} version {{ version }}.
-      {% endblocktrans %}
+    <div class="alert {% if new_version %}alert-warning{% else %}alert-success{% endif %}
+                d-flex align-items-center">
+      <div class="me-2">
+        {% if new_version %}
+          <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+          <span class="visually-hidden">{% trans "Caution:" %}</span>
+        {% else %}
+          <span class="fa fa-check-circle" aria-hidden="true"></span>
+          <span class="visually-hidden">{% trans "Success:" %}</span>
+        {% endif %}
+      </div>
+      <div>
+        {% blocktrans trimmed %}
+          You are running {{ os_release }} and {{ box_name }} version {{ version }}.
+        {% endblocktrans %}
 
-      {% if new_version %}
-        {% url 'upgrades:index' as upgrades_url %}
-        {% blocktrans trimmed %}
-          There is a new {{ box_name }} version
-          <a href="{{ upgrades_url }}">available</a>.
-        {% endblocktrans %}
-      {% else %}
-        {% blocktrans trimmed %}
-          {{ box_name }} is up to date.
-        {% endblocktrans %}
-      {% endif %}
+        {% if new_version %}
+          {% url 'upgrades:index' as upgrades_url %}
+          {% blocktrans trimmed %}
+            There is a new {{ box_name }} version
+            <a href="{{ upgrades_url }}">available</a>.
+          {% endblocktrans %}
+        {% else %}
+          {% blocktrans trimmed %}
+            {{ box_name }} is up to date.
+          {% endblocktrans %}
+        {% endif %}
+      </div>
     </div>
   {% endif %}
 
diff --git a/plinth/modules/help/templates/statuslog.html b/plinth/modules/help/templates/statuslog.html
index f107409fb..6542300bc 100644
--- a/plinth/modules/help/templates/statuslog.html
+++ b/plinth/modules/help/templates/statuslog.html
@@ -18,14 +18,18 @@
     {% endblocktrans %}
   </p>
 
-  <p class="alert alert-warning">
-    <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
-    <span class="sr-only">{% trans "Caution:" %}</span>
-    {% blocktrans trimmed %}
-      Please remove any personal information from the log before submitting the
-      bug report.
-    {% endblocktrans %}
-  </p>
+  <div class="alert alert-warning d-flex align-items-center">
+    <div class="me-2">
+      <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+      <span class="visually-hidden">{% trans "Caution:" %}</span>
+    </div>
+    <div>
+      {% blocktrans trimmed %}
+        Please remove any personal information from the log before submitting
+        the bug report.
+      {% endblocktrans %}
+    </div>
+  </div>
 
   <p>
     <pre class="status-log">{{ data }}</pre>
diff --git a/plinth/modules/kiwix/templates/kiwix-add-package.html b/plinth/modules/kiwix/templates/kiwix-add-package.html
index 1e64d958e..8b5944ad6 100644
--- a/plinth/modules/kiwix/templates/kiwix-add-package.html
+++ b/plinth/modules/kiwix/templates/kiwix-add-package.html
@@ -20,10 +20,16 @@
   </p>
 
   {% if max_filesize %}
-    <div class="alert alert-warning" role="alert">
-      {% blocktrans trimmed %}
-        You have {{ max_filesize }} of free disk space available.
-      {% endblocktrans %}
+    <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>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% blocktrans trimmed %}
+          You have {{ max_filesize }} of free disk space available.
+        {% endblocktrans %}
+      </div>
     </div>
   {% endif %}
 
diff --git a/plinth/modules/matrixsynapse/templates/matrix-synapse-pre-setup.html b/plinth/modules/matrixsynapse/templates/matrix-synapse-pre-setup.html
index 5dd737228..5a64cb80b 100644
--- a/plinth/modules/matrixsynapse/templates/matrix-synapse-pre-setup.html
+++ b/plinth/modules/matrixsynapse/templates/matrix-synapse-pre-setup.html
@@ -22,11 +22,18 @@
     {% endblocktrans %}
   </p>
 
-  <div class="alert alert-warning" role="alert">
-    {% blocktrans trimmed %}
-      <strong>Warning!</strong> Changing the domain name after this step will
-      require uninstalling and reinstalling the app which will wipe app's data.
-    {% endblocktrans %}
+  <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>
+      <span class="visually-hidden">{% trans "Caution:" %}</span>
+    </div>
+    <div>
+      {% blocktrans trimmed %}
+        <strong>Warning!</strong> Changing the domain name after this step will
+        require uninstalling and reinstalling the app which will wipe app's
+        data.
+      {% endblocktrans %}
+    </div>
   </div>
 
   {% if not domain_names %}
diff --git a/plinth/modules/matrixsynapse/templates/matrix-synapse.html b/plinth/modules/matrixsynapse/templates/matrix-synapse.html
index be4d47331..f2b3134d6 100644
--- a/plinth/modules/matrixsynapse/templates/matrix-synapse.html
+++ b/plinth/modules/matrixsynapse/templates/matrix-synapse.html
@@ -70,14 +70,20 @@
   {% endif %}
 
   {% if certificate_status != "valid" %}
-    <div class="alert alert-warning" role="alert">
-      {% url 'letsencrypt:index' as letsencrypt_url %}
-      {% blocktrans trimmed %}
-        The configured domain name is using a self-signed certificate.
-        Federation with other Matrix Synapse instances requires a valid TLS
-        certificate. Please go to <a href="{{ letsencrypt_url }}">Let's
-        Encrypt</a> to obtain one.
-      {% endblocktrans %}
+    <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>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% url 'letsencrypt:index' as letsencrypt_url %}
+        {% blocktrans trimmed %}
+          The configured domain name is using a self-signed certificate.
+          Federation with other Matrix Synapse instances requires a valid TLS
+          certificate. Please go to <a href="{{ letsencrypt_url }}">Let's
+          Encrypt</a> to obtain one.
+        {% endblocktrans %}
+      </div>
     </div>
   {% endif %}
 {% endblock %}
diff --git a/plinth/modules/names/templates/names.html b/plinth/modules/names/templates/names.html
index 80effd115..8ad3937f9 100644
--- a/plinth/modules/names/templates/names.html
+++ b/plinth/modules/names/templates/names.html
@@ -122,8 +122,14 @@
       </form>
     </p>
   {% else %}
-    <div class="alert alert-danger">
-      {% trans "Error retrieving status:" %} {{ resolved_status_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>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% trans "Error retrieving status:" %} {{ resolved_status_error }}
+      </div>
     </div>
   {% endif %}
 
diff --git a/plinth/modules/networks/templates/connection_show.html b/plinth/modules/networks/templates/connection_show.html
index 67ce26336..cddc4e8d9 100644
--- a/plinth/modules/networks/templates/connection_show.html
+++ b/plinth/modules/networks/templates/connection_show.html
@@ -18,15 +18,19 @@
   <div class="row">
     <div class="col-md-8 offset-md-2">
       {% if connection.primary %}
-        <div class="alert alert-warning" role="alert">
-          <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
-          <span class="sr-only">{% trans "Caution:" %}</span>
-          {% blocktrans trimmed %}
-            This is the primary connection that {{ box_name }} relies on for
-            Internet connectivity. Altering it may render your {{ box_name }}
-            unreachable. Ensure that you have other means to access
-            {{ box_name }} before altering this connection.
-          {% endblocktrans %}
+        <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>
+            <span class="visually-hidden">{% trans "Caution:" %}</span>
+          </div>
+          <div>
+            {% blocktrans trimmed %}
+              This is the primary connection that {{ box_name }} relies on for
+              Internet connectivity. Altering it may render your {{ box_name }}
+              unreachable. Ensure that you have other means to access
+              {{ box_name }} before altering this connection.
+            {% endblocktrans %}
+          </div>
         </div>
       {% endif %}
 
@@ -279,15 +283,20 @@
           </div>
         </div>
 
-        <div class="alert alert-info">
-          <span class="fa fa-info-circle" aria-hidden="true"></span>
-          {% blocktrans trimmed %}
-            This interface should be connected to a local
-            network/machine.  If you connect this interface to a
-            public network, services meant to be available only
-            internally will become available externally.  This is a
-            security risk.
-          {% endblocktrans %}
+        <div class="alert alert-info d-flex align-items-center" role="alert">
+          <div class="me-2">
+            <span class="fa fa-info-circle" aria-hidden="true"></span>
+            <span class="visually-hidden">{% trans "Info:" %}</span>
+          </div>
+          <div>
+            {% blocktrans trimmed %}
+              This interface should be connected to a local
+              network/machine.  If you connect this interface to a
+              public network, services meant to be available only
+              internally will become available externally.  This is a
+              security risk.
+            {% endblocktrans %}
+          </div>
         </div>
       {% elif connection.zone == "external" %}
         <div class="list-group list-group-two-column">
@@ -299,14 +308,19 @@
           </div>
         </div>
 
-        <div class="alert alert-info">
-          <span class="fa fa-info-circle" aria-hidden="true"></span>
-          {% blocktrans trimmed %}
-            This interface should receive your Internet connection.
-            If you connect it to a local network/machine, many
-            services meant to available only internally will not be
-            available.
-          {% endblocktrans %}
+        <div class="alert alert-info d-flex align-items-center" role="alert">
+          <div class="me-2">
+            <span class="fa fa-info-circle" aria-hidden="true"></span>
+            <span class="visually-hidden">{% trans "Info:" %}</span>
+          </div>
+          <div>
+            {% blocktrans trimmed %}
+              This interface should receive your Internet connection.
+              If you connect it to a local network/machine, many
+              services meant to available only internally will not be
+              available.
+            {% endblocktrans %}
+          </div>
         </div>
       {% else %}
         <div class="list-group list-group-two-column">
@@ -318,18 +332,23 @@
           </div>
         </div>
 
-        <div class="alert alert-info">
-          <span class="fa fa-info-circle" aria-hidden="true"></span>
-          {% blocktrans trimmed %}
-            This interface is not maintained by {{ box_name }}.  For security,
-            it is automatically assigned to the external zone.
-          {% endblocktrans %}
-          {% blocktrans trimmed %}
-            This interface should receive your Internet connection.
-            If you connect it to a local network/machine, many
-            services meant to available only internally will not be
-            available.
-          {% endblocktrans %}
+        <div class="alert alert-info d-flex align-items-center" role="alert">
+          <div class="me-2">
+            <span class="fa fa-info-circle" aria-hidden="true"></span>
+            <span class="visually-hidden">{% trans "Info:" %}</span>
+          </div>
+          <div>
+            {% blocktrans trimmed %}
+              This interface is not maintained by {{ box_name }}.  For security,
+              it is automatically assigned to the external zone.
+            {% endblocktrans %}
+            {% blocktrans trimmed %}
+              This interface should receive your Internet connection.
+              If you connect it to a local network/machine, many
+              services meant to available only internally will not be
+              available.
+            {% endblocktrans %}
+          </div>
         </div>
       {% endif %}
     </div>
diff --git a/plinth/modules/networks/templates/connections_fields.html b/plinth/modules/networks/templates/connections_fields.html
index 167ee624b..dfaf56dfc 100644
--- a/plinth/modules/networks/templates/connections_fields.html
+++ b/plinth/modules/networks/templates/connections_fields.html
@@ -6,11 +6,20 @@
 {% load i18n %}
 
 {% if form.non_field_errors %}
-  <div class="alert alert-danger">
-    <a class="close" data-dismiss="alert">&times;</a>
+  <div class="alert alert-danger alert-dismissible
+              d-flex align-items-center fade show">
+    <div class="me-2">
+      <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+      <span class="visually-hidden">{% trans "Error:" %}</span>
+    </div>
+    <div>
       {% for non_field_error in form.non_field_errors %}
         {{ non_field_error }}
       {% endfor %}
+      <button type="button" class="btn-close" data-bs-dismiss="alert"
+              aria-label="{% trans "Close" %}">
+      </button>
+    </div>
   </div>
 {% endif %}
 
diff --git a/plinth/modules/nextcloud/__init__.py b/plinth/modules/nextcloud/__init__.py
index 140219626..57f30484a 100644
--- a/plinth/modules/nextcloud/__init__.py
+++ b/plinth/modules/nextcloud/__init__.py
@@ -21,6 +21,15 @@ from plinth.utils import format_lazy
 
 from . import manifest, privileged
 
+_alert = '''
+<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>
+    <span class="visually-hidden">{}</span>
+  </div>
+  <div>{}</div>
+</div>
+'''
 _description = [
     _('Nextcloud is a self-hosted productivity platform which provides '
       'private and secure functions for file sharing, collaborative work, '
@@ -36,8 +45,7 @@ _description = [
           'and legal reviews are done by the upstream project and not by '
           'Debian/{box_name}. Updates are performed following an independent '
           'cycle.'), box_name=_(cfg.box_name)),
-    format_lazy('<div class="alert alert-warning" role="alert">{}</div>',
-                _('This app is experimental.')),
+    format_lazy(_alert, _('Caution:'), _('This app is experimental.')),
 ]
 
 
diff --git a/plinth/modules/pagekite/templates/pagekite_custom_services.html b/plinth/modules/pagekite/templates/pagekite_custom_services.html
index 34aa75d37..4122c7692 100644
--- a/plinth/modules/pagekite/templates/pagekite_custom_services.html
+++ b/plinth/modules/pagekite/templates/pagekite_custom_services.html
@@ -10,13 +10,18 @@
 {% block content %}
   <h3>{% trans 'Add custom PageKite service' %}</h3>
 
-  <div class="alert alert-warning" role="alert">
-    {% blocktrans trimmed %}
-    <b>Warning:</b><br>Your PageKite frontend server may not support
-    all the protocol/port combinations that you are able to define
-    here. For example, HTTPS on ports other than 443 is known to
-    cause problems.
-    {% endblocktrans %}
+  <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>
+      <span class="visually-hidden">{% trans "Caution:" %}</span>
+    </div>
+    <div>
+      {% blocktrans trimmed %}
+        Your PageKite frontend server may not support all the protocol/port
+        combinations that you are able to define here. For example, HTTPS on
+        ports other than 443 is known to cause problems.
+      {% endblocktrans %}
+    </div>
   </div>
 
   <form class="form" method="post">
diff --git a/plinth/modules/power/templates/power.html b/plinth/modules/power/templates/power.html
index 7ee76134b..667101aab 100644
--- a/plinth/modules/power/templates/power.html
+++ b/plinth/modules/power/templates/power.html
@@ -9,11 +9,17 @@
 {% block configuration %}
 
   {% if pkg_manager_is_busy %}
-    <div class="alert alert-danger">
-    {% blocktrans trimmed %}
-      Currently an installation or upgrade is running.
-      Consider waiting until it's finished before shutting down or restarting.
-    {% endblocktrans %}
+    <div class="alert alert-danger d-flex align-items-center">
+      <div class="me-2">
+        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% blocktrans trimmed %}
+          Currently an installation or upgrade is running.
+          Consider waiting until it's finished before shutting down or restarting.
+        {% endblocktrans %}
+      </div>
     </div>
   {% endif %}
 
diff --git a/plinth/modules/power/templates/power_restart.html b/plinth/modules/power/templates/power_restart.html
index 8e4a7453d..ff739cd13 100644
--- a/plinth/modules/power/templates/power_restart.html
+++ b/plinth/modules/power/templates/power_restart.html
@@ -30,11 +30,17 @@
   {% endif %}
 
   {% if pkg_manager_is_busy %}
-    <div class="alert alert-danger">
-    {% blocktrans trimmed %}
-      Currently an installation or upgrade is running.
-      Consider waiting until it's finished before restarting.
-    {% endblocktrans %}
+    <div class="alert alert-danger d-flex align-items-center">
+      <div class="me-2">
+        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% blocktrans trimmed %}
+        Currently an installation or upgrade is running.
+        Consider waiting until it's finished before shutting down or restarting.
+        {% endblocktrans %}
+      </div>
     </div>
   {% endif %}
 
diff --git a/plinth/modules/power/templates/power_shutdown.html b/plinth/modules/power/templates/power_shutdown.html
index fceac9f29..3aea69f1e 100644
--- a/plinth/modules/power/templates/power_shutdown.html
+++ b/plinth/modules/power/templates/power_shutdown.html
@@ -29,11 +29,17 @@
   {% endif %}
 
   {% if pkg_manager_is_busy %}
-    <div class="alert alert-danger">
-    {% blocktrans trimmed %}
-      Currently an installation or upgrade is running.
-      Consider waiting until it's finished before shutting down.
-    {% endblocktrans %}
+    <div class="alert alert-danger d-flex align-items-center">
+      <div class="me-2">
+        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% blocktrans trimmed %}
+        Currently an installation or upgrade is running.
+        Consider waiting until it's finished before shutting down or restarting.
+        {% endblocktrans %}
+      </div>
     </div>
   {% endif %}
 
diff --git a/plinth/modules/snapshot/templates/snapshot_not_supported.html b/plinth/modules/snapshot/templates/snapshot_not_supported.html
index 7e72da616..9fb46a5df 100644
--- a/plinth/modules/snapshot/templates/snapshot_not_supported.html
+++ b/plinth/modules/snapshot/templates/snapshot_not_supported.html
@@ -7,11 +7,17 @@
 {% load i18n %}
 
 {% block configuration %}
-  <div id="snapshot-not-supported" class="alert alert-danger">
-    {% blocktrans trimmed with fs_types_supported|join:', ' as types_supported %}
-      You have a filesystem of type <strong>{{ fs_type }}</strong>. Snapshots
-      are currently only available on <strong>{{ types_supported }}</strong>
-      filesystems.
-    {% endblocktrans %}
+  <div id="snapshot-not-supported" class="alert alert-danger d-flex align-items-center">
+    <div class="me-2">
+      <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+      <span class="visually-hidden">{% trans "Caution:" %}</span>
+    </div>
+    <div>
+      {% blocktrans trimmed with fs_types_supported|join:', ' as types_supported %}
+        You have a filesystem of type <strong>{{ fs_type }}</strong>. Snapshots
+        are currently only available on <strong>{{ types_supported }}</strong>
+        filesystems.
+      {% endblocktrans %}
+    </div>
   </div>
 {% endblock %}
diff --git a/plinth/modules/upgrades/templates/backports-firstboot.html b/plinth/modules/upgrades/templates/backports-firstboot.html
index 77d14779f..898a2d23c 100644
--- a/plinth/modules/upgrades/templates/backports-firstboot.html
+++ b/plinth/modules/upgrades/templates/backports-firstboot.html
@@ -29,11 +29,17 @@
     {% endblocktrans %}
   </p>
 
-  <div class="alert alert-warning" role="alert">
-    {% blocktrans trimmed %}
-      <strong>Note:</strong> Once frequent feature updates are activated,
-      they cannot be deactivated.
-    {% endblocktrans %}
+  <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>
+      <span class="visually-hidden">{% trans "Caution:" %}</span>
+    </div>
+    <div>
+     {% blocktrans trimmed %}
+       <strong>Note:</strong> Once frequent feature updates are activated, they
+       cannot be deactivated.
+     {% endblocktrans %}
+    </div>
   </div>
 
   <form class="form" method="post">
diff --git a/plinth/modules/upgrades/templates/upgrades_configure.html b/plinth/modules/upgrades/templates/upgrades_configure.html
index 4f3445dc0..976dfb940 100644
--- a/plinth/modules/upgrades/templates/upgrades_configure.html
+++ b/plinth/modules/upgrades/templates/upgrades_configure.html
@@ -72,13 +72,19 @@
     {% endif %}
   </p>
   {% if can_activate_backports and not is_backports_requested %}
-    <div class="alert alert-warning" role="alert">
-      {% url 'snapshot:index' as snapshot_url %}
-      {% blocktrans trimmed %}
-        <strong>Warning!</strong> Once frequent feature updates are activated,
-        they cannot be deactivated. You may wish to take a snapshot using
-        <a href="{{ snapshot_url }}">Storage Snapshots</a> before continuing.
-      {% endblocktrans %}
+    <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>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% url 'snapshot:index' as snapshot_url %}
+        {% blocktrans trimmed %}
+          <strong>Warning!</strong> Once frequent feature updates are activated,
+          they cannot be deactivated. You may wish to take a snapshot using
+          <a href="{{ snapshot_url }}">Storage Snapshots</a> before continuing.
+        {% endblocktrans %}
+      </div>
     </div>
     <p>
       <form class="form" method="post"
diff --git a/plinth/modules/users/templates/users_firstboot.html b/plinth/modules/users/templates/users_firstboot.html
index 0e3537f93..34eaded4a 100644
--- a/plinth/modules/users/templates/users_firstboot.html
+++ b/plinth/modules/users/templates/users_firstboot.html
@@ -28,10 +28,16 @@
              value="{% trans "Create Account" %}"/>
     </form>
   {% else %}
-    <div class="alert alert-danger" role="alert">
-      {% blocktrans trimmed %}
-        An administrator account already exists.
-      {% endblocktrans %}
+    <div class="alert alert-danger d-flex align-items-center" role="alert">
+      <div class="me-2">
+        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      </div>
+      <div>
+        {% blocktrans trimmed %}
+          An administrator account already exists.
+        {% endblocktrans %}
+      </div>
     </div>
 
     <p>
diff --git a/plinth/templates/app.html b/plinth/templates/app.html
index bc30d849a..122c4a214 100644
--- a/plinth/templates/app.html
+++ b/plinth/templates/app.html
@@ -25,10 +25,16 @@
   {% block status %}
     {% if is_running is not None and not is_running %}
       <div id='service-not-running' role="alert"
-           class="alert alert-danger {{ is_enabled|yesno:',d-none' }}">
-        {% blocktrans trimmed with service_name=app_info.name %}
-          Service <em>{{ service_name }}</em> is not running.
-        {% endblocktrans %}
+           class="alert alert-danger d-flex align-items-center {{ is_enabled|yesno:',d-none' }}">
+        <div class="me-2">
+          <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+          <span class="visually-hidden">{% trans "Caution:" %}</span>
+        </div>
+        <div>
+          {% blocktrans trimmed with service_name=app_info.name %}
+            Service <em>{{ service_name }}</em> is not running.
+          {% endblocktrans %}
+        </div>
       </div>
     {% endif %}
   {% endblock %}
diff --git a/plinth/templates/internal-zone.html b/plinth/templates/internal-zone.html
index 61f59bb0a..0e5e9ebbe 100644
--- a/plinth/templates/internal-zone.html
+++ b/plinth/templates/internal-zone.html
@@ -7,26 +7,34 @@
 {% block internal_zone_warning %}
   {% for component in firewall %}
     {% if not component.is_external %}
-      <div class="alert alert-info" role="alert">
-        {% blocktrans trimmed with service_name=component.name %}
-          <em>{{ service_name }}</em> is available only on internal networks or
-          when the client is connected to {{ box_name }} through VPN.
-        {% endblocktrans %}
-        <p>
-          {% with interfaces=component.get_internal_interfaces %}
-            {% if not interfaces %}
-              {% blocktrans trimmed %}
-                Currently there are no network interfaces configured as
-                internal.
-              {% endblocktrans %}
-            {% else %}
-              {% blocktrans trimmed with interface_list=interfaces|join:", " %}
-                Currently the following network interfaces are configured as
-                internal: {{ interface_list }}
-              {% endblocktrans %}
-            {% endif %}
-          {% endwith %}
-        </p>
+      <div class="alert alert-info d-flex align-items-center" role="alert">
+        <div class="me-2">
+          <span class="fa fa-info-circle" aria-hidden="true"></span>
+          <span class="visually-hidden">{% trans "Info:" %}</span>
+        </div>
+        <div>
+          <div>
+            {% blocktrans trimmed with service_name=component.name %}
+              <em>{{ service_name }}</em> is available only on internal networks
+              or when the client is connected to {{ box_name }} through VPN.
+            {% endblocktrans %}
+          </div>
+          <div>
+            {% with interfaces=component.get_internal_interfaces %}
+              {% if not interfaces %}
+                {% blocktrans trimmed %}
+                  Currently there are no network interfaces configured as
+                  internal.
+                {% endblocktrans %}
+              {% else %}
+                {% blocktrans trimmed with interface_list=interfaces|join:", " %}
+                  Currently the following network interfaces are configured as
+                  internal: {{ interface_list }}
+                {% endblocktrans %}
+              {% endif %}
+            {% endwith %}
+          </div>
+        </div>
       </div>
     {% endif %}
   {% endfor %}
diff --git a/plinth/templates/messages.html b/plinth/templates/messages.html
index 95ae9847f..e35a660d7 100644
--- a/plinth/templates/messages.html
+++ b/plinth/templates/messages.html
@@ -5,11 +5,30 @@
 {% load i18n %}
 
 {% for message in messages %}
-  <div class='alert alert-{{ message.tags }} alert-dismissible'>
-    {{ message }}
-    <button type="button" class="close" data-dismiss="alert"
-            aria-label="{% trans "Close" %}">
-      <span aria-hidden="true">&times;</span>
-    </button>
+  <div class="alert alert-{{ message.tags }} alert-dismissible
+              d-flex align-items-center fade show"
+       role="alert">
+    <div class="me-2">
+      {% if message.tags == 'danger' %}
+        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+        <span class="visually-hidden">{% trans "Error:" %}</span>
+      {% elif message.tags == 'warning' %}
+        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+        <span class="visually-hidden">{% trans "Caution:" %}</span>
+      {% elif message.tags == 'info' %}
+        <span class="fa fa-info-circle" aria-hidden="true"></span>
+        <span class="visually-hidden">{% trans "Info:" %}</span>
+      {% elif message.tags == 'success' %}
+        <span class="fa fa-check-circle" aria-hidden="true"></span>
+        <span class="visually-hidden">{% trans "Success:" %}</span>
+      {% endif %}
+    </div>
+
+    <div>
+      {{ message }}
+      <button type="button" class="btn-close" data-bs-dismiss="alert"
+              aria-label="{% trans "Close" %}">
+      </button>
+    </div>
   </div>
 {% endfor %}
diff --git a/plinth/templates/setup.html b/plinth/templates/setup.html
index 6d388ffc0..b9feb345d 100644
--- a/plinth/templates/setup.html
+++ b/plinth/templates/setup.html
@@ -37,24 +37,36 @@
       {% csrf_token %}
 
       {% if has_unavailable_packages %}
-        <div class="alert alert-warning" role="alert">
-          {% blocktrans trimmed %}
-            This application is currently not available in your distribution.
-          {% endblocktrans %}
-          <button type="submit" class="btn btn-default btn-sm" name="refresh-packages">
-            <span class="fa fa-refresh"></span> {% trans "Check again" %}
-          </button>
+        <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>
+            <span class="visually-hidden">{% trans "Caution:" %}</span>
+          </div>
+          <div>
+            {% blocktrans trimmed %}
+              This application is currently not available in your distribution.
+            {% endblocktrans %}
+            <button type="submit" class="btn btn-default btn-sm" name="refresh-packages">
+              <span class="fa fa-refresh"></span> {% trans "Check again" %}
+            </button>
+          </div>
         </div>
       {% elif package_conflicts and package_conflicts_action.value != 'ignore' %}
-        <div class="alert alert-warning" role="alert">
-          {% blocktrans trimmed %}
-            <strong>Conflicting Packages:</strong> Some packages installed on
-            the system conflict with the installation of this app. The following
-            packages will be removed if you proceed:
-          {% endblocktrans %}
-          {% for package in package_conflicts %}
-            {{ package }}
-          {% endfor %}
+        <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>
+            <span class="visually-hidden">{% trans "Caution:" %}</span>
+          </div>
+          <div>
+            {% blocktrans trimmed %}
+              <strong>Conflicting Packages:</strong> Some packages installed on
+              the system conflict with the installation of this app. The following
+              packages will be removed if you proceed:
+            {% endblocktrans %}
+            {% for package in package_conflicts %}
+              {{ package }}
+            {% endfor %}
+          </div>
         </div>
       {% endif %}