From 5cf67fdbaad0b45e3966be7588b9c5a085a04242 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Wed, 23 Feb 2022 11:09:22 +0000
Subject: [PATCH] fixed avatar group and tooltip (#1950)

---
 apps/web/components/ui/Avatar.tsx      |  2 +-
 apps/web/components/ui/AvatarGroup.tsx | 33 ++------------------------
 2 files changed, 3 insertions(+), 32 deletions(-)

diff --git a/apps/web/components/ui/Avatar.tsx b/apps/web/components/ui/Avatar.tsx
index 4232d5c8..ecc18d7b 100644
--- a/apps/web/components/ui/Avatar.tsx
+++ b/apps/web/components/ui/Avatar.tsx
@@ -36,7 +36,7 @@ export default function Avatar(props: AvatarProps) {
   return title ? (
     <Tooltip.Tooltip delayDuration={300}>
       <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
-      <Tooltip.Content className="bg-brand text-brandcontrast rounded-sm p-2 text-sm shadow-sm">
+      <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white shadow-sm">
         <Tooltip.Arrow />
         {title}
       </Tooltip.Content>
diff --git a/apps/web/components/ui/AvatarGroup.tsx b/apps/web/components/ui/AvatarGroup.tsx
index c1320e1a..45fb0be6 100644
--- a/apps/web/components/ui/AvatarGroup.tsx
+++ b/apps/web/components/ui/AvatarGroup.tsx
@@ -4,8 +4,6 @@ import classNames from "@lib/classNames";
 
 import Avatar from "@components/ui/Avatar";
 
-// import * as Tooltip from "@radix-ui/react-tooltip";
-
 export type AvatarGroupProps = {
   size: number;
   truncateAfter?: number;
@@ -18,44 +16,17 @@ export type AvatarGroupProps = {
 };
 
 export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
-  /*  const truncatedAvatars: string[] =
-    props.items.length > props.truncateAfter
-      ? props.items
-          .slice(props.truncateAfter)
-          .map((item) => item.title)
-          .filter(Boolean)
-      : [];*/
-
   return (
-    <ul className={classNames("-rtl:space-x-reverse flex space-x-2 overflow-hidden", props.className)}>
+    <ul className={classNames(props.className)}>
       {props.items.slice(0, props.truncateAfter).map((item, idx) => {
         if (item.image != null) {
           return (
-            <li key={idx} className="inline-block">
+            <li key={idx} className="-mr-3 inline-block">
               <Avatar imageSrc={item.image} title={item.title} alt={item.alt || ""} size={props.size} />
             </li>
           );
         }
       })}
-      {/*props.items.length > props.truncateAfter && (
-        <li className="relative inline-block">
-          <Tooltip.Tooltip delayDuration="300">
-            <Tooltip.TooltipTrigger className="cursor-default">
-              <span className="w-16 absolute bottom-1.5 border-2 border-gray-300 flex-inline items-center text-white pt-4 text-2xl top-0 rounded-full block bg-neutral-600">+1</span>
-            </Tooltip.TooltipTrigger>
-            {truncatedAvatars.length !== 0 && (
-              <Tooltip.Content className="p-2 text-sm text-white rounded-sm shadow-sm bg-brand">
-                <Tooltip.Arrow />
-                <ul>
-                  {truncatedAvatars.map((title) => (
-                    <li key={title}>{title}</li>
-                  ))}
-                </ul>
-              </Tooltip.Content>
-            )}
-          </Tooltip.Tooltip>
-        </li>
-      )*/}
     </ul>
   );
 };