fix: platform booker icons and styling (#18276)

Author: ThyMinimalDev

packages/features/bookings/components/event-meta/AvailableEventLocations.tsx

@@ -21,19 +21,9 @@ function RenderIcon({
 }) {
   const isPlatform = useIsPlatform();
 
-  if (isPlatform) {
-    if (eventLocationType.type === "conferencing") return <Icon name="video" className="me-[10px] h-4 w-4" />;
-    if (eventLocationType.type === "attendeeInPerson" || eventLocationType.type === "inPerson")
-      return <Icon name="map-pin" className="me-[10px] h-4 w-4" />;
-    if (eventLocationType.type === "phone" || eventLocationType.type === "userPhone")
-      return <Icon name="phone" className="me-[10px] h-4 w-4" />;
-    if (eventLocationType.type === "link") return <Icon name="link" className="me-[10px] h-4 w-4" />;
-    return <Icon name="book-user" className="me-[10px] h-4 w-4" />;
-  }
-
   return (
     <img
-      src={eventLocationType.iconUrl}
+      src={`${isPlatform ? process.env.NEXT_PUBLIC_WEBAPP_URL : ""}${eventLocationType.iconUrl}`}
       className={classNames(invertLogoOnDark(eventLocationType?.iconUrl, isTooltip), "me-[10px] h-4 w-4")}
       alt={`${eventLocationType.label} icon`}
     />

packages/platform/atoms/globals.css

@@ -90,6 +90,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
         {!bookingTitle && eventTypeSlug && !rescheduleUid && (
           <>
             <Booker
+              bannerUrl="https://i0.wp.com/mahala.co.uk/wp-content/uploads/2014/12/img_banner-thin_mountains.jpg?fit=800%2C258&ssl=1"
               eventSlug={eventTypeSlug}
               onCreateBookingSuccess={(data) => {
                 setBookingTitle(data.data.title ?? "");
@@ -130,6 +131,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
               router.push(`/${data.data.uid}`);
             }}
             duration={eventTypeDuration}
+            bannerUrl="https://i0.wp.com/mahala.co.uk/wp-content/uploads/2014/12/img_banner-thin_mountains.jpg?fit=800%2C258&ssl=1"
           />
         )}
         {bookingTitle && <p>Booking created: {bookingTitle}</p>}