fix: dark mode icons for Riverside and Sirius Video (#11107)

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

apps/web/components/AppListCard.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 
 import type { CredentialOwner } from "@calcom/app-store/types";
+import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
@@ -80,7 +81,13 @@ export default function AppListCard(props: AppListCardProps) {
   return (
     <div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
       <div className="flex items-center gap-x-3 px-5 py-4">
-        {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
+        {logo ? (
+          <img
+            className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10")}
+            src={logo}
+            alt={`${title} logo`}
+          />
+        ) : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">
             <h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>

apps/web/components/eventtype/EventSetupTab.tsx

@@ -306,7 +306,7 @@ export const EventSetupTab = (
                           "h-4 w-4",
                           // invert all the icons except app icons
                           eventLocationType.iconUrl &&
-                            !eventLocationType.iconUrl.startsWith("/app-store") &&
+                            eventLocationType.iconUrl.includes("-dark") &&
                             "dark:invert"
                         )}
                         alt={`${eventLocationType.label} logo`}

apps/web/components/ui/form/LocationSelect.tsx

@@ -4,7 +4,6 @@ import { components } from "react-select";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import type { CredentialDataWithTeamName } from "@calcom/app-store/utils";
 import { classNames } from "@calcom/lib";
-import cx from "@calcom/lib/classNames";
 import { Select } from "@calcom/ui";
 
 export type LocationOption = {
@@ -28,7 +27,7 @@ const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
           src={icon}
           alt="cover"
           // invert all the icons except app icons
-          className={cx("h-3.5 w-3.5", icon && !icon.startsWith("/app-store") && "dark:invert")}
+          className={classNames(icon.includes("-dark") && "dark:invert", "h-3.5 w-3.5")}
         />
       )}
       <span className={classNames("text-sm font-medium")}>{label}</span>
@@ -57,7 +56,13 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
       }}
       formatOptionLabel={(e) => (
         <div className="flex items-center gap-3">
-          {e.icon && <img src={e.icon} alt="app-icon" className="h-5 w-5" />}
+          {e.icon && (
+            <img
+              src={e.icon}
+              alt="app-icon"
+              className={classNames(e.icon.includes("-dark") && "dark:invert", "h-5 w-5")}
+            />
+          )}
           <span>{e.label}</span>
         </div>
       )}

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

@@ -22,9 +22,9 @@ function RenderIcon({
     <img
       src={eventLocationType.iconUrl}
       className={classNames(
-        "me-[10px]  h-4 w-4 opacity-70 dark:opacity-100",
-        !eventLocationType.iconUrl?.startsWith("/app-store") ? "dark:invert-[.65]" : "",
-        !eventLocationType.iconUrl?.startsWith("/app-store") && isTooltip && "invert"
+        "me-[10px] h-4 w-4 opacity-70 dark:opacity-100",
+        eventLocationType.iconUrl?.includes("-dark") ? "dark:invert-[.65]" : "",
+        eventLocationType.iconUrl?.includes("-dark") && isTooltip && "invert"
       )}
       alt={`${eventLocationType.label} icon`}
     />