fix: logo lack of contrast (calcom#12401)

Co-authored-by: Peer Richelsen <[email protected]>
hm-edu · Nov 17, 2023 · 176564f · 176564f
1 parent 27d59b6
commit 176564f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx b/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`}
     />
   );

diff --git a/packages/lib/invertLogoOnDark.ts b/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"
+    : "";
 }