website refactor

apps/website/ui/Table.tsx

@@ -8,8 +8,8 @@ interface TableProps extends HTMLAttributes<HTMLTableElement> {
 
 export function Table({ children, className = '', ...props }: TableProps) {
   return (
-    <Box overflow="auto">
-      <table className={`w-full ${className}`} {...props}>
+    <Box overflow="auto" className="border border-border-gray rounded-sm">
+      <table className={`w-full border-collapse text-left ${className}`} {...props}>
         {children}
       </table>
     </Box>
@@ -22,7 +22,7 @@ interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
 
 export function TableHead({ children, ...props }: TableHeadProps) {
   return (
-    <thead {...props}>
+    <thead className="bg-graphite-black border-b border-border-gray" {...props}>
       {children}
     </thead>
   );
@@ -34,7 +34,7 @@ interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
 
 export function TableBody({ children, ...props }: TableBodyProps) {
   return (
-    <tbody {...props}>
+    <tbody className="divide-y divide-border-gray/50" {...props}>
       {children}
     </tbody>
   );
@@ -47,8 +47,8 @@ interface TableRowProps extends BoxProps<'tr'> {
 }
 
 export function TableRow({ children, className = '', clickable = false, variant = 'default', ...props }: TableRowProps) {
-  const baseClasses = 'border-b border-charcoal-outline/50 transition-colors';
-  const variantClasses = variant === 'highlight' ? 'bg-primary-blue/5' : '';
+  const baseClasses = 'transition-colors duration-150 ease-smooth';
+  const variantClasses = variant === 'highlight' ? 'bg-primary-accent/5' : 'hover:bg-white/[0.02]';
   const classes = [
     baseClasses,
     variantClasses,
@@ -68,7 +68,7 @@ interface TableHeaderProps extends BoxProps<'th'> {
 }
 
 export function TableHeader({ children, className = '', ...props }: TableHeaderProps) {
-  const baseClasses = 'py-3 px-4 text-xs font-medium text-gray-400 uppercase';
+  const baseClasses = 'py-2.5 px-4 text-[11px] font-bold text-gray-500 uppercase tracking-wider';
   const classes = [baseClasses, className].filter(Boolean).join(' ');
 
   return (
@@ -83,7 +83,7 @@ interface TableCellProps extends BoxProps<'td'> {
 }
 
 export function TableCell({ children, className = '', ...props }: TableCellProps) {
-  const baseClasses = 'py-3 px-4';
+  const baseClasses = 'py-3 px-4 text-sm text-gray-300';
   const classes = [baseClasses, className].filter(Boolean).join(' ');
 
   return (