From fafd7ae89d1dfbb3845c39ff81e9a31fa79b05c8 Mon Sep 17 00:00:00 2001
From: eugenio <eugenio@pop-os.fritz.box>
Date: Sat, 2 May 2026 22:54:07 +0200
Subject: [PATCH] ui improvements

---
 html/css/style.css       | 1 +
 html/index.html          | 2 +-
 html/js/mode_controls.js | 6 +++---
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/html/css/style.css b/html/css/style.css
index 6b035e5..7d11fa0 100644
--- a/html/css/style.css
+++ b/html/css/style.css
@@ -225,6 +225,7 @@ body {
 .sidebar-brand {
   display: flex;
   align-items: center;
+  justify-content: center;
   padding: 14px 15px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   margin-bottom: 6px;
diff --git a/html/index.html b/html/index.html
index e886918..6aabd4b 100644
--- a/html/index.html
+++ b/html/index.html
@@ -184,7 +184,7 @@
 
     <div class="sidebar" id="sidebar">
       <div class="sidebar-brand">
-        <img src="./images/kubeinvaders_spaceship.png" alt="KubeInvaders" style="width: 34px; height: auto; margin-right: 8px; image-rendering: pixelated;">
+        <img src="./images/kubeinvaders_spaceship.png" alt="KubeInvaders" style="width: 34px; height: auto; margin-right: 8px;  margin-left: 8px; image-rendering: pixelated;">
         <span style="font-size: 13px; font-weight: bold; color: #fff; letter-spacing: 0.04em;">KubeInvaders</span>
       </div>
       <a id="gameModeButton" onclick="saveK8sConnection(); startGameMode()"><i class="fas fa-gamepad me-2"></i>Enable Game Mode</a>
diff --git a/html/js/mode_controls.js b/html/js/mode_controls.js
index b4d655b..2fd6161 100644
--- a/html/js/mode_controls.js
+++ b/html/js/mode_controls.js
@@ -64,7 +64,7 @@ function startProgrammingMode() {
 
   if (programming_mode_switch) {
     programming_mode_switch = false;
-    $("#programmingModeButton").text("Enable Prog. Mode");
+    $("#programmingModeButton").html('<i class="fas fa-code me-2"></i>Programming Mode');
   } else {
     document.getElementById("gameContainer").style.width = "100%";
     document.getElementById("gameContainer").style.height = "100%";
@@ -72,8 +72,8 @@ function startProgrammingMode() {
 
     programming_mode_switch = true;
     game_mode_switch = false;
-    $("#gameModeButton").text("Enable Game Mode");
-    $("#programmingModeButton").text("Disable Prog. Mode");
+    $("#gameModeButton").html('<i class="fas fa-gamepad me-2"></i>Enable Game Mode');
+    $("#programmingModeButton").html('<i class="fas fa-code me-2"></i>Disable Prog. Mode');
   }
   if (chaos_program_screen.style.display === "none") {
     chaos_program_screen.style.display = "block";