Added alternative colors to change color of background header in home collection on plugin

src/functions/collection-color.css

@@ -5,9 +5,34 @@
     padding: 0;
     width: 40px;
 }
+
+.tainacan-collection--change-color-picker .custom-color {
+    width: 30px;
+    height: 30px;
+}
+
+.tainacan-collection--change-color-picker .custom-color:checked:before {
+    content: none;
+}
+
+.tainacan-collection--change-color-picker .custom-color:checked {
+    border-color: black;
+    border-width: 2px;
+}
+
 .tainacan-collection--change-text-color .control {
     margin-top: 1rem;
 }
+
+.tainacan-collection--change-text-color input[type="radio"]::before {
+    background-color: #000;
+}
+
+.tainacan-collection--change-text-color input[type=radio]:focus {
+    border-color: #b4b9be;
+    box-shadow: none;
+}
+
 .tainacan-collection--change-text-color .color-text[for="white"] {
     background-color: #000;
     color: #fff;

src/functions/collection-color.js

@@ -1,14 +1,23 @@
-document.addEventListener('tainacan-collection-hook-reload', function() {
-    var colorWell;
-    colorWell = document.getElementById("colorpicker");
+jQuery(document).on('tainacan-collection-hook-reload', function(){
+    var colorWell = jQuery('#colorpicker');
+    var alternativeColor = jQuery('.custom-color');
     if(colorWell != null){
-        colorWell.addEventListener('input', function(event){
-            var label = document.getElementsByClassName('color-text');
-            if (label[0] && label[1]) {
-                label[0].style.backgroundColor = event.target.value;
-                label[1].style.backgroundColor = event.target.value;
+        colorWell.on('input', function(event){
+            var label = jQuery('.color-text');
+            if(label){
+                label.css('background-color', event.target.value);
+            }
+        });
+    }
+    if(alternativeColor != null){
+        alternativeColor.change(function(e){
+            var label = jQuery('.color-text');
+            if(alternativeColor.is(':checked')){
+                if(label){
+                    label.css('background-color', e.target.value);
+                }
+                colorWell.val(e.target.value);
             }
         });
-        colorWell.select();
     }
 });

src/functions/collection-color.php

@@ -17,7 +17,7 @@ class TainacanThemeCollectionColor {
     }
 
     function action_tainacan_enqueue_admin_scripts() { 
-        wp_enqueue_script('colorWell', get_template_directory_uri(). '/functions/collection-color.js', '', '', true);
+        wp_enqueue_script('colorWell', get_template_directory_uri(). '/functions/collection-color.js', false, false, true);
         wp_enqueue_style('colorWellStyle', get_template_directory_uri(). '/functions/collection-color.css');
     }
 
@@ -50,11 +50,27 @@ class TainacanThemeCollectionColor {
                 </div>
             </span>
             <div class="control is-clearfix"> 
-                <input 
-                    type="color" 
-                    value="#2c2d2d" 
-                    id="colorpicker"
-                    name="<?php echo $this->background_color; ?>">
+                <p style="padding: 1rem 0; font-weight: 600;"><?php _e('Alternative colors', 'tainacan-theme'); ?></p>
+                <?php
+                    $colors = array(
+                        'default' => '#298596',
+                        'carmine' => '#a55032',
+                        'cherry' => '#af2e48',
+                        'mustard' => '#c58738',
+                        'mintgreen' => '#4ebfa7',
+                        'darkturquoise' => '#288698',
+                        'turquoise' => '#2db4c1',
+                        'lightblue' => '#499dd6',
+                        'purple' => '#4751a3',
+                        'violet' => '#955ba5',
+                    );
+
+                    foreach($colors as $name=>$color){
+                ?>
+                        <input type="radio" value="<?php echo $color; ?>" name="null" class="custom-color <?php echo $name; ?>" style="background-color: <?php echo $color; ?>;">
+                    <?php } ?>
+                <p style="padding-top: 1rem; font-weight: 600;"><?php _e('Picker color', 'tainacan-theme'); ?></p>
+                <input type="color" value="" id="colorpicker" name="<?php echo $this->background_color; ?>">
             </div>
         </div>
 
@@ -80,7 +96,7 @@ class TainacanThemeCollectionColor {
                     type="radio" 
                     value="#fff" 
                     name="<?php echo $this->text_color; ?>"
-                    id="white">
+                    id="white" checked>
                     <label for="white" id="color-white" class="color-text">White</label>
                 <input
                     type="radio"