From ad25d5fe3fa33966712738a43b01f3b31dc8862a Mon Sep 17 00:00:00 2001
From: Andy Chan <andy@12beesinatrenchco.at>
Date: Fri, 19 Apr 2024 16:36:16 -0400
Subject: [PATCH] TableCell styling changes

i love `border`
---
 compass/components/Table/Index.tsx            | 2 +-
 compass/components/Table/PrimaryTableCell.tsx | 4 ++--
 compass/components/Table/TableCell.tsx        | 6 +++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index 9c7329b..d27110f 100644
--- a/compass/components/Table/Index.tsx
+++ b/compass/components/Table/Index.tsx
@@ -186,7 +186,7 @@ export const Table = () => {
               >
                 {row.getVisibleCells().map((cell, i) => (
                   <td key={cell.id}
-                    className={"p-2 [&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"}
+                    className={"[&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>
diff --git a/compass/components/Table/PrimaryTableCell.tsx b/compass/components/Table/PrimaryTableCell.tsx
index 47e87e0..a6e265f 100644
--- a/compass/components/Table/PrimaryTableCell.tsx
+++ b/compass/components/Table/PrimaryTableCell.tsx
@@ -12,9 +12,9 @@ export const PrimaryTableCell = ({ getValue, row, column, table }) => {
   };
 
   return (
-    <div className="font-semibold group flex flex-row items-center justify-between pr-2">
+    <div className="font-semibold group">
       <TableCell getValue={getValue} row={row} column={column} table={table} />
-      <span>
+      <span className="absolute right-1 top-1">
         <Drawer title={getValue()} editableContent={pageContent} onSave={handleDrawerContentChange}>{pageContent}</Drawer>
       </span>
     </div>
diff --git a/compass/components/Table/TableCell.tsx b/compass/components/Table/TableCell.tsx
index a84e40f..a6dfc02 100644
--- a/compass/components/Table/TableCell.tsx
+++ b/compass/components/Table/TableCell.tsx
@@ -12,6 +12,10 @@ export const TableCell = ({ getValue, row, column, table }) => {
   const onBlur = () => {
     table.options.meta?.updateData(row.index, column.id, value);
   };
+// focus:border focus:border-gray-200
+  const className = "w-full p-3 bg-inherit rounded-md outline-none border border-transparent relative "
+    + "focus:shadow-md focus:border-gray-200 focus:bg-white focus:z-20 focus:p-4 focus:-m-1 "
+    + "focus:w-[calc(100%+0.5rem)]";
 
-  return <input className="w-full py-2 bg-inherit" value={value} onChange={e => setValue(e.target.value)} onBlur={onBlur} />;
+  return <input className={className} value={value} onChange={e => setValue(e.target.value)} onBlur={onBlur} />;
 };