From 9e89f954e8568edcdb6a58c2e8cbc92b3695c175 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Wed, 23 Feb 2022 13:55:59 +0000
Subject: [PATCH] adding border to avatargroup based on the parent background
 color (#1954)

---
 apps/web/components/booking/pages/AvailabilityPage.tsx | 2 ++
 apps/web/components/booking/pages/BookingPage.tsx      | 1 +
 apps/web/components/ui/AvatarGroup.tsx                 | 3 ++-
 apps/web/pages/event-types/index.tsx                   | 1 +
 apps/web/pages/team/[slug].tsx                         | 1 +
 5 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index c8f426a3..507215d9 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -123,6 +123,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
               <div className="block p-4 sm:p-8 md:hidden">
                 <div className="flex items-center">
                   <AvatarGroup
+                    border="dark:border-gray-900 border-white"
                     items={
                       [
                         { image: profile.image, alt: profile.name, title: profile.name },
@@ -171,6 +172,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
                     (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
                   }>
                   <AvatarGroup
+                    border="dark:border-gray-900 border-white"
                     items={
                       [
                         { image: profile.image, alt: profile.name, title: profile.name },
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 2d327161..4855b058 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -288,6 +288,7 @@ const BookingPage = (props: BookingPageProps) => {
             <div className="px-4 py-5 sm:flex sm:p-4">
               <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-800">
                 <AvatarGroup
+                  border="border-white dark:border-gray-900"
                   size={14}
                   items={[{ image: props.profile.image || "", alt: props.profile.name || "" }].concat(
                     props.eventType.users
diff --git a/apps/web/components/ui/AvatarGroup.tsx b/apps/web/components/ui/AvatarGroup.tsx
index 45fb0be6..baabd2fd 100644
--- a/apps/web/components/ui/AvatarGroup.tsx
+++ b/apps/web/components/ui/AvatarGroup.tsx
@@ -5,6 +5,7 @@ import classNames from "@lib/classNames";
 import Avatar from "@components/ui/Avatar";
 
 export type AvatarGroupProps = {
+  border?: string; // this needs to be the color of the parent container background, i.e.: border-white dark:border-gray-900
   size: number;
   truncateAfter?: number;
   items: {
@@ -21,7 +22,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
       {props.items.slice(0, props.truncateAfter).map((item, idx) => {
         if (item.image != null) {
           return (
-            <li key={idx} className="-mr-3 inline-block">
+            <li key={idx} className={classNames("-mr-2 inline-block border-2", props.border)}>
               <Avatar imageSrc={item.image} title={item.title} alt={item.alt || ""} size={props.size} />
             </li>
           );
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 789d764e..37d190ae 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -159,6 +159,7 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                   <div className="flex items-center space-x-2 overflow-hidden rtl:space-x-reverse">
                     {type.users?.length > 1 && (
                       <AvatarGroup
+                        border="border-white"
                         size={8}
                         truncateAfter={4}
                         items={type.users.map((organizer) => ({
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 2535d301..290346be 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -42,6 +42,7 @@ function TeamPage({ team }: TeamPageProps) {
               </div>
               <div className="mt-1">
                 <AvatarGroup
+                  border="border-white"
                   truncateAfter={4}
                   className="flex-shrink-0"
                   size={10}