lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: dark glass button for Nostr Extension login + or-divider

Browse Source 
Replaced the hero-info-button class with a dark glass morphism style
matching the nav buttons — dark translucent background, subtle inset
highlight, backdrop blur, and hover lift. Added an -or- divider
between the Nostr Extension and Amber login options.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-13 22:39:34 +00:00
parent 6480d02b11
commit 941d8917f3
2 changed files with 47 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@@ -20,7 +20,7 @@ services:
context: .
dockerfile: Dockerfile
args:
CACHEBUST: "21"
CACHEBUST: "22"
VITE_USE_MOCK_DATA: "false"
VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
VITE_INDEEHUB_API_URL: /api

47
src/components/AuthModal.vue
View File

@@ -95,7 +95,7 @@
<button
@click="handleNostrLogin"
:disabled="isLoading"
class="hero-info-button w-full flex items-center justify-center gap-2"
class="nostr-login-button w-full flex items-center justify-center gap-2"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
@@ -103,6 +103,16 @@
Sign in with Nostr Extension
</button>
<!-- Divider between Nostr methods -->
<div class="relative my-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-white/10"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-4 bg-transparent text-white/30 text-xs">or</span>
</div>
</div>
<!-- Amber Login (NIP-55 Android Signer) -->
<!-- Phase 1: Open Amber to request public key -->
<button
@@ -442,6 +452,41 @@ declare global {
opacity: 0;
}
/* Nostr Extension Login Button — dark glass style */
.nostr-login-button {
position: relative;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
border-radius: 16px;
background: rgba(0, 0, 0, 0.35);
color: rgba(255, 255, 255, 0.92);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 0.02em;
}
.nostr-login-button:hover:not(:disabled) {
transform: translateY(-2px);
background: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.15);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.nostr-login-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Amber Login Button */
.amber-login-button {
padding: 12px 24px;