fix: dark mode icons for Riverside and Sirius Video (#11107)
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
parent
1a85f336c5
commit
6fd34af6f6
|
@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
|
|
||||||
import type { CredentialOwner } from "@calcom/app-store/types";
|
import type { CredentialOwner } from "@calcom/app-store/types";
|
||||||
|
import classNames from "@calcom/lib/classNames";
|
||||||
import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
|
import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
|
||||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
|
import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
|
||||||
|
@ -80,7 +81,13 @@ export default function AppListCard(props: AppListCardProps) {
|
||||||
return (
|
return (
|
||||||
<div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
|
<div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
|
||||||
<div className="flex items-center gap-x-3 px-5 py-4">
|
<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 grow flex-col gap-y-1 truncate">
|
||||||
<div className="flex items-center gap-x-2">
|
<div className="flex items-center gap-x-2">
|
||||||
<h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
|
<h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
|
||||||
|
|
|
@ -306,7 +306,7 @@ export const EventSetupTab = (
|
||||||
"h-4 w-4",
|
"h-4 w-4",
|
||||||
// invert all the icons except app icons
|
// invert all the icons except app icons
|
||||||
eventLocationType.iconUrl &&
|
eventLocationType.iconUrl &&
|
||||||
!eventLocationType.iconUrl.startsWith("/app-store") &&
|
eventLocationType.iconUrl.includes("-dark") &&
|
||||||
"dark:invert"
|
"dark:invert"
|
||||||
)}
|
)}
|
||||||
alt={`${eventLocationType.label} logo`}
|
alt={`${eventLocationType.label} logo`}
|
||||||
|
|
|
@ -4,7 +4,6 @@ import { components } from "react-select";
|
||||||
import type { EventLocationType } from "@calcom/app-store/locations";
|
import type { EventLocationType } from "@calcom/app-store/locations";
|
||||||
import type { CredentialDataWithTeamName } from "@calcom/app-store/utils";
|
import type { CredentialDataWithTeamName } from "@calcom/app-store/utils";
|
||||||
import { classNames } from "@calcom/lib";
|
import { classNames } from "@calcom/lib";
|
||||||
import cx from "@calcom/lib/classNames";
|
|
||||||
import { Select } from "@calcom/ui";
|
import { Select } from "@calcom/ui";
|
||||||
|
|
||||||
export type LocationOption = {
|
export type LocationOption = {
|
||||||
|
@ -28,7 +27,7 @@ const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
|
||||||
src={icon}
|
src={icon}
|
||||||
alt="cover"
|
alt="cover"
|
||||||
// invert all the icons except app icons
|
// 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>
|
<span className={classNames("text-sm font-medium")}>{label}</span>
|
||||||
|
@ -57,7 +56,13 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
|
||||||
}}
|
}}
|
||||||
formatOptionLabel={(e) => (
|
formatOptionLabel={(e) => (
|
||||||
<div className="flex items-center gap-3">
|
<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>
|
<span>{e.label}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -22,9 +22,9 @@ function RenderIcon({
|
||||||
<img
|
<img
|
||||||
src={eventLocationType.iconUrl}
|
src={eventLocationType.iconUrl}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"me-[10px] h-4 w-4 opacity-70 dark:opacity-100",
|
"me-[10px] h-4 w-4 opacity-70 dark:opacity-100",
|
||||||
!eventLocationType.iconUrl?.startsWith("/app-store") ? "dark:invert-[.65]" : "",
|
eventLocationType.iconUrl?.includes("-dark") ? "dark:invert-[.65]" : "",
|
||||||
!eventLocationType.iconUrl?.startsWith("/app-store") && isTooltip && "invert"
|
eventLocationType.iconUrl?.includes("-dark") && isTooltip && "invert"
|
||||||
)}
|
)}
|
||||||
alt={`${eventLocationType.label} icon`}
|
alt={`${eventLocationType.label} icon`}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -39535,4 +39535,4 @@ __metadata:
|
||||||
resolution: "zwitch@npm:2.0.4"
|
resolution: "zwitch@npm:2.0.4"
|
||||||
checksum: f22ec5fc2d5f02c423c93d35cdfa83573a3a3bd98c66b927c368ea4d0e7252a500df2a90a6b45522be536a96a73404393c958e945fdba95e6832c200791702b6
|
checksum: f22ec5fc2d5f02c423c93d35cdfa83573a3a3bd98c66b927c368ea4d0e7252a500df2a90a6b45522be536a96a73404393c958e945fdba95e6832c200791702b6
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
Loading…
Reference in New Issue
Block a user