From 6aec06d1c6a7413148969dd820e2445b6df421d7 Mon Sep 17 00:00:00 2001
From: Adrian Fusco Arnejo <afuscoar@redhat.com>
Date: Thu, 13 Nov 2025 14:58:42 +0100
Subject: [PATCH] Add dark light mode button and missing dark classes

---
 frontend/RcaComponent.jsx | 32 +++++++++++++++---------------
 index.html                | 41 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/frontend/RcaComponent.jsx b/frontend/RcaComponent.jsx
index d47631f..b18092a 100644
--- a/frontend/RcaComponent.jsx
+++ b/frontend/RcaComponent.jsx
@@ -5,7 +5,7 @@ import "./RcaComponent.css";
 
 function Spinner({ last_status }) {
   return (
-    <div className="flex p-1 place-items-center gap-2 w-full">
+    <div className="flex p-1 place-items-center gap-2 w-full dark:text-gray-100">
       <div className="w-4 h-4 border-4 border-blue-500 border-dashed rounded-full animate-spin">
       </div>
       {last_status}
@@ -16,12 +16,12 @@ function Spinner({ last_status }) {
 function Evidence({ error, source, log_url, logjuicer_url, source_map }) {
   return (
     <div>
-      <div className="bg-slate-100">
+      <div className="bg-slate-100 dark:bg-gray-700 p-1">
         <a
           href={log_url + "/" + source}
           target="_blank"
           rel="noopener noreferrer"
-          className="cursor-pointer hover:underline"
+          className="cursor-pointer hover:underline text-blue-600 dark:text-blue-400"
         >
           {source}
         </a>
@@ -34,7 +34,7 @@ function Evidence({ error, source, log_url, logjuicer_url, source_map }) {
           logjuicer
         </a>
       </div>
-      <pre className="pl-2 font-mono break-all whitespace-pre-wrap">{error}</pre>
+      <pre className="pl-2 font-mono break-all whitespace-pre-wrap dark:text-gray-300 bg-slate-50 dark:bg-gray-800 p-2">{error}</pre>
     </div>
   );
 }
@@ -203,7 +203,7 @@ export function RcaComponent(
           {report && (
             <div className="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-md p-6">
               <div className="flex flex-wrap justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-2 mb-4 gap-2">
-                <h2 className="text-xl font-semibold">
+                <h2 className="text-xl font-semibold dark:text-gray-100">
                   Analysis Result
                 </h2>
                 {usage && (
@@ -265,7 +265,7 @@ export function RcaComponent(
                     rootCauseIndex,
                   ) => (
                     <div key={rootCauseIndex} className="mb-6">
-                      <h3 className="font-semibold">
+                      <h3 className="font-semibold dark:text-gray-100">
                         Possible Root Cause {rootCauseIndex + 1}
                       </h3>
                       <div className="prose dark:prose-invert max-w-none">
@@ -283,7 +283,7 @@ export function RcaComponent(
                           {rootCause.cause}
                         </ReactMarkdown>
                       </div>
-                      <h3 className="font-semibold pt-2">Evidences</h3>
+                      <h3 className="font-semibold pt-2 dark:text-gray-100">Evidences</h3>
                       <ul className="list-none p-0 m-0 font-mono text-sm space-y-2">
                         {rootCause.evidences.map((evidence, index) => (
                           <li key={index} className="pt-1 break-words">
@@ -303,7 +303,7 @@ export function RcaComponent(
               )}
               {report.jira_tickets && report.jira_tickets.length > 0 && (
                 <>
-                  <h3 className="font-semibold pt-4">Related JIRA Tickets</h3>
+                  <h3 className="font-semibold pt-4 dark:text-gray-100">Related JIRA Tickets</h3>
                   <ul className="list-none p-0 m-0 space-y-2">
                     {report.jira_tickets.map((ticket, index) => (
                       <li key={index} className="pt-1">
@@ -338,7 +338,7 @@ export function RcaComponent(
           {(jobInfo || playbooks.length > 0) && (
             <div className="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-md p-6">
               <div className="flex flex-wrap justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-2 mb-4 gap-2">
-                <h2 className="text-xl font-semibold">
+                <h2 className="text-xl font-semibold dark:text-gray-100">
                   Job Information
                 </h2>
               </div>
@@ -361,20 +361,20 @@ export function RcaComponent(
               )}
               {playbooks.length > 0 && (
                 <>
-                  <h3 className="font-semibold">Playbooks</h3>
+                  <h3 className="font-semibold dark:text-gray-100">Playbooks</h3>
                   <ul className="list-disc p-0 m-0 font-mono text-sm space-y-2 mb-3">
                     {playbooks.map((play, index) => (
-                      <li key={index} className="pt-1 break-words">{play}</li>
+                      <li key={index} className="pt-1 break-words dark:text-gray-300">{play}</li>
                     ))}
                   </ul>
                 </>
               )}
               {jobInfo && jobInfo.actions && (
                 <>
-                  <h3 className="font-semibold">Actions</h3>
+                  <h3 className="font-semibold dark:text-gray-100">Actions</h3>
                   <ul className="list-decimal p-0 ml-3 font-mono text-sm space-y-2">
                     {jobInfo.actions.map((action, index) => (
-                      <li key={index} className="pt-1 break-words">{action}</li>
+                      <li key={index} className="pt-1 break-words dark:text-gray-300">{action}</li>
                     ))}
                   </ul>
                 </>
@@ -384,15 +384,15 @@ export function RcaComponent(
           {status.length > 0 && (
             <div className="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-md p-6">
               <div className="flex">
-                <h2 className="text-xl font-semibold border-b border-gray-200 dark:border-gray-700 pb-2 mb-4 grow">
+                <h2 className="text-xl font-semibold border-b border-gray-200 dark:border-gray-700 pb-2 mb-4 grow dark:text-gray-100">
                   Analysis Status
                 </h2>
-                <a className="cursor-pointer" onClick={toggleStatus}>Expand</a>
+                <a className="cursor-pointer text-blue-600 dark:text-blue-400 hover:underline" onClick={toggleStatus}>Expand</a>
               </div>
               {showStatus && (
                 <ul className="list-none p-0 m-0 font-mono text-sm space-y-2">
                   {status.map((msg, index) => (
-                    <li key={index} className="pt-1 break-words">{msg}</li>
+                    <li key={index} className="pt-1 break-words dark:text-gray-300">{msg}</li>
                   ))}
                 </ul>
               )}
diff --git a/index.html b/index.html
index 3700f9e..56bc408 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,12 @@ <h1 style="font-size: 36px; color: oklch(0.546 0.245 262.881); font-weight: 700"
           Fast and accurate root cause analysis of Zuul CI Build failures.
         </p>
         <br />
+        <div class="flex justify-center mb-4">
+          <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
+            <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.071 14.929a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414l-.707-.707zm1.414-10.607a1 1 0 010 1.414L4.343 10.5a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM3 11a1 1 0 100-2H2a1 1 0 000 2h1z"></path></svg>
+          </button>
+        </div>
       </center>
       <div id="root"></div>
     </div>
@@ -33,6 +39,41 @@ <h1 style="font-size: 36px; color: oklch(0.546 0.245 262.881); font-weight: 700"
       createRoot(document.getElementById("root")).render(
           createElement(RcaComponent, {build, workflow}, null)
       );
+
+      const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+      const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+      const themeToggleBtn = document.getElementById('theme-toggle');
+
+      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark');
+          themeToggleLightIcon.classList.remove('hidden');
+      } else {
+          document.documentElement.classList.remove('dark');
+          themeToggleDarkIcon.classList.remove('hidden');
+      }
+
+      themeToggleBtn.addEventListener('click', function() {
+          themeToggleDarkIcon.classList.toggle('hidden');
+          themeToggleLightIcon.classList.toggle('hidden');
+
+          if (localStorage.getItem('color-theme')) {
+              if (localStorage.getItem('color-theme') === 'light') {
+                  document.documentElement.classList.add('dark');
+                  localStorage.setItem('color-theme', 'dark');
+              } else {
+                  document.documentElement.classList.remove('dark');
+                  localStorage.setItem('color-theme', 'light');
+              }
+          } else {
+              if (document.documentElement.classList.contains('dark')) {
+                  document.documentElement.classList.remove('dark');
+                  localStorage.setItem('color-theme', 'light');
+              } else {
+                  document.documentElement.classList.add('dark');
+                  localStorage.setItem('color-theme', 'dark');
+              }
+          }
+      });
     </script>
   </body>
 </html>