diff --git a/src/components/Event/EventChip/EventChip.tsx b/src/components/Event/EventChip/EventChip.tsx index fc73da7..f599629 100644 --- a/src/components/Event/EventChip/EventChip.tsx +++ b/src/components/Event/EventChip/EventChip.tsx @@ -94,13 +94,16 @@ export function EventChip({ const titleStyle = getTitleStyle( bestColor, ownerAttendee?.partstat, - calendar + calendar, + isPrivate ); + const cardStyle = getCardStyle( bestColor, eventLength, ownerAttendee?.partstat, - calendar + calendar, + isPrivate ); // Organizer avatar diff --git a/src/components/Event/EventChip/EventChipUtils.tsx b/src/components/Event/EventChip/EventChipUtils.tsx index 041247b..404fb8d 100644 --- a/src/components/Event/EventChip/EventChipUtils.tsx +++ b/src/components/Event/EventChip/EventChipUtils.tsx @@ -56,7 +56,8 @@ export function getOwnerAttendee( export function getTitleStyle( bestColor: string, partstat?: string, - calendar?: Calendar + calendar?: Calendar, + isPrivate?: boolean ): React.CSSProperties { const baseStyle: React.CSSProperties = { fontFamily: "Roboto", @@ -82,6 +83,9 @@ export function getTitleStyle( case "NEEDS-ACTION": return baseStyle; default: + if (isPrivate) { + return { ...baseStyle, color: calendar?.color?.dark }; + } return baseStyle; } } @@ -126,7 +130,8 @@ export function getCardStyle( bestColor: string, eventLength: number, partstat?: string, - calendar?: Calendar + calendar?: Calendar, + isPrivate?: boolean ): React.CSSProperties { const baseStyle: React.CSSProperties = getCardVariantStyle( getEventVariant(eventLength), @@ -156,6 +161,14 @@ export function getCardStyle( border: "1px solid white", }; default: + if (isPrivate) { + return { + ...baseStyle, + backgroundColor: calendar?.color?.light, + color: calendar?.color?.dark, + border: "1px solid white", + }; + } return baseStyle; } }