Improve zap modal styles

app/components/zap-photo-modal.gjs

@@ -292,65 +292,60 @@ export default class ZapPhotoModal extends Component {
         <h2>Zap Photo</h2>
 
         {{! Lightning address status }}
-        {{#if this.lnurlLoading}}
-          <p class="meta-info">Loading lightning address...</p>
-        {{else if this.lightningAddress}}
-          <div class="lightning-address">
-            <span class="lightning-badge">Lightning</span>
-            <span
-              class="lightning-address-text"
-            >{{this.lightningAddress}}</span>
-          </div>
-        {{/if}}
-        {{#if this.lnurlError}}
-          <div class="alert alert-error">{{this.lnurlError}}</div>
-        {{/if}}
+        <section class="status">
+          {{#if this.lnurlLoading}}
+            <p class="meta-info">Loading lightning address...</p>
+          {{else if this.lightningAddress}}
+            <div class="lightning-address">
+              <span class="lightning-badge">Lightning</span>
+              <span
+                class="lightning-address-text"
+              >{{this.lightningAddress}}</span>
+            </div>
+          {{/if}}
+          {{#if this.lnurlError}}
+            <div class="alert alert-error">{{this.lnurlError}}</div>
+          {{/if}}
+        </section>
 
         {{! Step: Select Amount }}
         {{#if (eq this.step "select-amount")}}
-          <div class="amount-display">
-            <span
-              class="amount-value zap-amount"
-            >{{this.formattedAmount}}</span>
-            <span class="amount-unit">sats</span>
-          </div>
-
-          <input
-            type="range"
-            class="zap-slider"
-            min="0"
-            max={{this.sliderSteps}}
-            value={{this.sliderPosition}}
-            aria-label="Zap amount in sats"
-            {{on "input" this.updateSlider}}
-          />
-
-          <div class="slider-ticks">
-            {{#each this.sliderTicks as |label|}}
-              <span>{{label}}</span>
-            {{/each}}
-          </div>
-
-          {{#if this.lnurlEndpoint}}
-            <div class="min-max">
-              Min:
-              {{this.minSats}}
-              sats · Max:
-              {{this.maxSats}}
-              sats
+          <section class="slider">
+            <div class="amount-display">
+              <span
+                class="amount-value zap-amount"
+              >{{this.formattedAmount}}</span>
+              <span class="amount-unit">sats</span>
             </div>
-          {{/if}}
+
+            <input
+              type="range"
+              class="zap-slider"
+              min="0"
+              max={{this.sliderSteps}}
+              value={{this.sliderPosition}}
+              aria-label="Zap amount in sats"
+              {{on "input" this.updateSlider}}
+            />
+
+            <div class="slider-ticks">
+              {{#each this.sliderTicks as |label|}}
+                <span>{{label}}</span>
+              {{/each}}
+            </div>
+
+          </section>
 
           <div class="form-group">
             <label>Message (optional)</label>
-            <textarea
+            <input
+              type="text"
               class="form-control"
-              rows="2"
               placeholder="Say something nice..."
               aria-label="Zap message"
               value={{this.message}}
               {{on "input" this.updateMessage}}
-            ></textarea>
+            />
           </div>
 
           <div class="edit-actions">
@@ -393,26 +388,26 @@ export default class ZapPhotoModal extends Component {
             <canvas {{qrCode this.invoice}}></canvas>
           </div>
 
-          <a href={{this.lightningUri}} class="btn btn-outline btn-full">
-            Open in Lightning wallet
-          </a>
-
           {{#if this.hasWebLN}}
             <button
               type="button"
               class="btn btn-primary btn-full webln-pay-btn"
               {{on "click" this.performWebLNPay}}
             >
-              Pay with WebLN
+              Open in Lightning wallet
             </button>
+          {{else}}
+            <a href={{this.lightningUri}} class="btn btn-primary btn-full">
+              Open in Lightning wallet
+            </a>
           {{/if}}
 
           <button
             type="button"
-            class="btn-text copy-invoice-btn"
+            class="btn btn-outline btn-full copy-invoice-btn"
             {{on "click" this.copyInvoice}}
           >
-            Copy invoice
+            Copy payment request
           </button>
 
           {{#if this.paymentNotDetected}}
@@ -421,16 +416,6 @@ export default class ZapPhotoModal extends Component {
               again, or use a different Lightning wallet.
             </p>
           {{/if}}
-
-          <div class="edit-actions">
-            <button
-              type="button"
-              class="btn btn-outline"
-              {{on "click" this.resetAndClose}}
-            >
-              Cancel
-            </button>
-          </div>
         {{/if}}
 
         {{! Step: Paying with Wallet }}

app/styles/app.css

@@ -2435,10 +2435,23 @@ button.create-place {
 
 /* Zap Photo Modal — scoped, nested styles */
 .zap-photo-modal {
-  text-align: center;
+  text-align: left;
 
   & h2 {
     margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  & section.status {
+    padding-bottom: 0.75rem;
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  & section.slider {
+    text-align: center;
+    margin-bottom: 1.5rem;
   }
 
   & .amount-display {
@@ -2446,6 +2459,7 @@ button.create-place {
     align-items: baseline;
     justify-content: center;
     gap: 0.4rem;
+    margin-bottom: 0.75rem;
   }
 
   & .amount-value {
@@ -2469,22 +2483,19 @@ button.create-place {
   & .slider-ticks {
     display: flex;
     justify-content: space-between;
-    font-size: 0.7rem;
+    font-size: 0.85rem;
     color: var(--body-text-color);
     opacity: 0.5;
     padding: 0 0.25rem;
   }
 
-  & .min-max {
-    font-size: 0.75rem;
-    color: var(--body-text-color);
-    opacity: 0.7;
+  & .form-group {
+    margin-bottom: 1.5rem;
   }
 
   & .lightning-address {
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 0.5rem;
   }
 
@@ -2501,24 +2512,47 @@ button.create-place {
 
   & .lightning-address-text {
     font-family: monospace;
-    font-size: 0.8rem;
+    font-size: 0.9rem;
     color: var(--body-text-color);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  & .zap-pay-prompt {
+    text-align: center;
+  }
+
+  & .qr-code-container {
+    margin-bottom: 1.5rem;
+  }
+
+  & .btn-full + .btn-full {
+    margin-top: 0.75rem;
+  }
+
+  & .alert-error {
+    font-size: 0.95rem;
+  }
+
+  & .meta-info {
+    font-size: 0.95rem;
+  }
+
   & .centered {
     display: flex;
     flex-direction: column;
     align-items: center;
+    text-align: center;
     gap: 1rem;
+    padding-top: 1.5rem;
   }
 
   & .success {
     display: flex;
     flex-direction: column;
     align-items: center;
+    text-align: center;
     gap: 0.5rem;
   }
 
@@ -2533,6 +2567,7 @@ button.create-place {
 
   & .success p {
     margin: 0;
+    margin-bottom: 1.5rem;
     font-size: 0.9rem;
     color: var(--body-text-color);
   }

tests/integration/components/zap-photo-modal-test.gjs

@@ -135,7 +135,7 @@ module('Integration | Component | zap-photo-modal', function (hooks) {
       </template>
     );
 
-    await fillIn('.form-group textarea', 'Great photo!');
+    await fillIn('.form-group input', 'Great photo!');
 
     await click('.edit-actions .btn-primary');