From 69888c57b000840826f5c725fc20ef28ec27cb22 Mon Sep 17 00:00:00 2001
From: Patel Divyesh <pateldivyesh1323@gmail.com>
Date: Thu, 7 Sep 2023 21:04:11 +0530
Subject: [PATCH] fix: Fixed SVG icons on light and dark mode (#11173)

---
 apps/web/components/eventtype/EventSetupTab.tsx          | 9 +--------
 apps/web/components/ui/form/LocationSelect.tsx           | 9 +--------
 .../components/event-meta/AvailableEventLocations.tsx    | 6 +-----
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index 2683fb764b..07a7d7d3b3 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -13,7 +13,6 @@ import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import cx from "@calcom/lib/classNames";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
@@ -302,13 +301,7 @@ export const EventSetupTab = (
                     <div className="flex items-center">
                       <img
                         src={eventLocationType.iconUrl}
-                        className={cx(
-                          "h-4 w-4",
-                          // invert all the icons except app icons
-                          eventLocationType.iconUrl &&
-                            eventLocationType.iconUrl.includes("-dark") &&
-                            "dark:invert"
-                        )}
+                        className="h-4 w-4 dark:invert-[.65]"
                         alt={`${eventLocationType.label} logo`}
                       />
                       <span className="ms-1 line-clamp-1 text-sm">{`${eventLabel} ${
diff --git a/apps/web/components/ui/form/LocationSelect.tsx b/apps/web/components/ui/form/LocationSelect.tsx
index b53218b40d..ee5cba8cf8 100644
--- a/apps/web/components/ui/form/LocationSelect.tsx
+++ b/apps/web/components/ui/form/LocationSelect.tsx
@@ -22,14 +22,7 @@ export type GroupOptionType = GroupBase<LocationOption>;
 const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
   return (
     <div className="flex items-center gap-3">
-      {icon && (
-        <img
-          src={icon}
-          alt="cover"
-          // invert all the icons except app icons
-          className={classNames(icon.includes("-dark") && "dark:invert", "h-3.5 w-3.5")}
-        />
-      )}
+      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5 dark:invert-[.65]" />}
       <span className={classNames("text-sm font-medium")}>{label}</span>
     </div>
   );
diff --git a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
index ea558419e0..34d84f24a4 100644
--- a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
+++ b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
@@ -21,11 +21,7 @@ function RenderIcon({
   return (
     <img
       src={eventLocationType.iconUrl}
-      className={classNames(
-        "me-[10px] h-4 w-4 opacity-70 dark:opacity-100",
-        eventLocationType.iconUrl?.includes("-dark") ? "dark:invert-[.65]" : "",
-        eventLocationType.iconUrl?.includes("-dark") && isTooltip && "invert"
-      )}
+      className="me-[10px] h-4 w-4 opacity-70 invert-[.65] dark:invert-0"
       alt={`${eventLocationType.label} icon`}
     />
   );