Merge pull request #209 from swamphacks/feat/team-card-tooltips

Tooltips for leave team and kick member

Author: AlexanderWangY

apps/web/src/features/Team/components/MyTeamCard.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/Button";
 import { toast } from "react-toastify";
 import TablerDoorExit from "~icons/tabler/door-exit";
 import TablerCircleX from "~icons/tabler/circle-x";
+import { Tooltip } from "@/components/ui/Tooltip";
 
 interface Props {
   eventId: string;
@@ -46,13 +47,23 @@ export default function MyTeamCard({ eventId, userId, team }: Props) {
       <div className="w-full flex flex-row items-center justify-between">
         <h3 className="text-text-main text-2xl">{team.name}</h3>
 
-        <Button
-          onClick={handleLeaveTeam}
-          variant="icon"
-          className="aspect-square p-2.5"
+        <Tooltip
+          tooltipProps={{
+            label: "Leave Team",
+            offset: 4,
+          }}
+          triggerProps={{
+            delay: 150,
+          }}
         >
-          <TablerDoorExit className="w-5 h-5 text-red-600" />
-        </Button>
+          <Button
+            onClick={handleLeaveTeam}
+            variant="icon"
+            className="aspect-square p-2.5"
+          >
+            <TablerDoorExit className="w-5 h-5 text-red-600" />
+          </Button>
+        </Tooltip>
       </div>
       <div className="flex flex-row text-text-secondary items-center gap-4">
         <AvatarStack
@@ -82,19 +93,30 @@ export default function MyTeamCard({ eventId, userId, team }: Props) {
 
               {/* Only show kick button if the viewer is the owner and the member is not the owner */}
               {member.user_id !== team.owner_id && userId == team.owner_id && (
-                <button
-                  type="button"
-                  onClick={() => handleKickMember(member.user_id)}
-                  className="ml-2 p-1 hover:text-red-500 cursor-pointer transition-all duration-150"
-                  aria-label={`Remove ${member.name}`}
+                <Tooltip
+                  tooltipProps={{
+                    label: `Remove ${member.name || "member"}`,
+                    offset: 4,
+                  }}
+                  triggerProps={{
+                    delay: 150,
+                  }}
                 >
-                  <TablerCircleX className="w-4 h-4" />
-                </button>
+                  <Button
+                    variant="unstyled"
+                    className="ml-2 p-1"
+                    onClick={() => handleKickMember(member.user_id)}
+                  >
+                    <TablerCircleX className="w-5 h-5 hover:text-red-600 hover:cursor-pointer transition-colors duration-150" />
+                  </Button>
+                </Tooltip>
               )}
 
               {/* Indicate the owner */}
               {member.user_id === team.owner_id && (
-                <span className="text-xs text-neutral-500">(Owner)</span>
+                <span className="text-xs text-neutral-500 select-none">
+                  (Owner)
+                </span>
               )}
             </li>
           ))}