From 941d8917f3b5c46d3425d3753692cfe3f38b77ef Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Fri, 13 Feb 2026 22:39:34 +0000
Subject: [PATCH] style: dark glass button for Nostr Extension login +
 or-divider
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 docker-compose.yml           |  2 +-
 src/components/AuthModal.vue | 47 +++++++++++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index d775c12..f2e50f3 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -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
diff --git a/src/components/AuthModal.vue b/src/components/AuthModal.vue
index 1b6250d..cbc7aa7 100644
--- a/src/components/AuthModal.vue
+++ b/src/components/AuthModal.vue
@@ -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;