kriss/geniusrun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): /config page + icon-only header (profile/settings/logout)

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Kriss Vila
2026-08-04 00:20:02 +02:00
parent d45489714d
commit bee3d7e493
5 changed files with 202 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/App.css
View File

@@ -52,40 +52,6 @@ body {
color: white;
}
/* Pill-shaped and icon-led, deliberately unlike the rectangular .tab
buttons: this opens account/profile settings, not an application view
alongside Activities/Progression/Training plan, so it reads more like an
account chip (à la Slack/GitHub's corner avatar) than another nav tab. */
.profile-name {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #1a1d24;
border: 1px solid #2a2d35;
color: #9aa0ab;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: 999px;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
}
.profile-name::before {
content: "⚙️";
font-size: 0.8rem;
}
.profile-name:hover:not(.active) {
border-color: #3b82f6;
color: #e6e6e6;
}
.profile-name.active {
background: #3b82f6;
border-color: #3b82f6;
color: white;
}
.header-actions {
margin-left: auto;
display: flex;
@@ -93,19 +59,51 @@ body {
gap: 0.6rem;
}
.logout-link {
background: none;
border: none;
padding: 0;
font: inherit;
/* Icon-only header buttons (profile / settings / log out): circular chips,
deliberately unlike the rectangular .tab buttons -- these are account/
instance actions, not application views. No visible text: the glyph is
the label (full text lives in title/aria-label). */
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
background: #1a1d24;
border: 1px solid #2a2d35;
color: #9aa0ab;
font-size: 0.85rem;
text-decoration: none;
border-radius: 999px;
cursor: pointer;
font-size: 0.95rem;
}
.logout-link:hover {
color: #3b82f6;
.icon-button:hover:not(.active) {
border-color: #3b82f6;
color: #e6e6e6;
}
.icon-button.active {
background: #3b82f6;
border-color: #3b82f6;
color: white;
}
.env-config div {
display: flex;
gap: 1rem;
padding: 0.25rem 0;
}
.env-config dt {
min-width: 18rem;
color: #9aa0ab;
font-family: monospace;
}
.env-config dd {
margin: 0;
font-family: monospace;
overflow-wrap: anywhere;
}
.garmin-connection {