From e50cc59f0d9ed74579fe1eb83c04ade61f235dd5 Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Thu, 4 Feb 2021 16:18:15 -0800
Subject: [PATCH] refactor(web): datatables

---
 web/src/Events.jsx           |  2 +-
 web/src/components/Card.jsx  |  4 +++-
 web/src/components/Table.jsx | 14 ++++++++++----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/web/src/Events.jsx b/web/src/Events.jsx
index 35000cc75..90c886824 100644
--- a/web/src/Events.jsx
+++ b/web/src/Events.jsx
@@ -141,7 +141,7 @@ export default function Events({ path: pathname } = {}) {
                 const end = new Date(parseInt(endTime * 1000, 10));
                 const ref = i === events.length - 1 ? lastCellRef : undefined;
                 return (
-                  <Tr key={id} index={i}>
+                  <Tr key={id}>
                     <Td className="w-40">
                       <a href={`/events/${id}`} ref={ref} data-start-time={startTime} data-reached-end={reachedEnd}>
                         <img
diff --git a/web/src/components/Card.jsx b/web/src/components/Card.jsx
index a6bf9678f..8690ec57c 100644
--- a/web/src/components/Card.jsx
+++ b/web/src/components/Card.jsx
@@ -17,7 +17,9 @@ export default function Box({
 }) {
   const Element = href ? 'a' : 'div';
 
-  const typeClasses = elevated ? 'shadow-md hover:shadow-lg transition-shadow' : 'border border-gray-200';
+  const typeClasses = elevated
+    ? 'shadow-md hover:shadow-lg transition-shadow'
+    : 'border border-gray-200 dark:border-gray-700';
 
   return (
     <div className={`bg-white dark:bg-gray-800 rounded-lg overflow-hidden ${typeClasses} ${className}`}>
diff --git a/web/src/components/Table.jsx b/web/src/components/Table.jsx
index f41489709..b1407c8df 100644
--- a/web/src/components/Table.jsx
+++ b/web/src/components/Table.jsx
@@ -18,13 +18,19 @@ export function Tfoot({ children, className = '' }) {
   return <tfoot className={`${className}`}>{children}</tfoot>;
 }
 
-export function Tr({ children, className = '', index }) {
-  return <tr className={`${index % 2 ? 'bg-gray-200 dark:bg-gray-600' : ''} ${className}`}>{children}</tr>;
+export function Tr({ children, className = '' }) {
+  return (
+    <tr
+      className={`border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 ${className}`}
+    >
+      {children}
+    </tr>
+  );
 }
 
 export function Th({ children, className = '', colspan }) {
   return (
-    <th className={`border-b-2 border-gray-400 p-1 md:p-2 text-left ${className}`} colspan={colspan}>
+    <th className={`border-b border-gray-400 p-2 px-1 lg:p-4 text-left ${className}`} colspan={colspan}>
       {children}
     </th>
   );
@@ -32,7 +38,7 @@ export function Th({ children, className = '', colspan }) {
 
 export function Td({ children, className = '', colspan }) {
   return (
-    <td className={`p-1 md:p-2 ${className}`} colspan={colspan}>
+    <td className={`p-2 px-1 lg:p-4 ${className}`} colspan={colspan}>
       {children}
     </td>
   );