diff --git a/src/GmRelay.Web/Components/Layout/NavMenu.razor b/src/GmRelay.Web/Components/Layout/NavMenu.razor index e326eb9..745eff7 100644 --- a/src/GmRelay.Web/Components/Layout/NavMenu.razor +++ b/src/GmRelay.Web/Components/Layout/NavMenu.razor @@ -39,9 +39,19 @@ @@ -79,4 +89,7 @@ private void ToggleMenu() => isOpen = !isOpen; private void CloseMenu() => isOpen = false; + + private static string GetPlatformLabel(System.Security.Claims.ClaimsPrincipal user) => + user.TryGetDiscordId(out _) ? "Discord" : "Telegram"; } diff --git a/src/GmRelay.Web/Components/Pages/Login.razor b/src/GmRelay.Web/Components/Pages/Login.razor index 1547289..66cf48e 100644 --- a/src/GmRelay.Web/Components/Pages/Login.razor +++ b/src/GmRelay.Web/Components/Pages/Login.razor @@ -10,7 +10,7 @@

GM-Relay

- + @if (Navigation.Uri.Contains("error=auth_failed")) { @@ -20,6 +20,17 @@ }
+ + + +
diff --git a/src/GmRelay.Web/wwwroot/app.css b/src/GmRelay.Web/wwwroot/app.css index 3561089..317e56b 100644 --- a/src/GmRelay.Web/wwwroot/app.css +++ b/src/GmRelay.Web/wwwroot/app.css @@ -1619,3 +1619,78 @@ body.telegram-mini-app .session-card-mobile { display: flex; } } + +/* === Discord Login Button === */ +.login-btn-discord { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + width: 100%; + padding: 0.75rem 1.25rem; + border-radius: var(--radius-md); + font-weight: 500; + font-size: 0.9375rem; + text-decoration: none; + transition: all 0.2s ease; + background-color: #5865F2; + color: white; + border: none; + cursor: pointer; +} + +.login-btn-discord:hover { + background-color: #4752C4; + transform: translateY(-1px); +} + +.login-btn-discord:active { + transform: translateY(0); +} + +.login-btn-discord .login-btn-icon { + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.login-divider { + display: flex; + align-items: center; + margin: 1.25rem 0; + color: var(--text-muted); + font-size: 0.875rem; +} + +.login-divider::before, +.login-divider::after { + content: ""; + flex: 1; + height: 1px; + background: var(--border-color); +} + +.login-divider span { + padding: 0 1rem; +} + +/* === Platform Indicator in Nav === */ +.nav-user-info { + display: flex; + flex-direction: column; + gap: 0.125rem; +} + +.nav-user-platform { + font-size: 0.6875rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.025em; +} + +.nav-user-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +}