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 {

Zap Photo

{{! Lightning address status }} - {{#if this.lnurlLoading}} -

Loading lightning address...

- {{else if this.lightningAddress}} -
- Lightning - {{this.lightningAddress}} -
- {{/if}} - {{#if this.lnurlError}} -
{{this.lnurlError}}
- {{/if}} +
+ {{#if this.lnurlLoading}} +

Loading lightning address...

+ {{else if this.lightningAddress}} +
+ Lightning + {{this.lightningAddress}} +
+ {{/if}} + {{#if this.lnurlError}} +
{{this.lnurlError}}
+ {{/if}} +
{{! Step: Select Amount }} {{#if (eq this.step "select-amount")}} -
- {{this.formattedAmount}} - sats -
- - - -
- {{#each this.sliderTicks as |label|}} - {{label}} - {{/each}} -
- - {{#if this.lnurlEndpoint}} -
- Min: - {{this.minSats}} - sats · Max: - {{this.maxSats}} - sats +
+
+ {{this.formattedAmount}} + sats
- {{/if}} + + + +
+ {{#each this.sliderTicks as |label|}} + {{label}} + {{/each}} +
+ +
- + />
@@ -393,26 +388,26 @@ export default class ZapPhotoModal extends Component {
- - Open in Lightning wallet - - {{#if this.hasWebLN}} + {{else}} + + Open in Lightning wallet + {{/if}} {{#if this.paymentNotDetected}} @@ -421,16 +416,6 @@ export default class ZapPhotoModal extends Component { again, or use a different Lightning wallet.

{{/if}} - -
- -
{{/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');