feat: update Table Row component styling

DistributedCollective · Nov 7, 2023 · 9722aa9 · 9722aa9
1 parent 8abf5e4
commit 9722aa9
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 8 deletions.
diff --git a/packages/ui/src/2_molecules/TableBase/TableBase.tsx b/packages/ui/src/2_molecules/TableBase/TableBase.tsx
@@ -39,12 +39,10 @@ export const TableBase = <RowType extends RowObject>({
   const handleRowClick = useCallback(
     (row: RowType) => {
       onRowClick?.(row);
-
-      console.log('index', rows?.indexOf(row));
-
-      setSelectedIndex(rows?.indexOf(row));
+      const index = rows?.indexOf(row);
+      setSelectedIndex(index === selectedIndex ? undefined : index);
     },
-    [onRowClick, rows],
+    [onRowClick, rows, selectedIndex],
   );
 
   return (

diff --git a/packages/ui/src/2_molecules/TableRow/TableRow.module.css b/packages/ui/src/2_molecules/TableRow/TableRow.module.css
@@ -1,5 +1,6 @@
 .row {
-  @apply cursor-pointer sm:cursor-auto outline outline-1 outline-gray-70 rounded text-xs font-medium;
+  @apply cursor-pointer sm:cursor-auto outline outline-1 outline-gray-70 rounded text-xs font-medium transition-colors;
+  transition-property: outline-color;
 
   &.small > td {
     @apply py-2.5 px-4;
@@ -29,7 +30,7 @@
 }
 
 .active {
-  @apply outline-gray-50 bg-gray-70;
+  outline-color: rgba(114, 234, 222, 0.5);
 }
 
 .expanded {

diff --git a/packages/ui/src/2_molecules/TableRow/TableRow.tsx b/packages/ui/src/2_molecules/TableRow/TableRow.tsx
@@ -60,7 +60,7 @@ export const TableRow = <RowType extends RowObject>({
       <tr
         key={index}
         className={classNames(styles.row, className, styles[size], {
-          [styles.clickable]: isClickable,
+          [styles.clickable]: isClickable || expandedContent,
           [styles.active]: isClickable && isSelected,
           [styles.expanded]: expandedRow && expandedContent,
         })}