refactor(web): datatables

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

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}`}>

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>
   );