maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: location icon (#9994) 

Co-authored-by: Vinoth Kumar V <vinoth_kumar_v@Vinoths-MacBook-Pro.local>
This commit is contained in:
Vinoth Kumar V 2023-07-10 16:27:34 +05:30 committed by GitHub
parent 354d57f393
commit 045828d4ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/features/bookings/components/event-meta/Details.tsx
View File

@ -39,6 +39,7 @@ interface EventMetaProps {
highlight?: boolean;
contentClassName?: string;
className?: string;
isDark?: boolean;
}
/**
@ -62,6 +63,7 @@ export const EventMetaBlock = ({
highlight,
contentClassName,
className,
isDark
}: EventMetaProps) => {
if (!React.Children.count(children)) return null;
@ -77,8 +79,11 @@ export const EventMetaBlock = ({
src={Icon}
alt=""
// @TODO: Use SVG's instead of images, so we can get rid of the filter.
className="mr-2 mt-[2px] h-4 w-4 flex-shrink-0 [filter:invert(0.5)_brightness(0.5)] dark:[filter:invert(1)_brightness(0.9)]"
/>
className={classNames(
"mr-2 mt-[2px] h-4 w-4 flex-shrink-0",
isDark===undefined && "[filter:invert(0.5)_brightness(0.5)]",
(isDark===undefined || isDark) && "dark:[filter:invert(0.65)_brightness(0.9)]"
)}/>
) : (
<>{!!Icon && <Icon className="relative z-20 mr-2 mt-[2px] h-4 w-4 flex-shrink-0" />}</>
)}

23
packages/features/bookings/components/event-meta/Locations.tsx
View File

@ -2,6 +2,7 @@ import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/l
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Tooltip } from "@calcom/ui";
import { MapPin } from "@calcom/ui/components/icon";
import { classNames } from "@calcom/lib";
import type { PublicEvent } from "../../types";
import { EventMetaBlock } from "./Details";
@ -18,9 +19,11 @@ export const EventLocations = ({ event }: { event: PublicEvent }) => {
return translatedLocation;
};
const eventLocationType = getEventLocationType(locations[0].type);
const icon = (locations.length > 1 || !eventLocationType?.iconUrl) ? MapPin : eventLocationType.iconUrl;
return (
<EventMetaBlock icon={MapPin}>
<EventMetaBlock icon={icon} isDark={eventLocationType?.iconUrl?.includes("-dark")}>
{locations.length === 1 && (
<Tooltip content={getLocationToDisplay(locations[0])}>
<div className="" key={locations[0].type}>
@ -36,10 +39,20 @@ export const EventLocations = ({ event }: { event: PublicEvent }) => {
content={
<>
<p className="mb-2">{t("select_on_next_step")}</p>
<ul className="list-disc pl-3">
{locations.map((location) => (
<li key={location.type}>
<span>{getLocationToDisplay(location)}</span>
<ul className="pl-1">
{locations.map((location, index) => (
<li key={`${location.type}-${index}`} className="mt-1">
<div className="flex flex-row items-center">
<img
src={getEventLocationType(location.type)?.iconUrl}
className={classNames(
"h-3 w-3 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
!getEventLocationType(location.type)?.iconUrl?.startsWith("/app-store") ? "dark:invert-[.65]" : ""
)}
alt={`${getEventLocationType(location.type)?.label} icon`}
/>
<span>{getLocationToDisplay(location)}</span>
</div>
</li>
))}
</ul>