fix: inverted logos and new logo for cal video (#11633)

* new logo for cal video

* fixed cal video and other inverted icons

* Discard changes to apps/web/components/eventtype/EventAdvancedTab.tsx

* moved function to lib
pull/11668/head
Peer Richelsen 2023-10-02 11:36:37 +01:00 committed by GitHub
parent 032435fbd4
commit 07bfaec24e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 145 additions and 23 deletions

View File

@ -13,8 +13,10 @@ 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 { classNames } from "@calcom/lib";
import { CAL_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
import { md } from "@calcom/lib/markdownIt";
import { slugify } from "@calcom/lib/slugify";
import turndown from "@calcom/lib/turndownService";
@ -301,7 +303,10 @@ export const EventSetupTab = (
<div className="flex items-center">
<img
src={eventLocationType.iconUrl}
className="h-4 w-4 dark:invert-[.65]"
className={classNames(
"h-4 w-4",
classNames(invertLogoOnDark(eventLocationType.iconUrl))
)}
alt={`${eventLocationType.label} logo`}
/>
<span className="ms-1 line-clamp-1 text-sm">{`${eventLabel} ${

View File

@ -4,6 +4,7 @@ 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 invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
import { Select } from "@calcom/ui";
export type LocationOption = {
@ -22,7 +23,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" className="h-3.5 w-3.5 dark:invert-[.65]" />}
{icon && <img src={icon} alt="cover" className={classNames("h-3.5 w-3.5", invertLogoOnDark(icon))} />}
<span className={classNames("text-sm font-medium")}>{label}</span>
</div>
);

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 142 KiB

View File

@ -6,6 +6,7 @@ import type {
import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/locations";
import { classNames } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
import { Tooltip } from "@calcom/ui";
import { Link } from "@calcom/ui/components/icon";
@ -21,10 +22,7 @@ function RenderIcon({
return (
<img
src={eventLocationType.iconUrl}
className={classNames(
eventLocationType?.iconUrl?.includes("-dark") && "dark:invert",
"me-[10px] h-4 w-4"
)}
className={classNames(invertLogoOnDark(eventLocationType?.iconUrl), "me-[10px] h-4 w-4")}
alt={`${eventLocationType.label} icon`}
/>
);
@ -81,7 +79,7 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje
return (
<div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
{eventLocationType.iconUrl === "/link.svg" ? (
<Link className="text-default ml-[2px] h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
<Link className="text-default h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
) : (
<RenderIcon eventLocationType={eventLocationType} isTooltip={false} />
)}

View File

@ -0,0 +1,6 @@
// 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";
}