fix: logout template design adjustments (#1460)

Author: lukasvinclav

src/unfold/static/unfold/css/styles.css

@@ -44,7 +44,7 @@
 
         <div class="flex flex-col gap-3 mt-6">
             {% component "unfold/components/button.html" with submit=1 variant="primary" class="submit-row w-full" %}
-                {% translate 'Log in' %} <span class="material-symbols-outlined ml-2 relative right-0 transition-all group-hover:-right-1">arrow_forward</span>
+                {% translate 'Log in' %} <span class="material-symbols-outlined relative right-0 transition-all group-hover:-right-1 text-sm">arrow_forward</span>
             {% endcomponent %}
 
             {% url 'admin_password_reset' as password_reset_url %}

src/unfold/templates/admin/login.html

@@ -1,8 +1,12 @@
-{% extends "unfold/layouts/skeleton.html" %}
+{% extends 'unfold/layouts/unauthenticated.html' %}
 
-{% load i18n %}
+{% load i18n unfold %}
 
-{% block base %}
+{% block title %}
+    {{ title }} | {{ site_title }}
+{% endblock %}
+
+{% block content %}
     <div id="page" class="bg-white flex min-h-screen dark:bg-base-900 ">
         <div class="flex grow items-center justify-center mx-auto px-4">
             <div class="w-full sm:w-96">
@@ -11,12 +15,13 @@ <h1 class="font-semibold mb-4 text-font-important-light text-xl tracking-tight d
                 </h1>
 
                 <p class="leading-relaxed mb-10">
-                    {% translate "Thanks for spending some quality time with the web site today." %}
+                    {% trans "Thanks for spending some quality time with the web site today." %}
                 </p>
 
-                <a href="{% url "admin:index" %}" class="bg-primary-600 block border border-transparent font-semibold py-2 rounded-default text-sm text-center text-white w-full">
-                    {% translate "Log in again" %}
-                </a>
+                {% url "admin:index" as login_url %}
+                {% component "unfold/components/button.html" with href=login_url variant="primary" class="w-full" %}
+                    {% trans "Log in again" %} <span class="material-symbols-outlined relative right-0 transition-all group-hover:-right-1 text-sm">arrow_forward</span>
+                {% endcomponent %}
             </div>
         </div>
     </div>

src/unfold/templates/registration/logged_out.html

@@ -2,8 +2,8 @@
 
 <div class="absolute flex flex-row items-center justify-between left-0 m-4 right-0 top-0">
     {% if site_url %}
-        <a href="{{ site_url }}" class="flex font-medium items-center text-sm text-primary-600 dark:text-primary-500">
-            <span class="material-symbols-outlined mr-2">arrow_back</span> {% trans 'Return to site' %}
+        <a href="{{ site_url }}" class="flex font-medium gap-2 group items-center text-sm text-primary-600 dark:text-primary-500">
+            <span class="material-symbols-outlined left-0 relative text-sm transition-all group-hover:-left-1">arrow_back</span> {% trans 'Return to site' %}
         </a>
     {% endif %}
 

src/unfold/templates/unfold/helpers/unauthenticated_header.html

@@ -6,6 +6,6 @@ <h1 class="font-semibold">
             <span class="block text-font-important-light dark:text-font-important-dark">{{ subtitle }} </span>
         {% endif %}
 
-        <span class="block text-primary-600 text-xl dark:text-primary-500">{{ title }}</span>
+        <span class="block font-semibold text-primary-600 tracking-tight text-xl dark:text-primary-500">{{ title }}</span>
     </h1>
 </div>