fix: odd row coloring for console

crabnebula-dev · Feb 5, 2024 · 9e77bae · 9e77bae
1 parent 1e253f2
commit 9e77bae
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/clients/web/src/components/auto-scroll-pane.tsx b/clients/web/src/components/auto-scroll-pane.tsx
@@ -77,6 +77,7 @@ export function AutoScrollPane<DataType>(props: AutoScrollPaneProps<DataType>) {
                 <props.displayComponent
                   event={props.dataStream[virtualRow.index]}
                   {...props.displayOptions}
+                  odd={virtualRow.index & 1}
                 />
               </li>
             );

diff --git a/clients/web/src/components/console/log-event-entry.tsx b/clients/web/src/components/console/log-event-entry.tsx
@@ -11,6 +11,7 @@ import { getFileNameFromPath } from "~/lib/console/get-file-name-from-path";
 export function LogEventEntry(props: {
   event: LogEvent;
   showTimestamp?: boolean;
+  odd?: boolean;
 }) {
   const { monitorData } = useMonitor();
   const logEvent = untrack(() => props.event);
@@ -32,8 +33,9 @@ export function LogEventEntry(props: {
   return (
     <div
       class={clsx(
-        "p-1  font-mono text-sm items-center flex gap-4 odd:bg-slate-900 group",
-        levelStyle ? levelStyle : "border-b-gray-800 text-white"
+        "p-1  font-mono text-sm items-center flex gap-4 group",
+        levelStyle ? levelStyle : "border-b-gray-800 text-white",
+        props.odd ? "bg-slate-900" : ""
       )}
     >
       <Show when={props.showTimestamp}>