From 10e0e83adfb012eb61dac293abd9f8b7ab043eca Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Sat, 4 Oct 2025 13:20:45 -0400
Subject: [PATCH] Replace inline styles with CSS classes across template files

- Add comprehensive CSS classes to common.css for status messages, layouts, and styling
- Remove all inline styles from shop_settings.j2 (16 instances)
- Remove all inline styles from crypto_checkout.j2 (25 instances)
- Remove all inline styles from cart_checkout.j2 (18 instances)
- Remove all inline styles from cart.j2 (16 instances)

New CSS classes added:
- Status indicators: .status-message, .success-indicator, .error-indicator
- Layout helpers: .inline-label, .full-width-input, .disabled-input
- Crypto checkout: .crypto-logo, .payment-grid, .payment-buttons, .status-box
- Cart styles: .cart-float-right, .cart-shop-name, .cart-total-amount
- Notice boxes: .success-notice, .warning-notice, .warning-banner

This improves maintainability, consistency, and enables better theming support.
All conditional styling preserved using dynamic CSS class application.
---
 make_post_sell/static/css/common.css        | 249 ++++++++++++++++++++
 make_post_sell/templates/cart.j2            |  32 +--
 make_post_sell/templates/cart_checkout.j2   |  36 +--
 make_post_sell/templates/crypto_checkout.j2 |  36 +--
 make_post_sell/templates/shop_settings.j2   |  33 ++-
 5 files changed, 317 insertions(+), 69 deletions(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index e337212..0201cdf 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1069,3 +1069,252 @@ div.message-ribbon {
     display: block;
 }
 /* hidden control area */
+
+/* Status and message styling */
+.status-message {
+    color: #666;
+}
+
+.success-indicator {
+    color: green;
+}
+
+.error-indicator {
+    color: #d44;
+}
+
+.note-text {
+    color: #666;
+}
+
+.inline-label {
+    display: inline;
+}
+
+.favicon-preview {
+    width: 32px;
+}
+
+/* Input field styling */
+.full-width-input {
+    width: 100%;
+}
+
+.disabled-input {
+    opacity: 0.5;
+    background-color: #f5f5f5;
+}
+
+/* Crypto checkout styles */
+.crypto-logo {
+    width: 150px;
+    height: 150px;
+    margin-right: 15px;
+    vertical-align: middle;
+}
+
+.payment-grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 20px;
+    margin: 16px 0;
+    align-items: start;
+}
+
+.crypto-address {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.payment-buttons {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 8px;
+    margin: 8px 0;
+}
+
+.payment-button-row-1 {
+    grid-row: 1;
+}
+
+.payment-button-cancel {
+    grid-column: 1 / -1;
+    grid-row: 2;
+}
+
+.status-box {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    padding: 15px;
+    margin: 10px 0;
+}
+
+.confirmations-hidden {
+    display: none;
+}
+
+.qr-fallback {
+    width: 150px;
+    height: 150px;
+    background: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #666;
+    border: 1px solid #ddd;
+}
+
+.success-notice {
+    background: #d1fae5;
+    border: 1px solid #10b981;
+    border-radius: 4px;
+    padding: 15px;
+    margin: 20px 0;
+}
+
+.warning-notice {
+    background: #fef3c7;
+    border: 1px solid #f59e0b;
+    border-radius: 4px;
+    padding: 15px;
+    margin: 20px 0;
+}
+
+.monospace-address {
+    font-family: monospace;
+    background: #f0f0f0;
+    padding: 8px;
+    border-radius: 3px;
+    word-break: break-all;
+}
+
+.notice-list {
+    margin: 10px 0;
+}
+
+.notice-footer {
+    margin-top: 10px;
+}
+
+/* Cart checkout styles */
+.disabled-crypto-button {
+    background: #aaa !important;
+    cursor: not-allowed;
+}
+
+.crypto-button-icon {
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.crypto-settings-link {
+    color: #f59e0b;
+    text-decoration: none;
+    display: block;
+    margin-top: 10px;
+    font-size: 14px;
+}
+
+.warning-banner {
+    background: #fff3cd;
+    border: 1px solid #ffeaa7;
+    padding: 10px;
+    border-radius: 5px;
+    color: #856404;
+}
+
+.warning-banner-alt {
+    background: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+    padding: 15px;
+    margin: 20px 0;
+}
+
+.warning-banner p {
+    margin: 0;
+    font-size: 14px;
+}
+
+.warning-banner h3 {
+    margin-top: 0;
+}
+
+.warning-banner-content {
+    margin-bottom: 15px;
+}
+
+.pending-quote-item {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    padding: 10px;
+    margin: 8px 0;
+}
+
+.pending-quote-grid {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: start;
+}
+
+.pending-quote-status {
+    color: #666;
+    margin-left: 10px;
+}
+
+.view-quote-button {
+    background: #17a2b8;
+    font-size: 12px;
+    padding: 5px 10px;
+}
+
+.pending-quote-details {
+    font-size: 12px;
+    color: #666;
+    margin-top: 5px;
+}
+
+/* Cart page styles */
+.cart-float-right {
+    float: right;
+}
+
+.cart-shop-grid-span {
+    grid-column: span 3;
+}
+
+.cart-shop-name {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.cart-inline-form {
+    display: inline;
+}
+
+.cart-update-button {
+    width: 80px;
+}
+
+.cart-total-section {
+    text-align: right;
+}
+
+.cart-total-grid-span {
+    text-align: right;
+    grid-column: span 3;
+}
+
+.cart-total-amount {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.cart-public-link {
+    font-size: 0.8em;
+}
diff --git a/make_post_sell/templates/cart.j2 b/make_post_sell/templates/cart.j2
index 7b2e160..8b6e784 100644
--- a/make_post_sell/templates/cart.j2
+++ b/make_post_sell/templates/cart.j2
@@ -31,7 +31,7 @@
     {{ coupon.human_limit_per_customer }}
     </span>
 
-    <div style="float: right;">
+    <div class="cart-float-right">
     <form method="post" action="/coupon/remove" onsubmit="submit.disabled = true; return true;">
 
       <input
@@ -86,8 +86,8 @@
 
   <section class="cart-left-grid well">
 
-  <div style="grid-column: span 3">
-  <b style="font-size: 1.5em;">{{ shop.name }}</b>
+  <div class="cart-shop-grid-span">
+  <b class="cart-shop-name">{{ shop.name }}</b>
   </div>
 
   {% for product, quantity in product_quantity_tuples %}
@@ -110,22 +110,22 @@
       </span>
       <br/>
 
-      <form action="/cart/{{ cart.uuid_str }}/quantity" method="POST" onsubmit="submit.disabled = true; return true;" style="display: inline;">
+      <form action="/cart/{{ cart.uuid_str }}/quantity" method="POST" onsubmit="submit.disabled = true; return true;" class="cart-inline-form">
       {% include "snippets/csrf.j2" %}
       <input type="hidden" name="product_id" value="{{ product.uuid_str }}">
       quantity: <input type="text" name="quantity" class="mps-quantity" value="{{ "{:,}".format(product_quantity) }}">
-      <input type="submit" id="submit" value="update" role="button" style="width: 80px;"/>
+      <input type="submit" id="submit" value="update" role="button" class="cart-update-button"/>
       </form>
       <br/>
 
-      <form method="POST" action="{{ request.route_url('cart_remove_product', cart_id=cart.uuid_str) }}" style="display:inline;">
+      <form method="POST" action="{{ request.route_url('cart_remove_product', cart_id=cart.uuid_str) }}" class="cart-inline-form">
       {% include "snippets/csrf.j2" %}
       <input type="hidden" name="product_id" value="{{ product.uuid_str }}">
       <button type="submit" class="cart-remove-link">remove</button>
 </form>
     </div>
 
-    <div style="text-align: right;">
+    <div class="cart-total-section">
       <span class="opacity-60">{{ "{:,}".format(product_quantity) }} x ${{ "{:,.2f}".format(product.price) }}</span>
       <br/>
       <b>${{ "{:,.2f}".format(line_total) }}</b>
@@ -140,23 +140,23 @@
     <form action="{{ request.route_url('cart_handling_option', cart_id=cart.uuid_str) }}" method="POST">
       {% if request.shop_location.local_pickup %}
       <input type="radio" id="local_pickup" name="handling_option" value="local_pickup" {% if cart.handling_option == "local_pickup" %}checked{% endif %} required>
-      <label for="local_pickup" style="display: inline;">Local Pickup (Free)</label><br>
+      <label for="local_pickup" class="inline-label">Local Pickup (Free)</label><br>
       {% endif %}
       {% if request.shop_location.local_delivery %}
       <input type="radio" id="local_delivery" name="handling_option" value="local_delivery" {% if cart.handling_option == "local_delivery" %}checked{% endif %} required>
-      <label for="local_delivery" style="display: inline;">
+      <label for="local_delivery" class="inline-label">
         Local Delivery (${{ '{:,.2f}'.format(request.shop_location.local_delivery_rate or 0) }})
       </label><br>
       {% endif %}
       {% if request.shop_location.local_shipping %}
       <input type="radio" id="local_shipping" name="handling_option" value="local_shipping" {% if cart.handling_option == "local_shipping" %}checked{% endif %} required>
-      <label for="local_shipping" style="display: inline;">
+      <label for="local_shipping" class="inline-label">
         Local Shipping (${{ '{:,.2f}'.format(request.shop_location.local_shipping_rate or 0) }})
       </label><br>
       {% endif %}
       {% if request.shop_location.international_shipping %}
       <input type="radio" id="international_shipping" name="handling_option" value="international_shipping" {% if cart.handling_option == "international_shipping" %}checked{% endif %} required>
-      <label for="international_shipping" style="display: inline;">
+      <label for="international_shipping" class="inline-label">
         International Shipping (${{ '{:,.2f}'.format(request.shop_location.international_shipping_rate or 0) }})
       </label><br>
       {% endif %}
@@ -164,14 +164,14 @@
     </form>
     {% endif %}
 
-  <div style="text-align: right; grid-column: span 3">
+  <div class="cart-total-grid-span">
 
   {% if cart.is_discounted %}
-  <b style="font-size: 1.5em;"><s>${{ '{:,.2f}'.format(cart.shop_totals[shop.uuid_str]) }}</s></b>
+  <b class="cart-total-amount"><s>${{ '{:,.2f}'.format(cart.shop_totals[shop.uuid_str]) }}</s></b>
   <br/>
-  <b class="discounted" style="font-size: 1.5em;">${{ '{:,.2f}'.format(discounted_shop_totals[shop.uuid_str]) }}</b>
+  <b class="discounted cart-total-amount">${{ '{:,.2f}'.format(discounted_shop_totals[shop.uuid_str]) }}</b>
   {% else %}
-  <b style="font-size: 1.5em;">${{ '{:,.2f}'.format(cart.shop_totals[shop.uuid_str]) }}</b>
+  <b class="cart-total-amount">${{ '{:,.2f}'.format(cart.shop_totals[shop.uuid_str]) }}</b>
   {% endif %}
   </div>
 
@@ -255,7 +255,7 @@
 
     <br/>
     <br/>
-    <span style="font-size: .8em;"><a href="{{ request.current_route_url() }}" target="_blank" ref="nofollow">Link to public cart</a></span>
+    <span class="cart-public-link"><a href="{{ request.current_route_url() }}" target="_blank" ref="nofollow">Link to public cart</a></span>
     <br/>
     <br/>
       {% endif %}
diff --git a/make_post_sell/templates/cart_checkout.j2 b/make_post_sell/templates/cart_checkout.j2
index 39be7ad..f486448 100644
--- a/make_post_sell/templates/cart_checkout.j2
+++ b/make_post_sell/templates/cart_checkout.j2
@@ -61,16 +61,16 @@
   {% if monero_enabled and xmr_processor_enabled and cart.requires_payment and cart.shop_product_dict|length == 1 %}
   <br/>
   {% if pending_crypto_quotes %}
-    <button type="button" class="mps-button" style="background:#aaa; cursor:not-allowed;" disabled title="Complete or cancel your pending crypto payments first"><img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" style="width:32px; height:32px; margin-right:8px; vertical-align:middle;">Monero (XMR) - Complete Pending Payments First</button>
+    <button type="button" class="mps-button disabled-crypto-button" disabled title="Complete or cancel your pending crypto payments first"><img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" class="crypto-button-icon">Monero (XMR) - Complete Pending Payments First</button>
   {% else %}
   <form method="POST" action="{{ request.route_url('crypto_xmr_start') }}">
     {% include "snippets/csrf.j2" %}
     <input type="hidden" name="cart_id" value="{{ cart.id }}" />
-    <button type="submit" class="mps-button mps-button-green"><img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" style="width:32px; height:32px; margin-right:8px; vertical-align:middle;">Yes, Confirm Checkout with Monero (XMR)</button>
+    <button type="submit" class="mps-button mps-button-green"><img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" class="crypto-button-icon">Yes, Confirm Checkout with Monero (XMR)</button>
   </form>
   {% endif %}
   {% if not request.has_xmr_refund_address %}
-  <a href="/u/settings/crypto" style="color:#f59e0b; text-decoration:none; display:block; margin-top:10px; font-size:14px;">
+  <a href="/u/settings/crypto" class="crypto-settings-link">
     ⚠️ Configure an XMR refund address to enable automatic refunds during payment errors.
   </a>
   {% endif %}
@@ -80,16 +80,16 @@
   {% if dogecoin_enabled and doge_processor_enabled and cart.requires_payment and cart.shop_product_dict|length == 1 %}
   <br/>
   {% if pending_crypto_quotes %}
-    <button type="button" class="mps-button" style="background:#aaa; cursor:not-allowed;" disabled title="Complete or cancel your pending crypto payments first"><img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" style="width:32px; height:32px; margin-right:8px; vertical-align:middle;">Dogecoin (DOGE) - Complete Pending Payments First</button>
+    <button type="button" class="mps-button disabled-crypto-button" disabled title="Complete or cancel your pending crypto payments first"><img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" class="crypto-button-icon">Dogecoin (DOGE) - Complete Pending Payments First</button>
   {% else %}
   <form method="POST" action="{{ request.route_url('crypto_doge_start') }}">
     {% include "snippets/csrf.j2" %}
     <input type="hidden" name="cart_id" value="{{ cart.id }}" />
-    <button type="submit" class="mps-button mps-button-green"><img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" style="width:32px; height:32px; margin-right:8px; vertical-align:middle;">Yes, Confirm Checkout with Dogecoin (DOGE)</button>
+    <button type="submit" class="mps-button mps-button-green"><img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" class="crypto-button-icon">Yes, Confirm Checkout with Dogecoin (DOGE)</button>
   </form>
   {% endif %}
   {% if not request.has_doge_refund_address %}
-  <a href="/u/settings/crypto" style="color:#f59e0b; text-decoration:none; display:block; margin-top:10px; font-size:14px;">
+  <a href="/u/settings/crypto" class="crypto-settings-link">
     ⚠️ Configure a DOGE refund address to enable automatic refunds during payment errors.
   </a>
   {% endif %}
@@ -98,8 +98,8 @@
   {# Show sync status messages for enabled but not synced crypto methods #}
   {% if monero_enabled and not monero_synced and cart.requires_payment and cart.shop_product_dict|length == 1 %}
   <br/>
-  <div style="background:#fff3cd; border:1px solid #ffeaa7; padding:10px; border-radius:5px; color:#856404;">
-    <p style="margin:0; font-size:14px;">
+  <div class="warning-banner">
+    <p>
       ⏳ <strong>Monero (XMR) payments temporarily unavailable</strong><br/>
       The Monero wallet is still synchronizing with the blockchain. Please try again later.
     </p>
@@ -108,8 +108,8 @@
 
   {% if dogecoin_enabled and not dogecoin_synced and cart.requires_payment and cart.shop_product_dict|length == 1 %}
   <br/>
-  <div style="background:#fff3cd; border:1px solid #ffeaa7; padding:10px; border-radius:5px; color:#856404;">
-    <p style="margin:0; font-size:14px;">
+  <div class="warning-banner">
+    <p>
       ⏳ <strong>Dogecoin (DOGE) payments temporarily unavailable</strong><br/>
       The Dogecoin node is still synchronizing with the blockchain. Please try again later.
     </p>
@@ -123,15 +123,15 @@
 
   {# Show pending crypto quotes if user has any #}
   {% if pending_crypto_quotes %}
-  <div style="background:#fff3cd; border:1px solid #ffc107; border-radius:4px; padding:15px; margin:20px 0;">
-    <h3 style="margin-top:0;">📋 {{ pending_crypto_quotes|length }} Pending Crypto Quote{{ 's' if pending_crypto_quotes|length != 1 else '' }}</h3>
-    <p style="margin-bottom:15px;">You have {{ pending_crypto_quotes|length }} pending crypto payment{{ 's' if pending_crypto_quotes|length != 1 else '' }}:</p>
+  <div class="warning-banner-alt">
+    <h3>📋 {{ pending_crypto_quotes|length }} Pending Crypto Quote{{ 's' if pending_crypto_quotes|length != 1 else '' }}</h3>
+    <p class="warning-banner-content">You have {{ pending_crypto_quotes|length }} pending crypto payment{{ 's' if pending_crypto_quotes|length != 1 else '' }}:</p>
     {% for quote in pending_crypto_quotes %}
-    <div style="background:#f8f9fa; border:1px solid #dee2e6; border-radius:3px; padding:10px; margin:8px 0;">
-      <div style="display:grid; grid-template-columns: 1fr auto; align-items:start;">
+    <div class="pending-quote-item">
+      <div class="pending-quote-grid">
         <div>
           <strong>{{ quote.coin_type }}</strong>
-          <span style="color:#666; margin-left:10px;">
+          <span class="pending-quote-status">
             {{ quote.status.title() }}
             {% if quote.current_confirmations > 0 %}
             ({{ quote.confirmation_status }})
@@ -139,10 +139,10 @@
           </span>
         </div>
         <div>
-          <a href="{{ request.route_url('crypto_quote', payment_id=quote.id) }}" class="mps-button" style="background:#17a2b8; font-size:12px; padding:5px 10px;">View Quote</a>
+          <a href="{{ request.route_url('crypto_quote', payment_id=quote.id) }}" class="mps-button view-quote-button">View Quote</a>
         </div>
       </div>
-      <div style="font-size:12px; color:#666; margin-top:5px;">
+      <div class="pending-quote-details">
         Amount: {{ '%.8f' % (quote.expected_amount / (1000000000000 if quote.coin_type == 'XMR' else 100000000)) }} {{ quote.coin_type }}
       </div>
     </div>
diff --git a/make_post_sell/templates/crypto_checkout.j2 b/make_post_sell/templates/crypto_checkout.j2
index bd6736f..00d6282 100644
--- a/make_post_sell/templates/crypto_checkout.j2
+++ b/make_post_sell/templates/crypto_checkout.j2
@@ -5,9 +5,9 @@
 <section class="one-column">
   <h2>
     {% if coin_symbol == 'XMR' %}
-      <img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" style="width:150px; height:150px; margin-right:15px; vertical-align:middle;">
+      <img src="{{ request.static_url('make_post_sell:static/monero-symbol-480.png') }}" class="crypto-logo">
     {% elif coin_symbol == 'DOGE' %}
-      <img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" style="width:150px; height:150px; margin-right:15px; vertical-align:middle;">
+      <img src="{{ request.static_url('make_post_sell:static/dogecoin-logo.png') }}" class="crypto-logo">
     {% endif %}
     {{ coin_name }} ({{ coin_symbol }})
   </h2>
@@ -20,13 +20,13 @@
     {% endif %}
     
     {% if status == 'pending' %}
-    <div style="display: grid; grid-template-columns: auto 1fr; gap: 20px; margin: 16px 0; align-items: start;">
+    <div class="payment-grid">
       <div>
         <div id="payment-qr"></div>
       </div>
       <div>
         <p>Send exactly <b id="crypto-amount">{{ amount_fmt }}</b> {{ coin_symbol }} to this address:</p>
-        <pre id="crypto-address" style="white-space:pre-wrap;word-wrap:break-word;">{{ address }}</pre>
+        <pre id="crypto-address" class="crypto-address">{{ address }}</pre>
         <p>
           {% if expires_at %}
             Expires in: <span id="countdown" data-expires="{{ expires_at }}">--:--</span>
@@ -35,20 +35,20 @@
       </div>
     </div>
 
-    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0;">
-      <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>
-      <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>
+    <div class="payment-buttons">
+      <button class="mps-button mps-button-green payment-button-row-1" id="copy-amt">Copy Amount</button>
+      <button class="mps-button mps-button-green payment-button-row-1" id="copy-addr">Copy Address</button>
+      <a class="mps-button mps-button-green payment-button-row-1" href="{{ wallet_uri_scheme }}:{{ address }}?{% if coin_symbol == 'XMR' %}tx_amount{% else %}amount{% endif %}={{ amount_fmt }}" target="_blank" rel="noopener">Open in Wallet</a>
+      <button id="cancel-btn" onclick="cancelQuote('{{ payment_id }}')" class="mps-button mps-button-red payment-button-cancel">Cancel Quote</button>
     </div>
     {% else %}
     {% endif %}
     
     
-    <div style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; margin: 10px 0;">
+    <div class="status-box">
       <p><strong>Cart Total:</strong> ${{ '%.2f' % usd_total }}</p>
       <p><strong>Status:</strong> <span id="status">{{ status }}</span></p>
-      <p id="confirmations" {% if status == 'pending' or status == 'expired' %}style="display:none;"{% endif %}>
+      <p id="confirmations"{% if status == 'pending' or status == 'expired' %} class="confirmations-hidden"{% endif %}>
         <strong>Confirmations:</strong> <span id="current-confirmations">{{ current_confirmations or 0 }}</span> / <span id="required-confirmations">{{ confirmations_required or 0 }}</span>
       </p>
       <p><strong>Conversion Rate:</strong> ${{ '%.2f' % usd_per_crypto }} USD per {{ coin_symbol }}</p>
@@ -101,7 +101,7 @@
             });
           } catch (error) {
             console.error('QR Code generation failed:', error);
-            qrContainer.innerHTML = '<div style="width:150px;height:150px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666;border:1px solid #ddd;">QR unavailable</div>';
+            qrContainer.innerHTML = '<div class="qr-fallback">QR unavailable</div>';
           }
           {% endif %}
         }
@@ -536,15 +536,15 @@
 
   
   {% if has_refund_address %}
-  <div style="background: #d1fae5; border: 1px solid #10b981; border-radius: 4px; padding: 15px; margin: 20px 0;">
+  <div class="success-notice">
     <p><strong>✓ Refund address configured</strong></p>
-    <p style="font-family: monospace; background: #f0f0f0; padding: 8px; border-radius: 3px; word-break: break-all;">{{ refund_address }}</p>
+    <p class="monospace-address">{{ refund_address }}</p>
     {% if status == 'out-of-stock-refunded' %}
     <p><strong>📦 Out of Stock - Full Refund Issued</strong></p>
     <p>This item became unavailable after your payment. You received a full refund with no restocking fee since this was not your fault.</p>
     {% else %}
     <p>If you make a payment error, you'll receive an automatic refund minus a 9% restocking fee that covers network costs and prevents abuse.</p>
-    <ul style="margin: 10px 0;">
+    <ul class="notice-list">
       <li><strong>Overpayment:</strong> Fulfilled & excess refunded minus fee</li>
       <li><strong>Underpayment:</strong> Refunded minus fee</li>
       <li><strong>Late payment:</strong> Refunded minus fee if sent after the minute expiry</li>
@@ -554,14 +554,14 @@
     {% endif %}
   </div>
   {% else %}
-  <div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px; padding: 15px; margin: 20px 0;">
+  <div class="warning-notice">
     <p><strong>⚠️ No refund address configured</strong></p>
     {% if status == 'no-refund' %}
     <p><strong>📦 Out of Stock - No Refund Possible</strong></p>
     <p>This item became unavailable after your payment, but without a refund address configured, the funds were transferred to the shop's cold storage.</p>
     {% else %}
     <p>Without a refund address, all payment errors result in lost funds:</p>
-    <ul style="margin: 10px 0;">
+    <ul class="notice-list">
       <li><strong>Underpayments:</strong> Cannot be recovered</li>
       <li><strong>Overpayments:</strong> Cannot be recovered</li>
       <li><strong>Late payments:</strong> Cannot be recovered</li>
@@ -569,7 +569,7 @@
       <li><strong>Wrong address:</strong> Cannot be recovered</li>
     </ul>
     {% endif %}
-    <p style="margin-top: 10px;">Consider cancelling and <a href="/u/settings/crypto" class="shop-theme-link-color">configuring a refund address</a> for future purchases.</p>
+    <p class="notice-footer">Consider cancelling and <a href="/u/settings/crypto" class="shop-theme-link-color">configuring a refund address</a> for future purchases.</p>
   </div>
   {% endif %}
 </section>
diff --git a/make_post_sell/templates/shop_settings.j2 b/make_post_sell/templates/shop_settings.j2
index a121e4b..3d0cf63 100644
--- a/make_post_sell/templates/shop_settings.j2
+++ b/make_post_sell/templates/shop_settings.j2
@@ -132,8 +132,8 @@
 
       <br />
 
-      <input type="checkbox" id="toggle-stripe" style="">
-      <label for="toggle-stripe" style="display: inline;" >Show Public & Secret Stripe API Keys</label>
+      <input type="checkbox" id="toggle-stripe">
+      <label for="toggle-stripe" class="inline-label">Show Public & Secret Stripe API Keys</label>
 
       <div class="hidden-control">
 
@@ -173,7 +173,7 @@
         <input type="submit" name="disable_stripe" class="payment-toggle-button disable" value="Disable Stripe" />
       {% else %}
         <input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Stripe" />
-        <small style="color: #666;">Enter your API keys to re-enable Stripe payments</small>
+        <small class="status-message">Enter your API keys to re-enable Stripe payments</small>
       {% endif %}
 
       <br />
@@ -263,12 +263,12 @@
     <hr />
     
     <input type="checkbox" id="show-crypto-wallets" onchange="toggleCryptoWallets()">
-    <label for="show-crypto-wallets" style="display: inline;">Show wallet configuration forms</label>
+    <label for="show-crypto-wallets" class="inline-label">Show wallet configuration forms</label>
     
     <br />
     <br />
     
-    <small style="color: #666;">
+    <small class="note-text">
       Note: We cannot verify you control these addresses. Please double-check they're correct!
       Consider sending a small test amount from another wallet to verify.
       <br />
@@ -278,7 +278,7 @@
     <br />
     <br />
 
-    <div id="crypto-wallets" style="display: block;">
+    <div id="crypto-wallets">
     
     <h4>Monero (XMR) Configuration</h4>
     
@@ -289,10 +289,9 @@
           name        = "sweep_to_address"
           type        = "text"
           id          = "xmr_sweep_to_address_input"
-          class       = "mps-sweep-address"
+          class       = "mps-sweep-address full-width-input{% if xmr_processor and not xmr_processor.enabled %} disabled-input{% endif %}"
           value       = "{% if xmr_processor %}{{ xmr_processor.sweep_to_address }}{% endif %}"
           placeholder = "Monero address to sweep funds to"
-          style       = "width: 100%;{% if xmr_processor and not xmr_processor.enabled %} opacity: 0.5; background-color: #f5f5f5;{% endif %}"
           {% if xmr_processor and not xmr_processor.enabled %}readonly{% endif %}
           {% if xmr_processor and xmr_processor.sweep_to_address %}required{% endif %}
           />
@@ -305,13 +304,13 @@
         {% if xmr_processor.enabled %}
           <br />
           <br />
-          <small style="color: green;">✓ Monero wallet configured and ready to accept payments</small>
+          <small class="success-indicator">✓ Monero wallet configured and ready to accept payments</small>
         {% else %}
           <br />
           <br />
-          <small style="color: #d44;">✗ Monero payments are currently disabled</small>
+          <small class="error-indicator">✗ Monero payments are currently disabled</small>
           <br />
-          <small style="color: #666;">
+          <small class="status-message">
             Your cold wallet address is preserved but customers cannot select Monero as a payment method.
           </small>
         {% endif %}
@@ -326,7 +325,7 @@
           <input type="submit" name="disable" class="payment-toggle-button disable" value="Disable Monero" />
         {% else %}
           <input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Monero" />
-          <small style="color: #666;">Re-enable Monero payments to update your cold wallet address</small>
+          <small class="status-message">Re-enable Monero payments to update your cold wallet address</small>
         {% endif %}
       {% else %}
       <input type="submit" name="submit" class="mps-submit" value="Enable Monero Payments" />
@@ -351,7 +350,7 @@
           {% if doge_processor and doge_processor.sweep_to_address %}required{% endif %}
           value       = "{% if doge_processor %}{{ doge_processor.sweep_to_address }}{% endif %}"
           placeholder = "Dogecoin address to sweep funds to (e.g. DQA4...)"
-          style       = "width: 100%;{% if doge_processor and not doge_processor.enabled %} opacity: 0.5; background-color: #f5f5f5;{% endif %}"
+          class       = "full-width-input{% if doge_processor and not doge_processor.enabled %} disabled-input{% endif %}"
           {% if doge_processor and not doge_processor.enabled %}readonly{% endif %}
       />
       <br/>
@@ -363,11 +362,11 @@
         {% if doge_processor.enabled %}
         <br />
         <br />
-        <small style="color: green;">✓ Dogecoin wallet configured and ready to accept payments</small>
+        <small class="success-indicator">✓ Dogecoin wallet configured and ready to accept payments</small>
         {% else %}
         <br />
         <br />
-        <small style="color: #d44;">✗ Dogecoin payments are currently disabled</small>
+        <small class="error-indicator">✗ Dogecoin payments are currently disabled</small>
         <br />
         <br />
         <small>
@@ -389,7 +388,7 @@
           <input type="submit" name="disable" class="payment-toggle-button disable" value="Disable Dogecoin" />
         {% else %}
           <input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Dogecoin" />
-          <small style="color: #666;">Re-enable Dogecoin payments to update your cold wallet address</small>
+          <small class="status-message">Re-enable Dogecoin payments to update your cold wallet address</small>
         {% endif %}
       {% else %}
       <input type="submit" name="submit" class="mps-submit" value="Enable Dogecoin Payments" />
@@ -431,7 +430,7 @@
     <br />
 
     <label for="logo-banner">favicon.ico</label>
-    <a href="{{ get_endpoints["shop-favicon"] }}?ts={{ request.shop.updated_timestamp }}"><img src="{{ get_endpoints["shop-favicon"] }}?ts={{ request.shop.updated_timestamp }}" style="width: 32px;" /></a>
+    <a href="{{ get_endpoints["shop-favicon"] }}?ts={{ request.shop.updated_timestamp }}"><img src="{{ get_endpoints["shop-favicon"] }}?ts={{ request.shop.updated_timestamp }}" class="favicon-preview" /></a>
     {% set signed_post = signed_posts["shop-favicon"] %}
     <form method="post" action="{{ signed_post["url"] }}" enctype="multipart/form-data" onsubmit="submit.disabled = true; return true;">
         {% for field_name, field_value in signed_post["fields"].items() %}