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,21 +18,27 @@ 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>
  );
 }
 
 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>
  );