From 3510a7910b192eecc404658406950a9e0f7fab63 Mon Sep 17 00:00:00 2001
From: Stanislaw Grams <stanislawgrams@gmail.com>
Date: Fri, 13 Feb 2026 09:05:58 +0100
Subject: [PATCH] [style](trx-frontend-http): create connected button group for
 theme/auth buttons

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>
---
 .../trx-frontend-http/assets/web/index.html   |  6 +++--
 .../trx-frontend-http/assets/web/style.css    | 26 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 779c65c..c5ba913 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -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) -->
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index af84d96..ddefa82 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -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);