From 57b8d01dcbce35bdcf54dcc27dea2c526e557745 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Wed, 12 Nov 2025 16:01:48 -0600
Subject: [PATCH] fix(admin-panel): Refactor component-navbar.php to match Top
 Bar HTML patterns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GRUPO 2 - Colores Personalizados (complete refactor):
- Changed row structure: <div class="row"> → <div class="row g-2 mb-2">
- Changed columns: col-md-6 → col-6 (7 instances)
- Added Bootstrap icons to all labels: <i class="bi bi-*" style="color: #FF8600;">
- Updated label classes: class="form-label small mb-1 fw-semibold"
- Added w-100 class to all color inputs
- Added hex value displays: <small id="*Value">#HEXCODE</small>

Other groups fixed (8 total):
- GRUPO 1: Added g-2, changed col-md-6 → col-6 (2x)
- GRUPO 3: Added g-2, changed col-md-6 → col-6 (2x)
- GRUPO 4: Added g-2, changed col-md-6 → col-6 (2x)
- GRUPO 5: Added g-2 (maintains col-md-4 for 3 columns)
- GRUPO 6: Added g-2, changed col-md-6 → col-6 (2x)
- GRUPO 7: Added g-2, changed col-md-6 → col-6 (4x)
- GRUPO 8: Added g-2, changed col-md-6 → col-6 (2x)

Resolves #179 (Phase 2: Refactor HTML)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../admin/components/component-navbar.php     | 175 ++++++++----------
 1 file changed, 73 insertions(+), 102 deletions(-)

diff --git a/admin-panel/admin/components/component-navbar.php b/admin-panel/admin/components/component-navbar.php
index 894a9103..ce9b9b36 100644
--- a/admin-panel/admin/components/component-navbar.php
+++ b/admin-panel/admin/components/component-navbar.php
@@ -99,8 +99,8 @@ if (!defined('ABSPATH')) {
                     </div>
 
                     <!-- Selects compactados en fila -->
-                    <div class="row mt-3">
-                        <div class="col-md-6">
+                    <div class="row g-2 mt-3">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarPosition" class="text-secondary fw-medium mb-1">
                                     Posición
@@ -112,7 +112,7 @@ if (!defined('ABSPATH')) {
                                 </select>
                             </div>
                         </div>
-                        <div class="col-md-6">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarBreakpoint" class="text-secondary fw-medium mb-1">
                                     Breakpoint
@@ -140,92 +140,63 @@ if (!defined('ABSPATH')) {
                         Colores Personalizados
                     </h5>
 
-                    <!-- Background y texto - 2 por fila -->
-                    <div class="row">
-                        <div class="col-md-6">
-                            <div class="form-group mb-3">
-                                <label for="navbarBgColor" class="text-secondary fw-medium mb-1">
-                                    Color de fondo
-                                </label>
-                                <input type="color"
-                                       id="navbarBgColor"
-                                       class="form-control form-control-color"
-                                       value="#1e3a5f">
-                            </div>
+                    <!-- 7 colores en grid 2x2 (patrón Top Bar) -->
+                    <div class="row g-2 mb-2">
+                        <div class="col-6">
+                            <label for="navbarBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
+                                <i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
+                                Color de fondo
+                            </label>
+                            <input type="color" id="navbarBgColor" class="form-control form-control-color w-100" value="#1e3a5f" title="Seleccionar color de fondo">
+                            <small class="text-muted d-block mt-1" id="navbarBgColorValue">#1e3a5f</small>
                         </div>
-                        <div class="col-md-6">
-                            <div class="form-group mb-3">
-                                <label for="navbarTextColor" class="text-secondary fw-medium mb-1">
-                                    Color de texto
-                                </label>
-                                <input type="color"
-                                       id="navbarTextColor"
-                                       class="form-control form-control-color"
-                                       value="#ffffff">
-                            </div>
+                        <div class="col-6">
+                            <label for="navbarTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
+                                <i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
+                                Color de texto
+                            </label>
+                            <input type="color" id="navbarTextColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color de texto">
+                            <small class="text-muted d-block mt-1" id="navbarTextColorValue">#ffffff</small>
                         </div>
-                    </div>
-
-                    <!-- Hover states - 2 por fila -->
-                    <div class="row">
-                        <div class="col-md-6">
-                            <div class="form-group mb-3">
-                                <label for="navbarLinkHoverColor" class="text-secondary fw-medium mb-1">
-                                    Color hover links
-                                </label>
-                                <input type="color"
-                                       id="navbarLinkHoverColor"
-                                       class="form-control form-control-color"
-                                       value="#FF8600">
-                            </div>
+                        <div class="col-6">
+                            <label for="navbarLinkHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
+                                <i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
+                                Color hover links
+                            </label>
+                            <input type="color" id="navbarLinkHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover enlaces">
+                            <small class="text-muted d-block mt-1" id="navbarLinkHoverColorValue">#FF8600</small>
                         </div>
-                        <div class="col-md-6">
-                            <div class="form-group mb-3">
-                                <label for="navbarLinkHoverBgColor" class="text-secondary fw-medium mb-1">
-                                    Background hover
-                                </label>
-                                <input type="color"
-                                       id="navbarLinkHoverBgColor"
-                                       class="form-control form-control-color"
-                                       value="#FF8600">
-                            </div>
+                        <div class="col-6">
+                            <label for="navbarLinkHoverBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
+                                <i class="bi bi-square-fill me-1" style="color: #FF8600;"></i>
+                                Background hover
+                            </label>
+                            <input type="color" id="navbarLinkHoverBgColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color fondo hover">
+                            <small class="text-muted d-block mt-1" id="navbarLinkHoverBgColorValue">#FF8600</small>
                         </div>
-                    </div>
-
-                    <!-- Dropdown colors - 3 por fila -->
-                    <div class="row">
-                        <div class="col-md-4">
-                            <div class="form-group mb-0">
-                                <label for="navbarDropdownBgColor" class="text-secondary fw-medium mb-1">
-                                    Dropdown BG
-                                </label>
-                                <input type="color"
-                                       id="navbarDropdownBgColor"
-                                       class="form-control form-control-color"
-                                       value="#ffffff">
-                            </div>
+                        <div class="col-6">
+                            <label for="navbarDropdownBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
+                                <i class="bi bi-card-text me-1" style="color: #FF8600;"></i>
+                                Dropdown BG
+                            </label>
+                            <input type="color" id="navbarDropdownBgColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color fondo dropdown">
+                            <small class="text-muted d-block mt-1" id="navbarDropdownBgColorValue">#ffffff</small>
                         </div>
-                        <div class="col-md-4">
-                            <div class="form-group mb-0">
-                                <label for="navbarDropdownItemColor" class="text-secondary fw-medium mb-1">
-                                    Item Color
-                                </label>
-                                <input type="color"
-                                       id="navbarDropdownItemColor"
-                                       class="form-control form-control-color"
-                                       value="#495057">
-                            </div>
+                        <div class="col-6">
+                            <label for="navbarDropdownItemColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
+                                <i class="bi bi-text-left me-1" style="color: #FF8600;"></i>
+                                Item Color
+                            </label>
+                            <input type="color" id="navbarDropdownItemColor" class="form-control form-control-color w-100" value="#495057" title="Seleccionar color items dropdown">
+                            <small class="text-muted d-block mt-1" id="navbarDropdownItemColorValue">#495057</small>
                         </div>
-                        <div class="col-md-4">
-                            <div class="form-group mb-0">
-                                <label for="navbarDropdownItemHoverColor" class="text-secondary fw-medium mb-1">
-                                    Item Hover
-                                </label>
-                                <input type="color"
-                                       id="navbarDropdownItemHoverColor"
-                                       class="form-control form-control-color"
-                                       value="#FF8600">
-                            </div>
+                        <div class="col-6">
+                            <label for="navbarDropdownItemHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
+                                <i class="bi bi-hand-index me-1" style="color: #FF8600;"></i>
+                                Item Hover
+                            </label>
+                            <input type="color" id="navbarDropdownItemHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover items dropdown">
+                            <small class="text-muted d-block mt-1" id="navbarDropdownItemHoverColorValue">#FF8600</small>
                         </div>
                     </div>
                 </div>
@@ -241,8 +212,8 @@ if (!defined('ABSPATH')) {
                         Tipografía
                     </h5>
 
-                    <div class="row">
-                        <div class="col-md-6">
+                    <div class="row g-2">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarFontSize" class="text-secondary fw-medium mb-1">
                                     Tamaño de fuente
@@ -254,7 +225,7 @@ if (!defined('ABSPATH')) {
                                 </select>
                             </div>
                         </div>
-                        <div class="col-md-6">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarFontWeight" class="text-secondary fw-medium mb-1">
                                     Peso de fuente
@@ -313,8 +284,8 @@ if (!defined('ABSPATH')) {
                     </div>
 
                     <!-- Selects y números compactados -->
-                    <div class="row">
-                        <div class="col-md-6">
+                    <div class="row g-2">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarBoxShadowIntensity" class="text-secondary fw-medium mb-1">
                                     Intensidad sombra
@@ -327,7 +298,7 @@ if (!defined('ABSPATH')) {
                                 </select>
                             </div>
                         </div>
-                        <div class="col-md-6">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarBorderRadius" class="text-secondary fw-medium mb-1">
                                     Border radius (px)
@@ -361,7 +332,7 @@ if (!defined('ABSPATH')) {
                         Espaciado
                     </h5>
 
-                    <div class="row">
+                    <div class="row g-2">
                         <div class="col-md-4">
                             <div class="form-group mb-3">
                                 <label for="navbarPaddingVertical" class="text-secondary fw-medium mb-1">
@@ -440,8 +411,8 @@ if (!defined('ABSPATH')) {
                     </div>
 
                     <!-- Texto e icono -->
-                    <div class="row">
-                        <div class="col-md-6">
+                    <div class="row g-2">
+                        <div class="col-6">
                             <div class="form-group mb-3">
                                 <label for="navbarLetsTalkText" class="text-secondary fw-medium mb-1">
                                     Texto del botón
@@ -454,7 +425,7 @@ if (!defined('ABSPATH')) {
                                        placeholder="Let's Talk">
                             </div>
                         </div>
-                        <div class="col-md-6">
+                        <div class="col-6">
                             <div class="form-group mb-3">
                                 <label for="navbarLetsTalkIconClass" class="text-secondary fw-medium mb-1">
                                     Clase del icono
@@ -505,8 +476,8 @@ if (!defined('ABSPATH')) {
                     </div>
 
                     <!-- Números y selects -->
-                    <div class="row">
-                        <div class="col-md-6">
+                    <div class="row g-2">
+                        <div class="col-6">
                             <div class="form-group mb-3">
                                 <label for="navbarDropdownMaxHeight" class="text-secondary fw-medium mb-1">
                                     Altura máxima (vh)
@@ -519,7 +490,7 @@ if (!defined('ABSPATH')) {
                                        max="90">
                             </div>
                         </div>
-                        <div class="col-md-6">
+                        <div class="col-6">
                             <div class="form-group mb-3">
                                 <label for="navbarDropdownBorderRadius" class="text-secondary fw-medium mb-1">
                                     Border radius (px)
@@ -534,8 +505,8 @@ if (!defined('ABSPATH')) {
                         </div>
                     </div>
 
-                    <div class="row">
-                        <div class="col-md-6">
+                    <div class="row g-2">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarDropdownItemPaddingVertical" class="text-secondary fw-medium mb-1">
                                     Padding items V (rem)
@@ -549,7 +520,7 @@ if (!defined('ABSPATH')) {
                                        step="0.05">
                             </div>
                         </div>
-                        <div class="col-md-6">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarDropdownItemPaddingHorizontal" class="text-secondary fw-medium mb-1">
                                     Padding items H (rem)
@@ -577,8 +548,8 @@ if (!defined('ABSPATH')) {
                         Avanzado
                     </h5>
 
-                    <div class="row">
-                        <div class="col-md-6">
+                    <div class="row g-2">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarZIndex" class="text-secondary fw-medium mb-1">
                                     Z-index
@@ -591,7 +562,7 @@ if (!defined('ABSPATH')) {
                                        max="9999">
                             </div>
                         </div>
-                        <div class="col-md-6">
+                        <div class="col-6">
                             <div class="form-group mb-0">
                                 <label for="navbarTransitionSpeed" class="text-secondary fw-medium mb-1">
                                     Velocidad transiciones