From c98bafcd5259b593504ed3a89cc31f0a542bced1 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Tue, 22 Nov 2022 12:04:06 +0000
Subject: [PATCH] fixed icon on booking page for link locations (#5634)

---
 .../booking/AvailableEventLocations.tsx       | 21 ++++++++++++-------
 .../components/booking/BookingDescription.tsx |  2 +-
 .../components/eventtype/EventSetupTab.tsx    |  4 ++--
 apps/web/public/globe.svg                     |  1 -
 apps/web/public/link.svg                      |  1 +
 packages/app-store/locations.ts               |  2 +-
 6 files changed, 18 insertions(+), 13 deletions(-)
 delete mode 100644 apps/web/public/globe.svg
 create mode 100644 apps/web/public/link.svg

diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/apps/web/components/booking/AvailableEventLocations.tsx
index 31dcada5e2..082ef1f441 100644
--- a/apps/web/components/booking/AvailableEventLocations.tsx
+++ b/apps/web/components/booking/AvailableEventLocations.tsx
@@ -1,5 +1,6 @@
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
+import { Icon } from "@calcom/ui";
 import Tooltip from "@calcom/ui/v2/core/Tooltip";
 
 import { Props } from "./pages/AvailabilityPage";
@@ -15,14 +16,18 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
         }
         return (
           <div key={location.type} className="flex flex-row items-center text-sm font-medium">
-            <img
-              src={eventLocationType.iconUrl}
-              className={classNames(
-                "mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
-                !eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
-              )}
-              alt={`${eventLocationType.label} icon`}
-            />
+            {eventLocationType.iconUrl === "/link.svg" ? (
+              <Icon.FiLink className="dark:text-darkgray-600 mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 " />
+            ) : (
+              <img
+                src={eventLocationType.iconUrl}
+                className={classNames(
+                  "mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
+                  !eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
+                )}
+                alt={`${eventLocationType.label} icon`}
+              />
+            )}
             <Tooltip content={locationKeyToString(location)}>
               <p className="truncate">{locationKeyToString(location)}</p>
             </Tooltip>
diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index eb721a51a8..1552965e9a 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -55,7 +55,7 @@ const BookingDescription: FC<Props> = (props) => {
       <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
         {eventType.title}
       </h1>
-      <div className="dark:text-darkgray-600 flex flex-col space-y-3 text-sm font-medium text-gray-600">
+      <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
         {eventType?.description && (
           <div
             className={classNames(
diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index 4285c0902e..12e229fd5f 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -138,10 +138,10 @@ export const EventSetupTab = (
                     <div key={index} className="flex flex-grow items-center">
                       <img
                         src={eventLocationType.iconUrl}
-                        className="h-6 w-6"
+                        className="h-4 w-4"
                         alt={`${eventLocationType.label} logo`}
                       />
-                      <span className="truncate text-sm ltr:ml-2 rtl:mr-2">
+                      <span className="truncate text-sm ltr:ml-1 rtl:mr-1">
                         {location[eventLocationType.defaultValueVariable] || eventLocationType.label}
                       </span>
                     </div>
diff --git a/apps/web/public/globe.svg b/apps/web/public/globe.svg
deleted file mode 100644
index 0a0586d367..0000000000
--- a/apps/web/public/globe.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
\ No newline at end of file
diff --git a/apps/web/public/link.svg b/apps/web/public/link.svg
new file mode 100644
index 0000000000..455a2d6a5c
--- /dev/null
+++ b/apps/web/public/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
\ No newline at end of file
diff --git a/packages/app-store/locations.ts b/packages/app-store/locations.ts
index 7c753113ab..d17747d9c3 100644
--- a/packages/app-store/locations.ts
+++ b/packages/app-store/locations.ts
@@ -91,7 +91,7 @@ export const defaultLocations: DefaultEventLocationType[] = [
     variable: "locationLink",
     messageForOrganizer: "Provide a Meeting Link",
     defaultValueVariable: "link",
-    iconUrl: "/globe.svg",
+    iconUrl: "/link.svg",
   },
   {
     default: true,