diff --git a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss index 58ba914d7..083b22e33 100644 --- a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss +++ b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.module.scss @@ -233,3 +233,18 @@ flex-direction: column; gap: 8px; } + +.moreButton { + all: unset; + cursor: pointer; + color: #374151; + font-size: 13px; + font-weight: 700; + display: inline-block; + padding: 2px 0; +} + +.moreButton:hover { + text-decoration: underline; + cursor: pointer; +} diff --git a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx index 7aa3bf2b4..afcffeda9 100644 --- a/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx +++ b/src/apps/calendar/src/lib/components/TeamCalendar/TeamCalendar.tsx @@ -81,6 +81,13 @@ export const TeamCalendar: FC = (props: TeamCalendarProps) => [isMobile], ) + const handleMoreClick = useCallback((e: React.MouseEvent) => { + if (isMobile) return // hover only matters on desktop + const dateKey = e.currentTarget.dataset.dateKey + if (!dateKey) return + setOpenDateKey(dateKey) + }, [isMobile]) + const monthDates = useMemo( () => getMonthDates(currentDate.getFullYear(), currentDate.getMonth()), [currentDate], @@ -132,7 +139,7 @@ export const TeamCalendar: FC = (props: TeamCalendarProps) => const leaveEntry = teamLeaveDates.find(item => item.date === dateKey) const users = leaveEntry?.usersOnLeave ?? [] const sortedUsers = [...users].sort(compareUsersByName) - const displayedUsers = sortedUsers.slice(0, 10) + const displayedUsers = sortedUsers.slice(0, 2) const overflowCount = sortedUsers.length - displayedUsers.length const weekendClass = isWeekend(date) ? styles.weekend : undefined @@ -191,7 +198,16 @@ export const TeamCalendar: FC = (props: TeamCalendarProps) => })} {overflowCount > 0 && (
- {`+${overflowCount} more`} +
)} @@ -202,7 +218,7 @@ export const TeamCalendar: FC = (props: TeamCalendarProps) => })} - {isMobile && openDateKey && (() => { + {openDateKey && (() => { const selectedDate = paddedDates.find(d => d && getDateKey(d) === openDateKey) if (!selectedDate) return undefined diff --git a/src/apps/engagements/src/components/assignment-card/AssignmentCard.module.scss b/src/apps/engagements/src/components/assignment-card/AssignmentCard.module.scss index f718651a3..cca913299 100644 --- a/src/apps/engagements/src/components/assignment-card/AssignmentCard.module.scss +++ b/src/apps/engagements/src/components/assignment-card/AssignmentCard.module.scss @@ -109,3 +109,24 @@ width: 100%; } } + +.applyMessage { + display: flex; + flex-direction: column; + gap: $sp-3; + padding: $sp-4; + border-radius: 8px; +} + +.signInLink { + display: inline-block; + width: fit-content; + font-size: 16px; + font-weight: 600; + color: var(--tc-primary); + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} \ No newline at end of file diff --git a/src/apps/engagements/src/components/assignment-card/AssignmentCard.tsx b/src/apps/engagements/src/components/assignment-card/AssignmentCard.tsx index 27b2ab46e..d85e92bd5 100644 --- a/src/apps/engagements/src/components/assignment-card/AssignmentCard.tsx +++ b/src/apps/engagements/src/components/assignment-card/AssignmentCard.tsx @@ -5,6 +5,7 @@ import remarkFrontmatter from 'remark-frontmatter' import remarkGfm from 'remark-gfm' import { Button, IconSolid } from '~/libs/ui' +import { EnvironmentConfig } from '~/config' import type { Engagement, EngagementAssignment } from '../../lib/models' import { formatDate, formatLocation, truncateText } from '../../lib/utils' @@ -58,6 +59,8 @@ interface AssignmentCardProps { onRejectOffer?: () => void onContactTalentManager: (contactEmail?: string) => void canContactTalentManager?: boolean + profileGateError?: string + profileHandle?: string } const DESCRIPTION_MAX_LENGTH = 160 @@ -154,6 +157,42 @@ const AssignmentCard: FC = (props: AssignmentCardProps) => const showAssignedActions = assignmentStatus === 'assigned' const showOfferActions = assignmentStatus === 'selected' + const renderOfferActions = ( + profileGateError?: string, + onAcceptOffer?: () => void, + onRejectOffer?: () => void, + actionButtonClass?: string, + ): JSX.Element | undefined => { + if ( + profileGateError + || !showOfferActions + || !onAcceptOffer + || !onRejectOffer + ) { + return undefined + } + + return ( + <> +