From 0f43f78d7162f2e17f44609f619ccf1d3ba29f8b Mon Sep 17 00:00:00 2001
From: Daniel <daniel@daddelolymp.de>
Date: Wed, 11 Mar 2026 11:20:43 +0100
Subject: [PATCH] Redesign refresh button: SVG icon, ghost style, spin hover

Replace emoji with clean SVG refresh icon. Remove border for
ghost-style matching other header elements. Add 180deg rotation
on hover for visual feedback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/App.tsx    |  7 ++++++-
 web/src/styles.css | 21 ++++++++++++---------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 2347765..03968ed 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -315,7 +315,12 @@ export default function App() {
             onClick={() => window.location.reload()}
             title="Seite neu laden"
           >
-            {'\u{1F504}'}
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 2v6h-6" />
+              <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
+              <path d="M3 22v-6h6" />
+              <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
+            </svg>
           </button>
           <span
             className="hub-version hub-version-clickable"
diff --git a/web/src/styles.css b/web/src/styles.css
index 775631a..89bfb94 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -352,24 +352,27 @@ html, body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
-  border: 1px solid var(--border);
+  width: 28px;
+  height: 28px;
+  border: none;
   border-radius: var(--radius);
-  background: var(--bg-secondary);
+  background: transparent;
   color: var(--text-muted);
-  font-size: 14px;
-  line-height: 1;
   cursor: pointer;
-  transition: all var(--transition);
+  transition: color var(--transition), background var(--transition);
+}
+.hub-refresh-btn svg {
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .hub-refresh-btn:hover {
   color: var(--accent);
-  border-color: var(--accent-border);
   background: var(--accent-dim);
 }
+.hub-refresh-btn:hover svg {
+  transform: rotate(180deg);
+}
 .hub-refresh-btn:active {
-  transform: scale(0.95);
+  transform: scale(0.92);
 }
 
 /* ── Admin Button (header) ── */