fix: logo lack of contrast (#12401)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

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

@@ -22,7 +22,7 @@ function RenderIcon({
   return (
     <img
       src={eventLocationType.iconUrl}
-      className={classNames(invertLogoOnDark(eventLocationType?.iconUrl), "me-[10px] h-4 w-4")}
+      className={classNames(invertLogoOnDark(eventLocationType?.iconUrl, true), "me-[10px] h-4 w-4")}
       alt={`${eventLocationType.label} icon`}
     />
   );

packages/lib/invertLogoOnDark.ts

@@ -1,6 +1,15 @@
 // we want to invert all logos that contain -dark in their name
 // we don't want to invert logos that are not coming from the app-store
 
-export default function invertLogoOnDark(url?: string) {
-  return (url?.includes("-dark") || !url?.startsWith("/app-store")) && "dark:invert";
+export default function invertLogoOnDark(
+  url?: string,
+  // The background color of the logo's display location is opposite of the general theme of the application.
+  // Ex. General App theme is black but the logo's background color is white.
+  opposite?: boolean
+) {
+  return url?.includes("-dark") || !url?.startsWith("/app-store")
+    ? opposite
+      ? "invert dark:invert-0"
+      : "dark:invert"
+    : "";
 }