diff --git a/app/components/zap-photo-modal.gjs b/app/components/zap-photo-modal.gjs
index 845739f..05c03f6 100644
--- a/app/components/zap-photo-modal.gjs
+++ b/app/components/zap-photo-modal.gjs
@@ -292,65 +292,60 @@ export default class ZapPhotoModal extends Component {
Loading lightning address...
- {{else if this.lightningAddress}}
-
- Min:
- {{this.minSats}}
- sats · Max:
- {{this.maxSats}}
- sats
+
Message (optional)
-
+ />
@@ -393,26 +388,26 @@ export default class ZapPhotoModal extends Component {
-
- Open in Lightning wallet
-
-
{{#if this.hasWebLN}}
- Pay with WebLN
+ Open in Lightning wallet
+ {{else}}
+
+ Open in Lightning wallet
+
{{/if}}
- Copy invoice
+ Copy payment request
{{#if this.paymentNotDetected}}
@@ -421,16 +416,6 @@ export default class ZapPhotoModal extends Component {
again, or use a different Lightning wallet.
{{/if}}
-
-
-
- Cancel
-
-
{{/if}}
{{! Step: Paying with Wallet }}
diff --git a/app/styles/app.css b/app/styles/app.css
index 6fe69d5..e2a6723 100644
--- a/app/styles/app.css
+++ b/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);
}
diff --git a/tests/integration/components/zap-photo-modal-test.gjs b/tests/integration/components/zap-photo-modal-test.gjs
index f08a13e..13cb8a7 100644
--- a/tests/integration/components/zap-photo-modal-test.gjs
+++ b/tests/integration/components/zap-photo-modal-test.gjs
@@ -135,7 +135,7 @@ module('Integration | Component | zap-photo-modal', function (hooks) {
);
- await fillIn('.form-group textarea', 'Great photo!');
+ await fillIn('.form-group input', 'Great photo!');
await click('.edit-actions .btn-primary');