Merge branch 'main' into enable-hard-mode

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -123,7 +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"
+                    border="border-2 dark:border-gray-900 border-white"
                     items={
                       [
                         { image: profile.image, alt: profile.name, title: profile.name },
@@ -172,7 +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"
+                    border="border-2 dark:border-gray-900 border-white"
                     items={
                       [
                         { image: profile.image, alt: profile.name, title: profile.name },

apps/web/components/booking/pages/BookingPage.tsx

@@ -288,7 +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"
+                  border="border-2 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

@@ -22,8 +22,14 @@ 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={classNames("-mr-2 inline-block border-2", props.border)}>
-              <Avatar imageSrc={item.image} title={item.title} alt={item.alt || ""} size={props.size} />
+            <li key={idx} className="-mr-2 inline-block">
+              <Avatar
+                className={props.border}
+                imageSrc={item.image}
+                title={item.title}
+                alt={item.alt || ""}
+                size={props.size}
+              />
             </li>
           );
         }

apps/web/pages/event-types/index.tsx

@@ -159,7 +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"
+                        border="border-2 border-white"
                         size={8}
                         truncateAfter={4}
                         items={type.users.map((organizer) => ({

apps/web/pages/team/[slug].tsx

@@ -42,7 +42,7 @@ function TeamPage({ team }: TeamPageProps) {
               </div>
               <div className="mt-1">
                 <AvatarGroup
-                  border="border-white"
+                  border="border-2 border-white"
                   truncateAfter={4}
                   className="flex-shrink-0"
                   size={10}