Improves the unlocked content indicator styling

assets/css/paywall-styles.css

@@ -1,16 +1,19 @@
 .unlocked-indicator {
     margin: 20px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
-}
-.unlocked-indicator hr {
-    border: none;
-    border-top: 1px solid #ccc;
-    margin: 10px auto;
-    width: 80%;
-}
-.unlocked-indicator p {
-    margin: 5px 0;
+    background-color: var(--pb-unlocked-bg, #007bff);
+    color: var(--pb-unlocked-text, #ffffff);
+    padding: 8px;
+    font-family: sans-serif;
     font-weight: bold;
-    font-size: 0.80em;
-    color: #555;
+    font-size: 1.2em;
+    border-radius: 5px;
+    box-sizing: border-box;
 }
+
+.unlocked-indicator p {
+    margin: 0;
+}

assets/js/paybutton-admin.js

@@ -0,0 +1,19 @@
+jQuery(document).ready(function($) {
+    // The existing "Unlocked Content Indicator" checkbox
+    var unlockedCheckbox = $('input[name="paybutton_scroll_to_unlocked"]');
+    // The <tbody> that has our color pickers
+    var colorFields = $('#unlockedIndicatorColors');
+
+    function toggleColorFields() {
+        if (unlockedCheckbox.is(':checked')) {
+            colorFields.show();
+        } else {
+            colorFields.hide();
+        }
+    }
+
+    // On page load
+    toggleColorFields();
+    // On checkbox change
+    unlockedCheckbox.on('change', toggleColorFields);
+});

includes/class-paybutton-admin.php

@@ -88,6 +88,15 @@ public function enqueue_admin_scripts( $hook_suffix ) {
             '1.0'
         );
 
+        // Enqueue paybutton-admin.js on every admin pages
+        wp_enqueue_script(
+            'paybutton-admin-js',
+            PAYBUTTON_PLUGIN_URL . 'assets/js/paybutton-admin.js',
+            array('jquery'),
+            '1.0',
+            true
+        );
+
         if ( $hook_suffix === 'paybutton_page_paybutton-paywall' ) {
             wp_enqueue_style( 'wp-color-picker' );
             wp_enqueue_script( 'wp-color-picker' );
@@ -193,6 +202,8 @@ private function save_settings() {
         $color_secondary = sanitize_hex_color( $_POST['paybutton_color_secondary'] );
         $color_tertiary  = sanitize_hex_color( $_POST['paybutton_color_tertiary'] );
         $hide_comments   = isset( $_POST['paybutton_hide_comments_until_unlocked'] ) ? '1' : '0';
+        $unlocked_indicator_bg_color   = sanitize_hex_color( $_POST['unlocked_indicator_bg_color'] );
+        $unlocked_indicator_text_color = sanitize_hex_color( $_POST['unlocked_indicator_text_color'] );
 
         if ( $unit === 'XEC' && $raw_price < 5.5 ) {
             $raw_price = 5.5;
@@ -217,6 +228,9 @@ private function save_settings() {
 
         // New unlocked content indicator option:
         update_option( 'paybutton_scroll_to_unlocked', isset( $_POST['paybutton_scroll_to_unlocked'] ) ? '1' : '0' );
+        // Default to #007bff for background, #ffffff for text
+        update_option('unlocked_indicator_bg_color', $unlocked_indicator_bg_color ?: '#007bff');
+        update_option('unlocked_indicator_text_color', $unlocked_indicator_text_color ?: '#ffffff');
 
         // Save the blacklist
         if ( isset( $_POST['paybutton_blacklist'] ) ) {

includes/class-paybutton-public.php

@@ -41,6 +41,10 @@ public function enqueue_public_assets() {
         // Enqueue our new paywall styles
         wp_enqueue_style( 'paywall-styles', PAYBUTTON_PLUGIN_URL . 'assets/css/paywall-styles.css', array(), '1.0' );
 
+        // Read the admin-chosen colors for the unlocked content indicator from options
+        $indicator_bg_color   = get_option('unlocked_indicator_bg_color', '#007bff');
+        $indicator_text_color = get_option('unlocked_indicator_text_color', '#ffffff');
+
         // Add inline CSS variables.
         $custom_css = "
             :root {
@@ -50,6 +54,8 @@ public function enqueue_public_assets() {
                 --profile-button-text-color: " . esc_attr( get_option('paybutton_profile_button_text_color', '#000') ) . ";
                 --logout-button-bg-color: " . esc_attr( get_option('paybutton_logout_button_bg_color', '#d9534f') ) . ";
                 --logout-button-text-color: " . esc_attr( get_option('paybutton_logout_button_text_color', '#fff') ) . ";
+                --pb-unlocked-bg: {$indicator_bg_color};
+                --pb-unlocked-text: {$indicator_text_color};
             }
         ";
         wp_add_inline_style( 'paybutton-sticky-header', $custom_css );
@@ -164,9 +170,7 @@ public function paybutton_paywall_shortcode( $atts, $content = null ) {
             $indicator = '';
             if ( get_option('paybutton_scroll_to_unlocked', '0') === '1' ) {
                 $indicator = '<div id="unlocked" class="unlocked-indicator">
-                                  <hr>
                                   <p>Unlocked Content Below</p>
-                                  <hr>
                               </div>';
             }
             return $indicator . do_shortcode( $content );

templates/admin/paywall-settings.php

@@ -75,6 +75,36 @@
                     </label>
                 </td>
             </tr>
+            <tbody id="unlockedIndicatorColors">
+                <tr>
+                    <th scope="row">
+                        <label for="unlocked_indicator_bg_color">Background Color</label>
+                    </th>
+                    <td>
+                        <input type="color" name="unlocked_indicator_bg_color" id="unlocked_indicator_bg_color"
+                            value="<?php echo esc_attr( get_option('unlocked_indicator_bg_color', '#007bff') ); ?>">
+                        <button type="button"
+                            onclick="document.getElementById('unlocked_indicator_bg_color').value = '#007bff';">
+                            Reset
+                        </button>
+                        <p class="description">Controls the background color of the indicator.</p>
+                    </td>
+                </tr>
+                <tr>
+                    <th scope="row">
+                        <label for="unlocked_indicator_text_color">Text Color</label>
+                    </th>
+                    <td>
+                        <input type="color" name="unlocked_indicator_text_color" id="unlocked_indicator_text_color"
+                            value="<?php echo esc_attr( get_option('unlocked_indicator_text_color', '#ffffff') ); ?>">
+                        <button type="button"
+                            onclick="document.getElementById('unlocked_indicator_text_color').value = '#ffffff';">
+                            Reset
+                        </button>
+                        <p class="description">Controls the text color of the indicator.</p>
+                    </td>
+                </tr>
+            </tbody>
             <!-- Sticky Header Settings -->
             <tr>
                 <th colspan="2"><h2>Sticky Header Settings</h2></th>