Update Theme select to use new bootstrap 5 radio button

admin/settings_theme.php

@@ -1,25 +1,26 @@
 <?php
 require_once "includes/inc_all_admin.php";
 
-$theme_colors_array = array (
+// Keep in step with the .theme-<name> blocks in css/itflow_custom.css - a name
+// listed here with no matching block renders as an uncoloured, dead choice.
+$theme_colors_array = array(
     'lightblue',
     'blue',
-    'cyan',
+    'navy',
-    'green',
-    'olive',
-    'teal',
-    'red',
-    'maroon',
-    'pink',
-    'purple',
     'indigo',
+    'purple',
     'fuchsia',
-    'yellow',
+    'pink',
+    'maroon',
+    'red',
     'orange',
     'yellow',
-    'black',
+    'olive',
-    'navy',
+    'green',
-    'gray'
+    'teal',
+    'cyan',
+    'gray',
+    'black'
 );
 
 ?>
@@ -32,8 +33,9 @@ $theme_colors_array = array (
         <form action="post.php" method="post" autocomplete="off">
             <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
 
-            <label>Select a Theme</label>
+            <p class="text-muted">Sets the colour of the top bar, links, buttons and highlights.</p>
-            <div class="row g-2">
+
+            <div class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 g-3">
 
                 <?php
 
@@ -41,17 +43,20 @@ $theme_colors_array = array (
 
                     ?>
 
-                    <div class="col-4 text-center mb-3">
+                    <div class="col">
-                        <div class="mb-3">
+                        <input type="radio" class="btn-check" onchange="this.form.submit()"
-                            <div class="form-check">
+                            id="theme-<?= $theme_color ?>" name="edit_theme_settings"
-                                <input class="form-check-input" type="radio" onchange="this.form.submit()" id="customRadio<?= $theme_color ?>" name="edit_theme_settings" value="<?= $theme_color ?>" <?php if ($config_theme == $theme_color) { echo "checked"; } ?>>
+                            value="<?= $theme_color ?>"
-                                <label for="customRadio<?= $theme_color ?>" class="form-check-label">
+                            <?php if ($config_theme == $theme_color) { echo "checked"; } ?>>
-                                    <i class="fa fa-fw fa-6x fa-circle text-<?= $theme_color ?>"></i>
+                        <label class="itflow-theme-swatch" for="theme-<?= $theme_color ?>">
-                                    <br>
+                            <?php /* the circle paints itself from --itflow-accent, so it can
-                                    <?= $theme_color ?>
+                                     never drift out of step with the stylesheet */ ?>
-                                </label>
+                            <span class="itflow-theme-circle theme-<?= $theme_color ?>">
-                            </div>
+                                <i class="fas fa-circle"></i>
-                        </div>
+                                <i class="fas fa-check itflow-theme-tick"></i>
+                            </span>
+                            <span class="itflow-theme-name"><?= escapeHtml($theme_color) ?></span>
+                        </label>
                     </div>
 
                 <?php } ?>

css/itflow_custom.css

@@ -134,6 +134,7 @@
 .theme-purple { --itflow-accent: #6f42c1; }
 .theme-red { --itflow-accent: #dc3545; }
 .theme-teal { --itflow-accent: #20c997; }
+.theme-yellow { --itflow-accent: #ffc107; }
 
 /* top navbar takes the theme colour */
 .app-header.navbar {
@@ -483,6 +484,7 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
 .bg-purple { background-color: rgba(111,66,193,.9) !important; }
 .bg-red { background-color: rgba(231,76,60,.9) !important; }
 .bg-teal { background-color: rgba(32,201,151,.9) !important; }
+.bg-yellow { background-color: rgba(243,156,18,.9) !important; }
 
 /* --- Flatpickr date-filter preset panel ---------------------------------
    Flatpickr has no preset-ranges feature; js/date_filter.js injects this
@@ -586,6 +588,7 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
 .theme-purple .btn-primary, .theme-purple .btn-outline-primary { --bs-btn-focus-shadow-rgb: 111, 66, 193; }
 .theme-red .btn-primary, .theme-red .btn-outline-primary { --bs-btn-focus-shadow-rgb: 220, 53, 69; }
 .theme-teal .btn-primary, .theme-teal .btn-outline-primary { --bs-btn-focus-shadow-rgb: 32, 201, 151; }
+.theme-yellow .btn-primary, .theme-yellow .btn-outline-primary { --bs-btn-focus-shadow-rgb: 255, 193, 7; }
 
 /* Text colour on a solid primary button. Threshold derived from Bootstrap's
    own palette (white up to L=0.183, black from L=0.486), so only these two
@@ -594,10 +597,13 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
 .theme-orange .btn-outline-primary { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; }
 .theme-teal .btn-primary { --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000; }
 .theme-teal .btn-outline-primary { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; }
+.theme-yellow .btn-primary { --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000; }
+.theme-yellow .btn-outline-primary { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; }
 
 /* Same L>0.335 contrast cut as the primary button. */
 .theme-orange .nav-pills,
-.theme-teal .nav-pills {
+.theme-teal .nav-pills,
+.theme-yellow .nav-pills {
     --bs-nav-pills-link-active-color: #000;
 }
 
@@ -622,3 +628,65 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
 .text-purple { color: #6f42c1 !important; }
 .text-red { color: #dc3545 !important; }
 .text-teal { color: #20c997 !important; }
+.text-yellow { color: #ffc107 !important; }
+
+/* --- Theme picker (admin/settings_theme.php) -----------------------------
+   Keeps the coloured circles - the radio button beside each one is what was
+   in the way, so the input is now a visually hidden .btn-check and the label
+   is the control. Selection reads as a tick in the circle plus a bolder name.
+
+   The circle carries .theme-<name> and paints itself from --itflow-accent, so
+   it always shows the colour that theme will actually apply - add a theme to
+   the stylesheet and its swatch is correct with no extra rule. */
+.itflow-theme-swatch {
+    display: block;
+    padding: .5rem .25rem;
+    text-align: center;
+    cursor: pointer;
+    border-radius: .5rem;
+    transition: background-color .15s ease;
+}
+.itflow-theme-swatch:hover {
+    background-color: var(--bs-secondary-bg);
+}
+.itflow-theme-circle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+.itflow-theme-circle .fa-circle {
+    font-size: 3.5rem;
+    color: var(--itflow-accent, #007bff);
+}
+.itflow-theme-tick {
+    position: absolute;
+    font-size: 1.35rem;
+    color: #fff;
+    opacity: 0;
+    transition: opacity .15s ease;
+}
+/* light circles need a dark tick - same L>0.335 cut as the buttons */
+.itflow-theme-circle.theme-yellow .itflow-theme-tick,
+.itflow-theme-circle.theme-orange .itflow-theme-tick,
+.itflow-theme-circle.theme-teal .itflow-theme-tick {
+    color: #000;
+}
+.itflow-theme-name {
+    display: block;
+    margin-top: .4rem;
+    font-size: .8125rem;
+    text-transform: capitalize;
+}
+.btn-check:checked + .itflow-theme-swatch .itflow-theme-tick {
+    opacity: 1;
+}
+.btn-check:checked + .itflow-theme-swatch .itflow-theme-name {
+    font-weight: 600;
+}
+.btn-check:focus-visible + .itflow-theme-swatch {
+    outline: 2px solid var(--itflow-accent, #007bff);
+    outline-offset: 2px;
+}
+