sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[style](trx-frontend-http): create connected button group for theme/auth buttons

Browse Source 
Replace separate theme and auth buttons with a visually connected
button group. Buttons are grouped with no gap between them and
rounded corners only on the outer edges, creating a cohesive control.

Features:
- First button: rounded left edges
- Last button: rounded right edges
- Middle buttons: sharp edges (if more added)
- Negative margin to overlap borders smoothly
- Hover effect for feedback

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
This commit is contained in:
Stan Grams
2026-02-13 09:05:58 +01:00
parent 0f9f00c441
commit 3510a7910b
2 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+4 -2
View File
@@ -22,8 +22,10 @@
</div>
<div class="header-right">
<img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
<button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
<button id="header-auth-btn" class="theme-toggle-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
<div class="button-group">
<button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
<button id="header-auth-btn" class="theme-toggle-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
</div>
</div>
</div>
<!-- Auth gate (hidden by default, shown if auth is required) -->
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+26
View File
@@ -303,6 +303,26 @@ small { color: var(--text-muted); }
flex-shrink: 0;
}
.header-logo { height: 6em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.button-group {
display: flex;
gap: 0;
align-items: center;
}
.button-group .theme-toggle-btn {
border-radius: 0;
margin-left: -1px;
}
.button-group .theme-toggle-btn:first-child {
border-radius: 999px 0 0 999px;
margin-left: 0;
}
.button-group .theme-toggle-btn:last-child:not(:first-child) {
border-radius: 0 999px 999px 0;
}
.theme-toggle-btn {
height: 1.7rem;
min-height: 1.7rem;
@@ -314,6 +334,12 @@ small { color: var(--text-muted); }
border: 1px solid var(--btn-border);
background: linear-gradient(135deg, color-mix(in srgb, var(--btn-bg) 82%, #ffffff), var(--btn-bg));
color: var(--text);
cursor: pointer;
transition: all 150ms ease;
}
.theme-toggle-btn:hover {
opacity: 0.9;
}
[data-theme="light"] .theme-toggle-btn {
background: linear-gradient(135deg, #0f172a, #334155);