From 30756ad4aa844ce33923540e16c4251051c20af0 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 19 Apr 2024 11:09:31 +0200
Subject: [PATCH] [TASK] improve styling

---
 frontend/scss/app.scss                      |  1 +
 frontend/scss/components/_notification.scss |  5 ++++
 templates/includes/macros.html.tera         | 27 ++++++++++++---------
 3 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 frontend/scss/components/_notification.scss

diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
index 770dc11..02e94d7 100644
--- a/frontend/scss/app.scss
+++ b/frontend/scss/app.scss
@@ -13,3 +13,4 @@
 @import 'components/search';
 @import 'components/important';
 @import 'components/searchable-table';
+@import 'components/notification';
diff --git a/frontend/scss/components/_notification.scss b/frontend/scss/components/_notification.scss
new file mode 100644
index 0000000..0532299
--- /dev/null
+++ b/frontend/scss/components/_notification.scss
@@ -0,0 +1,5 @@
+.notification {
+    right: -.2rem;
+    top: -.1rem;
+    font-size: .5rem;
+}
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index ba3c29c..30283e3 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -28,20 +28,25 @@
     <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 href="/">
+                <a class="flex items-center" href="/">
                     Hü
                     {{ loggedin_user.name }}
                     {% if loggedin_user.amount_unread_notifications > 0 %}
-                        <span class="bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300 inline-flex items-center">
-                            <svg class="w-3 h-3 me-1.5"
-                                 aria-hidden="true"
-                                 xmlns="http://www.w3.org/2000/svg"
-                                 fill="currentColor"
-                                 viewBox="0 0 20 20">
-                                <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>
-                        {{ loggedin_user.amount_unread_notifications }}</span>
+                        <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>