fix(ui): adjust styles for authentication name display

Author: felixfon

weblate/accounts/templatetags/authnames.py

@@ -12,7 +12,6 @@
 from django.conf import settings
 from django.contrib.staticfiles.storage import staticfiles_storage
 from django.utils.html import format_html
-from django.utils.safestring import mark_safe
 from django.utils.translation import gettext_lazy
 
 from weblate.accounts.utils import get_key_name
@@ -59,15 +58,11 @@
     "recovery": gettext_lazy("Use recovery codes"),
 }
 
-IMAGE_SOCIAL_TEMPLATE = """
-<img class="auth-image" src="{image}" />
-"""
+IMAGE_SOCIAL_TEMPLATE = (
+    """<img class="auth-image" src="{image}" alt="" aria-hidden="true" />"""
+)
 
-SOCIAL_TEMPLATE = """
-{icon}
-{separator}
-{name}
-"""
+SOCIAL_TEMPLATE = """{icon}<span class="auth-name">{name}</span>"""
 
 
 def get_auth_params(auth: str) -> dict[str, StrOrPromise]:
@@ -92,22 +87,19 @@ def get_auth_params(auth: str) -> dict[str, StrOrPromise]:
     return params
 
 
-auth_name_default_separator = mark_safe("<br />")
-
-
 @register.simple_tag
-def auth_name(auth: str, separator: str = auth_name_default_separator, only: str = ""):
+def auth_name(auth: str, only: str = ""):
     """Create HTML markup for social authentication method."""
     params = get_auth_params(auth)
 
     if not params["image"].startswith(("http", "data:")):
         params["image"] = staticfiles_storage.url(f"auth/{params['image']}")
-    params["icon"] = format_html(IMAGE_SOCIAL_TEMPLATE, separator=separator, **params)
+    params["icon"] = format_html(IMAGE_SOCIAL_TEMPLATE, **params)
 
     if only:
         return params[only]
 
-    return format_html(SOCIAL_TEMPLATE, separator=separator, **params)
+    return format_html(SOCIAL_TEMPLATE, **params)
 
 
 def get_auth_name(auth: str):
@@ -117,7 +109,7 @@ def get_auth_name(auth: str):
 
 @register.simple_tag
 def key_name(device: Device) -> str:
-    return format_html('<span class="auth-name">{}</span>', get_key_name(device))
+    return format_html('<span class="key-name">{}</span>', get_key_name(device))
 
 
 @register.simple_tag

weblate/static/styles/main.css

@@ -569,6 +569,10 @@ th:hover .sort-icon.sort-up {
   text-align: left;
 }
 
+.btn-auth a:hover {
+  text-decoration: none;
+}
+
 .dir-rtl .btn-auth a {
   text-align: right;
 }
@@ -2327,6 +2331,11 @@ tbody.warning {
 }
 
 .auth-name {
+  margin-inline-start: 8px;
+  vertical-align: middle;
+}
+
+.key-name {
   margin: 8px 0;
   display: inline-block;
 }

weblate/templates/accounts/login.html

@@ -52,7 +52,7 @@ <h5 class="login-label">{% translate "Sign in with:" %}</h5>
                       <a href=""
                          class="btn btn-outline-primary link-post"
                          data-href="{% url 'social:begin' name %}"
-                         {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name " " %}</a>
+                         {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name %}</a>
                     </div>
                   {% endfor %}
                 </div>

weblate/templates/accounts/profile.html

@@ -246,7 +246,9 @@ <h4 class="card-title">{% translate "Add new user identity" %}</h4>
                   {% for name in new_backends %}
                     <a href=""
                        class="btn btn-link link-post"
-                       data-href="{% url 'social:begin' name %}?next={% url 'profile' %}%23account">{% auth_name name %}</a>
+                       data-href="{% url 'social:begin' name %}?next={% url 'profile' %}%23account">{% auth_name name only="icon" %}
+                      <br />
+                    {% auth_name name only="name" %}</a>
                   {% endfor %}
                 </div>
               </div>

weblate/templates/accounts/redirect.html

@@ -19,7 +19,7 @@
       <a href=""
          class="btn btn-link link-auto link-post"
          data-href="{% url 'social:begin' backend %}"
-         {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name backend " " %}</a>
+         {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name backend %}</a>
     </div>
 
   </div>

weblate/templates/accounts/register.html

@@ -60,7 +60,7 @@ <h5 class="login-label">{% translate "Create an account using:" %}</h5>
                         <a href=""
                            class="btn btn-outline-primary link-post"
                            data-href="{% url 'social:begin' name %}"
-                           {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name " " %}</a>
+                           {% if next %}data-params='{"next": "{{ next|escapejs }}"}'{% endif %}>{% auth_name name %}</a>
                       </div>
                     {% endfor %}
                   </div>

weblate/templates/accounts/user.html

@@ -250,7 +250,7 @@ <h3>{{ page_user }}</h3>
             <tbody>
               {% for social in page_user.social_auth.all %}
                 <tr>
-                  <th>{% auth_name social.provider ' ' %}</th>
+                  <th>{% auth_name social.provider %}</th>
                   <td>{{ social.uid }}</td>
                   <td>
                     {% for verified in social.verifiedemail_set.all %}