From 045828d4ab640ac829f3ef8d798623ec939ebe8f Mon Sep 17 00:00:00 2001
From: Vinoth Kumar V <123581387+VinoV1999@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:27:34 +0530
Subject: [PATCH] fix: location icon (#9994)

Co-authored-by: Vinoth Kumar V <vinoth_kumar_v@Vinoths-MacBook-Pro.local>
---
 .../components/event-meta/Details.tsx         |  9 ++++++--
 .../components/event-meta/Locations.tsx       | 23 +++++++++++++++----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/features/bookings/components/event-meta/Details.tsx b/packages/features/bookings/components/event-meta/Details.tsx
index 60018b92a6..e84401fdf1 100644
--- a/packages/features/bookings/components/event-meta/Details.tsx
+++ b/packages/features/bookings/components/event-meta/Details.tsx
@@ -39,6 +39,7 @@ interface EventMetaProps {
   highlight?: boolean;
   contentClassName?: string;
   className?: string;
+  isDark?: boolean;
 }
 
 /**
@@ -62,6 +63,7 @@ export const EventMetaBlock = ({
   highlight,
   contentClassName,
   className,
+  isDark
 }: EventMetaProps) => {
   if (!React.Children.count(children)) return null;
 
@@ -77,8 +79,11 @@ export const EventMetaBlock = ({
           src={Icon}
           alt=""
           // @TODO: Use SVG's instead of images, so we can get rid of the filter.
-          className="mr-2 mt-[2px] h-4 w-4 flex-shrink-0 [filter:invert(0.5)_brightness(0.5)] dark:[filter:invert(1)_brightness(0.9)]"
-        />
+          className={classNames(
+            "mr-2 mt-[2px] h-4 w-4 flex-shrink-0",
+            isDark===undefined && "[filter:invert(0.5)_brightness(0.5)]",
+            (isDark===undefined || isDark) && "dark:[filter:invert(0.65)_brightness(0.9)]"
+          )}/>
       ) : (
         <>{!!Icon && <Icon className="relative z-20 mr-2 mt-[2px] h-4 w-4 flex-shrink-0" />}</>
       )}
diff --git a/packages/features/bookings/components/event-meta/Locations.tsx b/packages/features/bookings/components/event-meta/Locations.tsx
index 61b67aa987..1e9709b0c1 100644
--- a/packages/features/bookings/components/event-meta/Locations.tsx
+++ b/packages/features/bookings/components/event-meta/Locations.tsx
@@ -2,6 +2,7 @@ import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/l
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip } from "@calcom/ui";
 import { MapPin } from "@calcom/ui/components/icon";
+import { classNames } from "@calcom/lib";
 
 import type { PublicEvent } from "../../types";
 import { EventMetaBlock } from "./Details";
@@ -18,9 +19,11 @@ export const EventLocations = ({ event }: { event: PublicEvent }) => {
 
     return translatedLocation;
   };
+  const eventLocationType = getEventLocationType(locations[0].type);
+  const icon = (locations.length > 1 || !eventLocationType?.iconUrl) ? MapPin : eventLocationType.iconUrl;
 
   return (
-    <EventMetaBlock icon={MapPin}>
+    <EventMetaBlock icon={icon} isDark={eventLocationType?.iconUrl?.includes("-dark")}>
       {locations.length === 1 && (
         <Tooltip content={getLocationToDisplay(locations[0])}>
           <div className="" key={locations[0].type}>
@@ -36,10 +39,20 @@ export const EventLocations = ({ event }: { event: PublicEvent }) => {
             content={
               <>
                 <p className="mb-2">{t("select_on_next_step")}</p>
-                <ul className="list-disc pl-3">
-                  {locations.map((location) => (
-                    <li key={location.type}>
-                      <span>{getLocationToDisplay(location)}</span>
+                <ul className="pl-1">
+                  {locations.map((location, index) => (
+                    <li key={`${location.type}-${index}`} className="mt-1">
+                      <div className="flex flex-row items-center">
+                        <img
+                            src={getEventLocationType(location.type)?.iconUrl}
+                            className={classNames(
+                              "h-3 w-3 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
+                              !getEventLocationType(location.type)?.iconUrl?.startsWith("/app-store") ? "dark:invert-[.65]" : ""
+                            )}
+                            alt={`${getEventLocationType(location.type)?.label} icon`}
+                          />
+                        <span>{getLocationToDisplay(location)}</span>
+                      </div>
                     </li>
                   ))}
                 </ul>