Improve styling and UX by allowing enter

block-core · Dec 28, 2024 · 92c046b · 92c046b
1 parent 189e677
commit 92c046b
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
@@ -18,16 +18,18 @@ import { Router } from '@angular/router';
             Angor Profile is a Nostr profile editor, built specifically to manage the 
             profile information for Angor projects.
           </p>
-          <div class="action-container" style="display: flex; gap: 1rem; align-items: center;">
+          <div class="action-container" style="display: flex; flex-direction: column; gap: 1rem;">
             <input 
               [(ngModel)]="profileId" 
               placeholder="npub..." 
-              style="padding: 0.5rem; border-radius: 4px; border: 1px solid #ccc;"
+              (keyup.enter)="openProfile()"
+              style="padding: 1rem; border-radius: 8px; border: 1px solid #ccc; font-size: 1.1em; width: 100%; max-width: 400px; background: #f8f8f8; transition: all 0.2s ease;"
             >
             <button 
               (click)="openProfile()" 
               class="cta-button"
-              style="white-space: nowrap; border: none;"
+              style="cursor: pointer; white-space: nowrap; border: none; width: fit-content; opacity: {{ isValidNpub() ? '1' : '0.5' }};"
+              [disabled]="!isValidNpub()"
             >
               Open Profile
             </button>
@@ -74,4 +76,8 @@ export class HomeComponent {
       this.router.navigate(['/profile', this.profileId]);
     }
   }
+
+  isValidNpub(): boolean {
+    return this.profileId.toLowerCase().startsWith('npub');
+  }
 }