adding border to avatargroup based on the parent background color (#1954)

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 },

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

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>
           );

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) => ({

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}