Add mps-button-red CSS class and use it for crypto page buttons

- Add mps-button-red class with #bc2131 color and 0.8 opacity
- Replace inline button styles with CSS classes on crypto checkout
- Use mps-button-green for copy/wallet buttons
- Use mps-button-red for cancel button
- Fix TypeError by converting Decimal fee_buffer to float
- Update JavaScript invoice link to use mps-button-blue class
This commit is contained in:
Russell Ballestrini 2025-09-24 18:23:01 -04:00
parent 91042ff4ba
commit cce99a8fc2
3 changed files with 11 additions and 6 deletions

View file

@ -292,6 +292,11 @@ a.mps-button-green,
button.mps-button-green {
background-color: #a3c765;
}
a.mps-button-red,
button.mps-button-red {
background-color: #bc2131;
opacity: 0.8;
}
a.product-edit-button {
background-color: #98b6fa;

View file

@ -19,11 +19,11 @@
<pre id="crypto-address" style="white-space:pre-wrap;word-wrap:break-word;">{{ address }}</pre>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0;">
<button class="mps-button" id="copy-amt" style="background:#4c4; grid-row: 1;">Copy Amount</button>
<button class="mps-button" id="copy-addr" style="background:#4c4; grid-row: 1;">Copy Address</button>
<a class="mps-button" href="{{ wallet_uri_scheme }}:{{ address }}?{% if coin_symbol == 'XMR' %}tx_amount{% else %}amount{% endif %}={{ amount_fmt }}" target="_blank" rel="noopener" style="background:#4c4; grid-row: 1;">Open in Wallet</a>
<button class="mps-button mps-button-green" id="copy-amt" style="grid-row: 1;">Copy Amount</button>
<button class="mps-button mps-button-green" id="copy-addr" style="grid-row: 1;">Copy Address</button>
<a class="mps-button mps-button-green" href="{{ wallet_uri_scheme }}:{{ address }}?{% if coin_symbol == 'XMR' %}tx_amount{% else %}amount{% endif %}={{ amount_fmt }}" target="_blank" rel="noopener" style="grid-row: 1;">Open in Wallet</a>
{% if status == 'pending' %}
<button id="cancel-btn" onclick="cancelQuote('{{ payment_id }}')" class="mps-button" style="background:#dc3545; border:none; cursor:pointer; grid-column: 1 / -1; grid-row: 2;">Cancel Quote</button>
<button id="cancel-btn" onclick="cancelQuote('{{ payment_id }}')" class="mps-button mps-button-red" style="grid-column: 1 / -1; grid-row: 2;">Cancel Quote</button>
{% endif %}
</div>
@ -200,7 +200,7 @@
const invoiceLink = document.createElement('a');
invoiceLink.href = invoiceUrl || '/u/purchases';
invoiceLink.className = 'mps-button';
invoiceLink.style.background = '#17a2b8';
invoiceLink.classList.add('mps-button-blue');
invoiceLink.style.textAlign = 'center';
invoiceLink.style.display = 'block';
invoiceLink.textContent = invoiceUrl ? 'View Invoice' : 'View Purchases';

View file

@ -584,7 +584,7 @@ def crypto_quote(request):
* 2
)
amount_crypto_base = amount_crypto_with_fee - fee_buffer
amount_crypto_base = amount_crypto_with_fee - float(fee_buffer)
return {
"cart": None, # Quote page doesn't need cart context