ui: Use default button style for tag buttons

- In the app header as well as tag search bar.

- De-emphasize the tag buttons in app header so that users won't see them as
sections of the page.

- Add a bullet Unicode character between the tags in app header to separate them
properly with new de-emphasized styling.

- Fix vertical alignment of text between tag buttons in app header and the close
button in tags in tag search bar.

Tests:

- In the app header, styling has been de-emphasized and tags now look more like
simple text. They are a separated with a bullet Unicode character. Vertical
alignment of bullets is accurate.

- In the tag search bar, tags continue to look like buttons but more like default
buttons. Vertical alignment of close button is accurate.

- In both areas tags look properly in dark and light color themes.

- In mobile view when there are a lot of tags, tags flow into second line.

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

plinth/templates/app-header.html

@@ -43,10 +43,11 @@
     </section>
 
     {% if app_info.tags %}
-      <div class="app-tags">
+      <div class="app-tags d-flex align-items-center flex-wrap">
         {% for tag in app_info.tags %}
+        {% if not forloop.first %}•{% endif %}
           <a href="{{ active_section_url }}?tag={{ tag|urlencode }}"
-             class="btn btn-light rounded-pill tag">
+             class="btn btn-default rounded-pill tag">
             {% trans tag %}
           </a>
         {% endfor %}

plinth/templates/tags.html

@@ -8,12 +8,12 @@
   <div class="container">
     <div class="dropdown searchable-dropdown">
       <div class="tag-input">
-        <div id="selected-tags">
+        <div id="selected-tags" class="d-flex align-items-center flex-wrap">
           {% for tag in tags %}
-            <span class="btn btn-light rounded-pill tag"
+            <span class="btn btn-default rounded-pill tag d-flex align-items-center"
                   data-tag="{{ tag }}">
               {% trans tag %}
-              <button class="btn btn-sm btn-light remove-tag">
+              <button class="btn btn-sm btn-default remove-tag">
                 <i class="fa fa-times"></i>
               </button>
             </span>

static/themes/default/css/main.css

@@ -292,16 +292,21 @@ html {
 /* Tags */
 .tag {
     --bs-btn-padding-y: 0.25rem; /* Make the badge shorter */
+    border-style: none;
+}
+
+#selected-tags .tag {
+    border-style: solid;
 }
 
 /* Tag Input Container */
 .tag-input {
     display: flex;
     align-items: center;
-    border: 1px solid #ced4da;
+    border: 1px solid var(--bs-border-color);
     border-radius: .25rem;
     padding: .375rem .75rem;
-    background-color: #fff;
+    background-color: var(--bs-body-bg);
     margin-bottom: 2rem;
 }