From a4017b2bf2e02aa4e5a0506b78c2b55795d7a20c Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Mon, 18 Nov 2024 09:20:26 -0800
Subject: [PATCH] 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     |  2 +-
 plinth/templates/apps.html           |  2 +-
 plinth/tests/tags/test_functional.py |  2 +-
 static/tags.js                       | 10 +++++-----
 static/themes/default/css/main.css   | 20 +++++++++++++-------
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/plinth/templates/app-header.html b/plinth/templates/app-header.html
index 3a9362eac..0c6e60c5c 100644
--- a/plinth/templates/app-header.html
+++ b/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 %}
diff --git a/plinth/templates/apps.html b/plinth/templates/apps.html
index d9efd8b17..8fdbb759f 100644
--- a/plinth/templates/apps.html
+++ b/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">
diff --git a/plinth/tests/tags/test_functional.py b/plinth/tests/tags/test_functional.py
index 7a91f315b..806413457 100644
--- a/plinth/tests/tags/test_functional.py
+++ b/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
diff --git a/static/tags.js b/static/tags.js
index 93d83c4c3..100164edc 100644
--- a/static/tags.js
+++ b/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);
     });
 
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index a9d60bb66..78c2f8631 100644
--- a/static/themes/default/css/main.css
+++ b/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 */