style: alternate odd/even colors in chart

Author: bryanlundberg

src/components/cubes/TableRow.tsx

@@ -49,7 +49,7 @@ export default function TableRow({ cube }: { cube: Cube }) {
     <>
       <div
         onClick={(e) => redirectToHome(e)}
-        className="table-row h-10 transition duration-200 bg-transparent dark:hover:bg-zinc-900 light:hover:bg-neutral-200 dark:text-neutral-100 light:text-neutral-950 "
+        className="table-row h-10 transition duration-200 bg-transparent dark:even:bg-zinc-900 light:even:bg-neutral-200 dark:hover:bg-zinc-800 light:hover:bg-neutral-300 dark:text-neutral-100 light:text-neutral-950 "
       >
         <div className="table-cell w-10 align-middle">
           <BookmarkFav

src/components/stats/StatisticRow.tsx

@@ -14,7 +14,7 @@ export function StatisticRow({
   cubeSession,
 }: StatisticRow) {
   return (
-    <div className="flex items-center h-10 text-xs rounded-md dark:text-zinc-400 light:text-neutral-950 light:bg-neutral-100">
+    <div className="flex items-center h-10 text-xs bg-transparent rounded-md dark:text-zinc-300 light:text-neutral-950 dark:odd:bg-zinc-900 light:odd:bg-neutral-100">
       <div className="w-1/5 ps-3">{label}</div>
       <div className="w-1/5 text-center">{global}</div>
       <div className="w-1/5 text-center">{session}</div>

src/components/stats/StatisticsHeader.tsx

@@ -5,7 +5,7 @@ export function StatisticHeader() {
   const { lang } = useSettingsModalStore();
   return (
     <>
-      <div className="flex items-center h-10 p-1 font-medium rounded-md dark:bg-zinc-900 dark:text-zinc-200 light:bg-neutral-200 light:text-neutral-950">
+      <div className="flex items-center h-10 p-1 font-medium rounded-md dark:bg-zinc-700 dark:text-zinc-200 light:bg-neutral-200 light:text-neutral-950">
         <div className="w-1/5"></div>
         <div className="w-1/5 text-center">
           {translation.metrics["global"][lang]}