From 07bfaec24e666a4bc1c357b9f8acdf85392f435b Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Mon, 2 Oct 2023 11:36:37 +0100 Subject: [PATCH] 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 --- .../components/eventtype/EventSetupTab.tsx | 7 +- .../web/components/ui/form/LocationSelect.tsx | 3 +- packages/app-store/dailyvideo/static/icon.svg | 144 ++++++++++++++++-- .../event-meta/AvailableEventLocations.tsx | 8 +- packages/lib/invertLogoOnDark.ts | 6 + 5 files changed, 145 insertions(+), 23 deletions(-) create mode 100644 packages/lib/invertLogoOnDark.ts diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx index e210cf4eaf..27a7ec8409 100644 --- a/apps/web/components/eventtype/EventSetupTab.tsx +++ b/apps/web/components/eventtype/EventSetupTab.tsx @@ -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 = (
{`${eventLocationType.label} {`${eventLabel} ${ diff --git a/apps/web/components/ui/form/LocationSelect.tsx b/apps/web/components/ui/form/LocationSelect.tsx index ee5cba8cf8..5eed7c3b8e 100644 --- a/apps/web/components/ui/form/LocationSelect.tsx +++ b/apps/web/components/ui/form/LocationSelect.tsx @@ -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; const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => { return (
- {icon && cover} + {icon && cover} {label}
); diff --git a/packages/app-store/dailyvideo/static/icon.svg b/packages/app-store/dailyvideo/static/icon.svg index 9658979017..2796f9f004 100644 --- a/packages/app-store/dailyvideo/static/icon.svg +++ b/packages/app-store/dailyvideo/static/icon.svg @@ -1,17 +1,129 @@ - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx index 18f2a2064e..9834126e70 100644 --- a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx +++ b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx @@ -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 ( {`${eventLocationType.label} ); @@ -81,7 +79,7 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje return (
{eventLocationType.iconUrl === "/link.svg" ? ( - + ) : ( )} diff --git a/packages/lib/invertLogoOnDark.ts b/packages/lib/invertLogoOnDark.ts new file mode 100644 index 0000000000..13aa216a95 --- /dev/null +++ b/packages/lib/invertLogoOnDark.ts @@ -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"; +}