fix: update user column hover and selected colors

src/features/users/components/users-columns.tsx

@@ -25,7 +25,7 @@ export const columns: ColumnDef<User>[] = [
     meta: {
       className: cn(
         'sticky md:table-cell left-0 z-10 rounded-md',
-        'bg-background group-hover/row:bg-muted group-hover/row: group-data-[state=selected]/row:bg-muted'
+        'bg-background transition-colors duration-0 group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted'
       ),
     },
     cell: ({ row }) => (
@@ -50,7 +50,7 @@ export const columns: ColumnDef<User>[] = [
     meta: {
       className: cn(
         'drop-shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:drop-shadow-[0_1px_2px_rgb(255_255_255_/_0.1)] lg:drop-shadow-none',
-        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted',
+        'bg-background transition-colors duration-0 group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted',
         'sticky left-6 md:table-cell'
       ),
     },

src/features/users/components/users-table.tsx

@@ -73,7 +73,7 @@ export function UsersTable({ columns, data }: DataTableProps) {
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <TableRow key={headerGroup.id} className='group/row'>
                 {headerGroup.headers.map((header) => {
                   return (
                     <TableHead
@@ -99,6 +99,7 @@ export function UsersTable({ columns, data }: DataTableProps) {
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && 'selected'}
+                  className='group/row'
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell