From 99eca0b4565f86c22ec2e35533d35de384ee9a41 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Sat, 4 Oct 2025 17:47:16 -0400
Subject: [PATCH] Improve shop settings dark mode styling and UX

- Replace theme dropdown with radio buttons for consistency
- Add immediate theme preview when changing shop default theme
- Add Stripe status indicators (enabled/disabled) matching crypto currencies
- Disable Stripe inputs when Stripe payments are disabled
- Improve dark mode text readability for note-text, status-message, and error-indicator
- Add comprehensive dark mode styling for all flash message types
- Remove horizontal rule dividers in crypto settings for cleaner layout
---
 make_post_sell/static/css/common.css      | 40 ++++++++++++++++++++
 make_post_sell/templates/shop_settings.j2 | 45 ++++++++++++++++++-----
 2 files changed, 75 insertions(+), 10 deletions(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 179533b..1160f7e 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1263,6 +1263,46 @@ div.message-ribbon {
     color: #666;
 }
 
+[data-theme="dark"] .note-text {
+    color: #c0c0c0;
+}
+
+[data-theme="dark"] .status-message {
+    color: #c0c0c0;
+}
+
+[data-theme="dark"] .error-indicator {
+    color: #ff6b6b;
+    font-weight: bold;
+}
+
+/* Flash message styling for dark mode */
+[data-theme="dark"] .alert-danger,
+[data-theme="dark"] .alert-error {
+    color: #ff6b6b;
+    background-color: #2d1f20;
+    border-color: #ff6b6b;
+}
+
+[data-theme="dark"] .alert-warning {
+    color: #ffd93d;
+    background-color: #2d2a1f;
+    border-color: #ffd93d;
+}
+
+[data-theme="dark"] .alert-info,
+[data-theme="dark"] .alert-notice {
+    color: var(--blue-color);
+    background-color: #1f252d;
+    border-color: var(--blue-color);
+}
+
+[data-theme="dark"] .alert-success {
+    color: var(--green-color);
+    background-color: #1f2d1f;
+    border-color: var(--green-color);
+}
+
 .inline-label {
     display: inline;
 }
diff --git a/make_post_sell/templates/shop_settings.j2 b/make_post_sell/templates/shop_settings.j2
index a4f84c2..2e391b6 100644
--- a/make_post_sell/templates/shop_settings.j2
+++ b/make_post_sell/templates/shop_settings.j2
@@ -144,9 +144,10 @@
           name        = "stripe_public_api_key"
           type        = "text"
           id          = "stripe_public_api_key"
-          class       = "mps-stripe-public-api-key"
+          class       = "mps-stripe-public-api-key{% if not request.shop.stripe_enabled %} disabled-input{% endif %}"
           value       = "{% if stripe_public_api_key %}{{ stripe_public_api_key }}{% endif %}"
           placeholder = "Stripe Public API Key (pk)"
+          {% if not request.shop.stripe_enabled %}readonly{% endif %}
           />
 
       <br />
@@ -157,19 +158,30 @@
           name        = "stripe_secret_api_key"
           type        = "text"
           id          = "stripe_secret_api_key"
-          class       = "mps-stripe-secret-api-key"
+          class       = "mps-stripe-secret-api-key{% if not request.shop.stripe_enabled %} disabled-input{% endif %}"
           value       = "{% if stripe_secret_api_key %}{{ stripe_secret_api_key }}{% endif %}"
           placeholder = "Stripe Secret API Key (sk)"
+          {% if not request.shop.stripe_enabled %}readonly{% endif %}
           />
 
       <br />
       <br />
 
       {% if request.shop.stripe_enabled %}
+        <small class="success-indicator">✓ Stripe configured and ready to accept credit card payments</small>
+        <br />
+        <br />
         <input type="submit" name="submit" class="mps-submit" value="Save Stripe Settings" />
         <input type="submit" name="disable_stripe" class="payment-toggle-button disable" value="Disable Stripe" />
       {% else %}
+        <small class="error-indicator">✗ Stripe payments are currently disabled</small>
+        <br />
+        <br />
+        <small class="status-message">Your API keys are preserved but customers cannot select credit card as a payment method.</small>
+        <br />
+        <br />
         <input type="submit" name="submit" class="payment-toggle-button enable" value="Re-enable Stripe" />
+        <small class="status-message">Re-enable Stripe payments to update your API keys</small>
       {% endif %}
 
       </div>
@@ -260,7 +272,7 @@
 
     </form>
     
-    <hr />
+    <br />
     
     <input type="checkbox" id="show-crypto-wallets" onchange="toggleCryptoWallets()">
     <label for="show-crypto-wallets" class="inline-label">Show wallet configuration forms</label>
@@ -335,8 +347,6 @@
       <br />
 
     </form>
-    
-    <hr />
 
     <h4>Dogecoin (DOGE) Configuration 🐕</h4>
 
@@ -504,11 +514,14 @@
       <br />
       <br />
 
-      <label for="default_theme_input">Default Theme for Visitors</label>
-      <select name="default_theme" id="default_theme_input" class="full-width-input">
-        <option value="1" {% if default_theme == 1 %}selected{% endif %}>Light Mode</option>
-        <option value="0" {% if default_theme == 0 %}selected{% endif %}>Dark Mode</option>
-      </select>
+      <label>Default Theme for Visitors</label>
+      <br />
+      <input type="radio" name="default_theme" id="shop_light_mode" value="1" {% if default_theme == 1 %}checked{% endif %} />
+      <label for="shop_light_mode" class="inline-label">Light Mode</label>
+      <br />
+      <input type="radio" name="default_theme" id="shop_dark_mode" value="0" {% if default_theme == 0 %}checked{% endif %} />
+      <label for="shop_dark_mode" class="inline-label">Dark Mode</label>
+      <br />
       <small class="note-text">Choose the default theme that new visitors see. Users can override this in their profile settings.</small>
 
       <br />
@@ -627,6 +640,18 @@ document.addEventListener('DOMContentLoaded', function() {
         stripeToggle.checked = stripeState;
         stripeControls.style.display = stripeState ? 'block' : 'none';
     }
+    
+    // Handle shop theme radio buttons for immediate preview
+    const shopThemeRadios = document.querySelectorAll('input[name="default_theme"]');
+    shopThemeRadios.forEach(function(radio) {
+        radio.addEventListener('change', function() {
+            // Apply new theme immediately for preview
+            const newTheme = this.value === '0' ? 'dark' : 'light';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            // Update shop owner's personal preference so they see the same theme
+            localStorage.setItem('theme-preference', newTheme);
+        });
+    });
 });
 
 function toggleCryptoWallets() {