fix: request reload notification and update button

2 files changed, 24 insertions, 13 deletions

diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index 33e5d20..ba85d45 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -728,17 +728,23 @@ input.inline:focus-visible {
 
 a.reload {
     display: none;
-    position: absolute;
-    height: 1.2rem;
-    width: 1.2rem;
-    background: var(--bg-red);
-    border-radius: 50%;
+    margin: 0;
+    vertical-align: top;
+    border-radius: 1.4rem;
+}
 
-    color: white;
-    text-decoration: none;
-    font-size: .6rem;
-    align-content: center;
-    justify-content: center;
+a.reload::before {
+    content: "⟳";
+    font-size: 1.2rem;
+    vertical-align: top;
+}
+
+a.reload span {
+    display: none;
+}
+
+a.reload:hover span {
+    display: inline;
 }
 
 .new-token {
@@ -767,4 +773,4 @@ a.reload {
 .issue-path {
     font-family: monospace;
     line-height: 1rem;
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index a732fa2..0f65a7f 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -9,7 +9,12 @@
     <div th:replace="~{fragments.html :: nav}"></div>
     <main>
 
-        <h1>Alle Anfragen<a id="reload-notify" class="reload" title="Neue Anfragen" th:href="@{/}">⟳</a></h1>
+        <h1>
+            Alle Anfragen
+            <a id="reload-notify" class="btn btn-red reload" title="Neue Anfragen laden" th:href="@{/}">
+                <span>Neue Anfragen laden</span>
+            </a>
+        </h1>
 
         <div>
             <h2 th:if="${patientPseudonym != null}">
@@ -108,7 +113,7 @@
         const eventSource = new EventSource('statistics/events');
         eventSource.addEventListener('newrequest', event => {
             console.log(event);
-            document.getElementById('reload-notify').style.display = 'inline-flex';
+            document.getElementById('reload-notify').style.display = 'inline';
         });
     </script>
 </body>