From 99ac10a87055611dcd3b43ca5c32d09f887b9d8cd883774e75452dbb7e93c707 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9nich=20Bon=20=C4=86iri=C4=87?=
 <renich@woralelandia.com>
Date: Tue, 16 Jun 2026 11:02:06 -0600
Subject: [PATCH] fix(branding): restore round logo and fix mainNav stylesheet
 import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Correct the relative stylesheet import path to '../../koji.css' in the theme file to restore base styles and resolve the unstyled vertical navigation menu list.
- Restore the round logo layout scaled to 50px of height.
- Style the mainNav tabs menu with Slate/Emerald colors to match the theme.

Co-developed-by: Gemini AI <renich+gemini@woralelandia.com>
Signed-off-by: Rénich Bon Ćirić <renich@woralelandia.com>
---
 roles/koji_hub/tasks/main.yaml | 106 +++++++++++++++++++++++++++++----
 1 file changed, 94 insertions(+), 12 deletions(-)

diff --git a/roles/koji_hub/tasks/main.yaml b/roles/koji_hub/tasks/main.yaml
index d3593f5..dde5457 100644
--- a/roles/koji_hub/tasks/main.yaml
+++ b/roles/koji_hub/tasks/main.yaml
@@ -413,7 +413,7 @@
 
     - name: Convert main logo SVG to PNG
       ansible.builtin.command:
-        cmd: "rsvg-convert -w 250 --keep-aspect-ratio -o /tmp/mxos-koji.png /home/renich/Projects/MxOS/mxos.svg"
+        cmd: "rsvg-convert -h 50 --keep-aspect-ratio -o /tmp/mxos-koji.png /home/renich/Projects/MxOS/sitio/static/images/logo.svg"
         creates: /tmp/mxos-koji.png
 
     - name: Convert favicon logo SVG to PNG
@@ -459,30 +459,112 @@
         group: root
         mode: "0644"
         content: |
-          @import url("../default/koji.css");
+          @import url("../../koji.css");
 
           body {
               font-family: 'Inter', system-ui, -apple-system, sans-serif;
           }
 
           #header {
-              background-color: #0f172a; /* Pizarra oscuro */
+              background-color: #0f172a; /* Slate 900 */
               border-bottom: 3px solid #10b981; /* Verde esmeralda de MxOS */
+              height: 60px; /* Altura ajustada del header */
+              clear: left;
           }
 
-          #header a {
-              color: #10b981;
+          #kojiLogo {
+              float: left;
+              height: 50px; /* Logotipo redondo de 50px */
+              width: auto;
+              margin-top: 5px;
+              margin-left: 15px;
           }
 
-          #header h1 {
-              background-image: url("images/koji.png");
-              background-repeat: no-repeat;
-              background-position: left center;
-              height: 60px;
-              padding-left: 270px; /* Suficiente espacio para la imagen de 250px */
+          #headerSearch {
+              float: right;
+              margin-right: 15px;
+              height: 50px;
+              margin-top: 5px; /* Centrado vertical en el header de 60px */
+              display: flex;
+              align-items: center;
+              gap: 8px;
           }
 
-          /* Cambiar colores de enlaces y botones */
+          /* Estilo para los inputs de búsqueda */
+          #headerSearch select,
+          #headerSearch input[type="text"] {
+              background-color: #1e293b; /* Slate 800 */
+              border: 1px solid #334155; /* Slate 700 */
+              color: #f8fafc; /* Slate 50 */
+              border-radius: 4px;
+              padding: 4px 8px;
+              height: 28px;
+              font-size: 13px;
+              box-sizing: border-box;
+          }
+
+          #headerSearch select:focus,
+          #headerSearch input[type="text"]:focus {
+              border-color: #10b981;
+              outline: none;
+          }
+
+          #headerSearch input[type="submit"] {
+              background-color: #10b981;
+              color: white;
+              border: none;
+              border-radius: 4px;
+              padding: 0 16px;
+              height: 28px;
+              font-weight: 600;
+              font-size: 13px;
+              cursor: pointer;
+              box-sizing: border-box;
+          }
+
+          #headerSearch input[type="submit"]:hover {
+              background-color: #059669;
+          }
+
+          /* Estilización del Menú de Pestañas (#mainNav) */
+          #mainNav {
+              background-color: #1e293b; /* Slate 800 */
+              border-bottom: 2px solid #10b981; /* Borde verde esmeralda */
+              font-weight: bold;
+              height: 2.1em;
+          }
+
+          #mainNav ul li {
+              background-color: #1e293b;
+              border-color: #1e293b;
+          }
+
+          #mainNav ul li a {
+              color: #f8fafc; /* Texto claro */
+          }
+
+          #mainNav ul li:hover {
+              background-color: #334155; /* Slate 700 */
+              border-color: #10b981;
+          }
+
+          /* Pestaña activa de la página actual */
+          body#summary #mainNav li#summaryTab a,
+          body#tasks #mainNav li#tasksTab a,
+          body#tags #mainNav li#tagsTab a,
+          body#builds #mainNav li#buildsTab a,
+          body#packages #mainNav li#packagesTab a,
+          body#users #mainNav li#usersTab a,
+          body#hosts #mainNav li#hostsTab a,
+          body#buildtargets #mainNav li#buildtargetsTab a,
+          body#reports #mainNav li#reportsTab a,
+          body#search #mainNav li#searchTab a,
+          body#api #mainNav li#apiTab a {
+              background-color: #10b981; /* Emerald 500 */
+              color: white;
+          }
+
+          /* Cambiar colores de enlaces y botones globales */
           a {
               color: #10b981;
           }