diff --git a/packages/web/src/common/calendar-grid/components/CalendarEventCard.test.tsx b/packages/web/src/common/calendar-grid/components/CalendarEventCard.test.tsx index 6d233b8bf..56705e12d 100644 --- a/packages/web/src/common/calendar-grid/components/CalendarEventCard.test.tsx +++ b/packages/web/src/common/calendar-grid/components/CalendarEventCard.test.tsx @@ -1,5 +1,6 @@ import { fireEvent, render, screen } from "@testing-library/react"; import { Priorities } from "@core/constants/core.constants"; +import { gridColorByPriority } from "@web/common/styles/theme.util"; import { type Schema_GridEvent } from "@web/common/types/web.event.types"; import { describe, expect, it, mock } from "bun:test"; import "@testing-library/jest-dom"; @@ -89,6 +90,31 @@ describe("CalendarEventCard", () => { expect(onEventMouseDown).not.toHaveBeenCalled(); }); + it("keeps the timed selected state on the priority color", () => { + render( + , + ); + + const card = screen.getByRole("button", { + name: "Timed event: Planning block, 9 - 10 AM", + }); + + expect(card).toHaveClass("bg-(--event-bg)"); + expect(card).not.toHaveClass("bg-event-selected"); + expect(card.style.getPropertyValue("--event-bg")).toBe( + gridColorByPriority[Priorities.WORK], + ); + expect(card.style.boxShadow).toContain("rgba(255,255,255,0.55)"); + }); + it("does not open pending timed events from the keyboard", () => { const onEventKeyDown = mock(); diff --git a/packages/web/src/common/calendar-grid/components/CalendarTimedEventCard.tsx b/packages/web/src/common/calendar-grid/components/CalendarTimedEventCard.tsx index 7fe747a1d..25471a0cf 100644 --- a/packages/web/src/common/calendar-grid/components/CalendarTimedEventCard.tsx +++ b/packages/web/src/common/calendar-grid/components/CalendarTimedEventCard.tsx @@ -106,6 +106,7 @@ const CalendarTimedEventCardBase = ( const baseColor = gridColorByPriority[priority]; const draftColor = darken(baseColor, 18); const hoverColor = gridHoverColorByPriority[priority]; + const selectedBoxShadow = "0 0 0 1px rgba(255,255,255,0.55)"; const bgColor = (() => { if (isDraft) return draftColor; @@ -113,6 +114,11 @@ const CalendarTimedEventCardBase = ( if (isResizing || isDragging) return brighten(baseColor); return baseColor; })(); + const eventBoxShadow = isSelected + ? boxShadow + ? `${selectedBoxShadow}, ${boxShadow}` + : selectedBoxShadow + : boxShadow; const hoverBgColor = !isDraft && !isPlaceholder && !isResizing @@ -139,7 +145,7 @@ const CalendarTimedEventCardBase = ( top: position.top, width: position.width || 0, zIndex: position.zIndex ?? ZIndex.LAYER_1, - boxShadow, + boxShadow: eventBoxShadow, filter: isDraft ? "drop-shadow(2px 4px 4px black)" : isInPast @@ -201,9 +207,7 @@ const CalendarTimedEventCardBase = ( tabIndex={0} className={cn( "absolute min-h-2.5 select-none overflow-hidden rounded-xs pr-0.75 pl-1.25 transition-[background-color,filter] duration-[260ms] ease-[cubic-bezier(0.16,1,0.3,1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary", - isSelected - ? "bg-event-selected shadow-[0_4px_10px_-4px_#00000080]" - : "bg-(--event-bg) hover:bg-(--event-hover-bg)", + "bg-(--event-bg) hover:bg-(--event-hover-bg)", { "animate-someday-commit-acknowledge": isCommitAcknowledged, }, diff --git a/packages/web/src/common/styles/theme-css.test.ts b/packages/web/src/common/styles/theme-css.test.ts index 3155eaa39..b70272b97 100644 --- a/packages/web/src/common/styles/theme-css.test.ts +++ b/packages/web/src/common/styles/theme-css.test.ts @@ -13,7 +13,6 @@ const semanticColorTokens = [ "border-secondary", "date-picker-outside-dark", "date-picker-outside-light", - "event-selected", "fg-primary", "fg-primary-dark", "gradient-accent-light-start", diff --git a/packages/web/src/index.css b/packages/web/src/index.css index d1295d433..974faf1df 100644 --- a/packages/web/src/index.css +++ b/packages/web/src/index.css @@ -14,7 +14,6 @@ --compass-color-border-primary: hsl(219 18 34 / 20%); --compass-color-border-primary-dark: hsl(0 0 0 / 50.2%); --compass-color-border-secondary: hsl(47 7 73); - --compass-color-event-selected: hsl(206 18 72); --compass-color-date-picker-outside-dark: hsl(47 7 63); --compass-color-date-picker-outside-light: hsl(222 12 17); --compass-color-fg-primary: hsl(47 7 73); @@ -63,7 +62,6 @@ --color-border-primary: var(--compass-color-border-primary); --color-border-primary-dark: var(--compass-color-border-primary-dark); --color-border-secondary: var(--compass-color-border-secondary); - --color-event-selected: var(--compass-color-event-selected); --color-date-picker-outside-dark: var( --compass-color-date-picker-outside-dark );