The hover effect is broken in the Button component

[GoPotatos]

In the Button component there's this line:

const variants = {
  primary: 'bg-blue-600 text-white hover:bg-gray-50:text-blue-600',
  inverse: 'bg-white text-blue-600 hover:bg-blue-600:text-white',
  danger: 'bg-red-600 text-white hover:bg-red-50:text-red-600',
};

The background and text color classes are being stacked on top of each other on the hover modifier, which I don't think is supported by Tailwind, you can stack modifiers upon each other, but not classes. I believe it should look like this:

    const variants = {
      primary: 'bg-blue-600 text-white hover:bg-gray-50 hover:text-blue-600',
      inverse: 'bg-white text-blue-600 hover:bg-blue-600 hover:text-white',
      danger: 'bg-red-600 text-white hover:bg-red-50 hover:text-red-600',
    };

Indeed, upon inspecting the Button component locally and on the live demo website, the hover effect doesn't seem to be working.

There are other couple minor (non)issues, first in the deleteUser.ts file:

      queryClient.setQueryData(
        'users',
        previousUsers?.filter((discussion) => discussion.id !== deletedUser.userId)
      );

The code is filtering an array of User objects, but the parameter for the filter callback is named discussion which is not semantically correct, something like user should be used instead.

The other thing in the teamsHandlers array in the teams.ts file @ line No.47:

    rest.patch<TeamBody>(`${API_URL}/team/:teamId`, (req, res, ctx) => {

The url has a :teamId parameter, but it is not being utilized anywhere in the code by extracting it with something like req.params, instead the code uses the user.teamId value obtained from the requireAuth(req) function. So it makes sense to eliminate this :itemId parameter all together from the url.

Finally, and this is a mere suggestion, in the Table component @ line 47:

   <tr
       key={entry?.id || entryIndex}
       className={entryIndex % 2 === 0 ? 'bg-white' : 'bg-gray-100'}
   >

I think this would be a good place to make use of Tailwind's odd and even modifiers:

  <tr
      key={entry?.id || entryIndex}
      className='odd:bg-white even:bg-gray-100'
  >