[TASK] finalize notification styling

templates/includes/macros.html.tera

@@ -28,29 +28,29 @@
     <header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10">
         <div class="max-w-screen-xl w-full flex justify-between items-center">
             <div class="w-1/3 truncate">
-                <a class="flex items-center" href="/">
+                <a href="/">
                     Hü
                     {{ loggedin_user.name }}
-                    {% if loggedin_user.amount_unread_notifications > 0 %}
-                        <span class="relative inline-flex items-end ms-1">
-                            <svg 
-                                height="20"
-                                width="24"
-                                aria-hidden="true"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="currentColor"
-                                viewBox="0 0 20 24">
-                              <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
-                              <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
-                          </svg>
-                          <small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification">
-                            {{ loggedin_user.amount_unread_notifications }}
-                          </small>
-                        </span>
-                    {% endif %}
                 </a>
             </div>
-            <div>
+            <div class="flex items-center">
+                {% if loggedin_user.amount_unread_notifications > 0 %}
+                    <a href="/#notification" class="relative inline-flex items-end ms-2 me-3">
+                      <svg 
+                            height="20"
+                            width="24"
+                            aria-hidden="true"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="currentColor"
+                            viewBox="0 0 20 24">
+                          <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
+                          <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
+                      </svg>
+                      <small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification">
+                        {{ loggedin_user.amount_unread_notifications }}
+                      </small>
+                    </a>
+                {% endif %}
                 <a href="#"
                    class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer"
                    data-sidebar="true"

templates/index.html.tera

@@ -2,7 +2,7 @@
 {% extends "base" %}
 {% block content %}
     <div class="max-w-screen-lg w-full">
-        <h1 class="h1">Ruderassistent</h1>
+        <h1 class="h1">Ruder<wbr/>assistent</h1>
         <div class="grid gap-3 my-5">
             <div class="m-auto">
                 <a href="/planned"
@@ -11,7 +11,7 @@
                     <span class="text-xl px-3">Geplante Ausfahrten</span>
                 </a>
             </div>
-            <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
+            <div id="notification" class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
                  role="alert">
                 <h2 class="h2">Nachrichten</h2>
                 <div class="divide-y">
@@ -27,7 +27,7 @@
                                 <div>
                                     {% if not notification.read_at %}
                                         <a href="/notification/{{ notification.id }}/read" class="inline-block">
-                                            <button class="btn btn-alert bg-red-100 dark:bg-red-900" type="button">
+                                            <button class="btn btn-primary" type="button">
                                                 &#10003;
                                                 <span class="sr-only">Notification gelesen</span>
                                             </button>
@@ -38,8 +38,8 @@
                         {% endif %}
                     {% endfor %}
                 </div>
-                <details class="py-3 bg-gray-200 dark:bg-primary-950 rounded-b-md">
+                <details class="py-3 border-t rounded-b-md">
-                    <summary class="px-3">Vergangene Nachrichten (14 Tage)</summary>
+                    <summary class="px-3 cursor-pointer">Vergangene Nachrichten (14 Tage)</summary>
                     <div class="divide-y text-sm">
                         {% for notification in notifications %}
                             {% if notification.read_at %}