ui: Restyle tags, remove underlining of text

- Tags have important text that is too small and could cause problems with users
with limited vision. Make them regular buttons. Make the buttons shorter and
rounder to resemble previous styling.

- Drop underlining of text in the process.

- In code, don't call them 'badges' anymore.

Tests:

- Run functional tests for tags.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/templates/app-header.html

@@ -55,7 +55,7 @@
       <div>
         {% for tag in app_info.tags %}
         <a href="{% url 'apps' %}?tag={{ tag|urlencode }}"
-           class="badge rounded-pill text-bg-light">
+           class="btn btn-light rounded-pill tag">
             {% trans tag %}
           </a>
         {% endfor %}

plinth/templates/apps.html

@@ -15,7 +15,7 @@
         <div class="tag-input">
           <div id="selected-tags">
             {% for tag in tags %}
-              <span class="badge rounded-pill text-bg-light tag-badge"
+              <span class="btn btn-light rounded-pill tag"
                     data-tag="{{ tag }}">
                 {% trans tag %}
                 <button class="btn btn-sm btn-light remove-tag">

plinth/tests/tags/test_functional.py

@@ -76,7 +76,7 @@ def test_click_on_tag(session_browser, bittorrent_tag):
 def test_tag_localization(session_browser, locale):
     """Test that tags are localized and tests in done localized."""
     functional.visit(session_browser, '/plinth/apps/?tag=Sharing')
-    badge = session_browser.find_by_css('.tag-badge[data-tag="Sharing"]').first
+    badge = session_browser.find_by_css('.tag[data-tag="Sharing"]').first
     assert 'Compartir' in badge.text
 
     search_input = session_browser.find_by_id('add-tag-input').first

static/tags.js

@@ -52,9 +52,9 @@ function updatePathWithTags(tags) {
  * @returns {string[]} An array of tag names currently displayed.
  */
 function getTags(tagToRemove) {
-    const tagBadges = document.querySelectorAll('#selected-tags .tag-badge');
-    return Array.from(tagBadges)
-        .map(tagBadge => tagBadge.dataset.tag)
+    const tagElements = document.querySelectorAll('#selected-tags .tag');
+    return Array.from(tagElements)
+        .map(tagElement => tagElement.dataset.tag)
         .filter(tag => tag !== tagToRemove);
 }
 
@@ -156,7 +156,7 @@ function onTagInputDropdownItemClicked(event) {
  */
 function onRemoveTagClicked(event) {
     const button = event.currentTarget;
-    const tag = button.parentElement.dataset.tag;
+    const tag = button.dataset.tag;
     const tags = getTags(tag);
     updatePathWithTags(tags);
 }
@@ -170,7 +170,7 @@ function onRemoveTagClicked(event) {
  * available tags in a searchable dropdown.
  */
 document.addEventListener('DOMContentLoaded', function () {
-    document.querySelectorAll('.remove-tag').forEach(button => {
+    document.querySelectorAll('.tag').forEach(button => {
         button.addEventListener('click', onRemoveTagClicked);
     });
 

static/themes/default/css/main.css

@@ -340,6 +340,17 @@ html {
     margin-bottom: 1.25rem;
 }
 
+/* When an exception's text is shown in message as alert component, don't
+   overflow the alert's width. */
+.alert.d-flex div {
+    max-width: 100%;
+}
+
+/* Tags */
+.tag {
+    --bs-btn-padding-y: 0.25rem; /* Make the badge shorter */
+}
+
 /* Tag Input Container */
 .tag-input {
     display: flex;
@@ -351,17 +362,12 @@ html {
     margin-bottom: 2rem;
 }
 
-/* When an exception's text is shown in message as alert component, don't
-   overflow the alert's width. */
-.alert.d-flex div {
-    max-width: 100%;
-}
-
 /* Remove tag button */
-.tag-badge .remove-tag {
+.tag .remove-tag {
     background-color: transparent; /* Match the tag's background color */
     border: none;
     cursor: pointer;
+    --bs-btn-padding-y: 0; /* To make the entire tag button shorter */
 }
 
 /* Adjust input field width */