better dark mode colors for highlighting (#6422)

before:
<img width="741" alt="image"
src="https://github.com/user-attachments/assets/b1536220-3fd3-462c-a094-dbb51a3f8bd7"
/>

after:
<img width="1264" alt="image"
src="https://github.com/user-attachments/assets/d284fae6-15bb-4e2f-925f-4afa7f987f58"
/>

Author: wdvr

torchci/components/hud.module.css

@@ -51,7 +51,7 @@
   flex: 1;
 }
 
-/* code to roatate the workflow name headers */
+/* code to rotate the workflow name headers */
 .jobHeader {
   font-family: sans-serif;
   height: 150px;
@@ -160,4 +160,7 @@
 
 .controlsContainer > div {
   margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }

torchci/styles/globals.css

@@ -74,10 +74,10 @@
   --border-color: #3a3a3a;
 
   /* HUD specific colors - dark mode variants */
-  --forced-merge-bg: #453e00;
-  --forced-merge-failure-bg: #5e3a00;
-  --selected-row-bg: #0a3550;
-  --highlight-bg: #525200;
+  --forced-merge-bg: #7e7000;
+  --forced-merge-failure-bg: #a06200;
+  --selected-row-bg: #164863;
+  --highlight-bg: #555500;
 
   /* MiniHud specific colors - dark mode variants */
   --workflow-box-none-bg: #383838;