root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign refresh button: SVG icon, ghost style, spin hover
Some checks failed
Build & Deploy / deploy (push) Blocked by required conditions
Details
Build & Deploy / bump-version (push) Blocked by required conditions
Details
Build & Deploy / build (push) Has been cancelled
Details

Browse source 
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>
This commit is contained in:
Daniel 2026-03-11 11:20:43 +01:00
parent 81801dcd88
commit 0f43f78d71
2 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/src/App.tsx
View file

@ -315,7 +315,12 @@ export default function App() {
onClick={() => window.location.reload()} onClick={() => window.location.reload()}
title="Seite neu laden" 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> </button>
<span <span
className="hub-version hub-version-clickable" className="hub-version hub-version-clickable"

21
web/src/styles.css
View file

@ -352,24 +352,27 @@ html, body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 30px; width: 28px;
height: 30px; height: 28px;
border: 1px solid var(--border); border: none;
border-radius: var(--radius); border-radius: var(--radius);
background: var(--bg-secondary); background: transparent;
color: var(--text-muted); color: var(--text-muted);
font-size: 14px;
line-height: 1;
cursor: pointer; 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 { .hub-refresh-btn:hover {
color: var(--accent); color: var(--accent);
border-color: var(--accent-border);
background: var(--accent-dim); background: var(--accent-dim);
} }
.hub-refresh-btn:hover svg {
transform: rotate(180deg);
}
.hub-refresh-btn:active { .hub-refresh-btn:active {
transform: scale(0.95); transform: scale(0.92);
} }
/* ── Admin Button (header) ── */ /* ── Admin Button (header) ── */