fix(ui): adjust styles for authentication name display

Author: felixfon

weblate/accounts/templatetags/authnames.py

@@ -15,10 +15,7 @@
 from django.utils.safestring import mark_safe
 from django.utils.translation import gettext_lazy
 
-from weblate.accounts.utils import get_key_name
-
 if TYPE_CHECKING:
-    from django_otp.models import Device
     from django_stubs_ext import StrOrPromise
 
     from weblate.accounts.types import DeviceType
@@ -59,15 +56,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}" />"""
+
+NAME_SOCIAL_TEMPLATE = """<span class="auth-name">{name}</span>"""
 
-SOCIAL_TEMPLATE = """
-{icon}
-{separator}
-{name}
-"""
+SOCIAL_TEMPLATE = """{icon}{label}"""
 
 
 def get_auth_params(auth: str) -> dict[str, StrOrPromise]:
@@ -96,30 +89,26 @@ def get_auth_params(auth: str) -> dict[str, StrOrPromise]:
 
 
 @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)
+    params["label"] = format_html(NAME_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):
     """Get nice name for authentication backend."""
     return get_auth_params(auth)["name"]
 
 
-@register.simple_tag
-def key_name(device: Device) -> str:
-    return format_html('<span class="auth-name">{}</span>', get_key_name(device))
-
-
 @register.simple_tag
 def second_factor_name(name: DeviceType) -> StrOrPromise:
     return SECOND_FACTORS[name]

weblate/static/styles/main.css

@@ -2327,8 +2327,8 @@ tbody.warning {
 }
 
 .auth-name {
-  margin: 8px 0;
-  display: inline-block;
+  margin: 0 8px;
+  vertical-align: middle;
 }
 
 .totp-qr svg {

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/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 %}