Merge branch '316-instructor-emails-unresolved-threads-colors' into 'main' (72acf030) · Commits · INJECT / frontend

frontend/src/email/TeamEmails/EmailCard.tsx

+47 −7

Original line number	Diff line number	Diff line
		@@ -50,6 +50,41 @@ const section = css`
		const unread = css`
		background-color: ${Colors.GRAY1}26 !important;
		`
		const pendingEmail = css`
		border-color: ${Colors.ORANGE4}77;
		box-shadow:
		0 0 0 3px ${Colors.ORANGE4}30,
		0 2px 6px rgba(16, 22, 26, 0.1);

		.${Classes.SECTION_HEADER} {
		background-color: ${Colors.ORANGE3}1f;
		}

		.${Classes.DARK} & {
		border-color: ${Colors.ORANGE4}66;
		box-shadow: 0 0 0 1px ${Colors.ORANGE4}33;

		.${Classes.SECTION_HEADER} {
		background-color: ${Colors.ORANGE3}14;
		}
		}
		`

		const sectionCard = css`
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		`

		const pendingSectionCard = css`
		background-color: ${Colors.ORANGE4}1f;
		border-top: 1px solid ${Colors.ORANGE3}55;

		.${Classes.DARK} & {
		background-color: ${Colors.ORANGE3}14;
		border-top-color: ${Colors.ORANGE3}55;
		}
		`

		const rightElement = css`
		display: flex;
		@@ -136,6 +171,7 @@ export const EmailCard: FC<{
		])

		const definitionAddress = email.details.sender.definitionAddress
		const isPending = Boolean(teamId && !email.done)
		const llmEnabled = llmData?.exerciseId.llm ?? false
		const showAssessment = !!assessmentProps && llmEnabled
		const showDivider = !assessmentProps \|\| (!llmFetching && !llmEnabled)
		@@ -159,6 +195,7 @@ export const EmailCard: FC<{
		className={cx({
		[section]: true,
		[unread]: initialTimestampRead === null,
		[pendingEmail]: markDoneAvailable && isPending,
		})}
		icon={
		teamId && email.details.sender.team?.id === teamId ? (
		@@ -260,11 +297,9 @@ export const EmailCard: FC<{
		}
		>
		<SectionCard
		className={css`
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		`}
		className={cx(sectionCard, {
		[pendingSectionCard]: markDoneAvailable && isPending,
		})}
		>
		<RenderedContent
		exerciseId={exerciseId}
		@@ -287,13 +322,18 @@ export const EmailCard: FC<{
		<>
		{showDivider && <Divider />}
		<div className={buttonGroupRow}>
		<ButtonGroup>
		<Button icon='changes' onClick={MarkAsDoneAndNotify}>
		<ButtonGroup className={Classes.INTENT_WARNING}>
		<Button
		intent='warning'
		icon='changes'
		onClick={MarkAsDoneAndNotify}
		>
		{t('overview.todoList.markAsDone')}
		</Button>
		{overviewLink && (
		<LinkButton
		button={{
		intent: 'warning',
		icon: 'changes',
		onClick: MarkAsDoneAndNotify,
		text: (

frontend/src/email/TeamEmails/ThreadLog/ThreadLogCard.tsx

+48 −5

Original line number	Diff line number	Diff line
		@@ -14,14 +14,20 @@ const card = css`
		`

		const unread = css`
		background-color: ${Colors.GRAY1}26 !important;
		border: 1px solid ${Colors.BLUE3} !important;
		border-left: 4px solid ${Colors.BLUE4} !important;

		.bp5-dark & {
		background-color: ${Colors.ORANGE5}26 !important;
		.${Classes.DARK} & {
		border-color: ${Colors.BLUE3} !important;
		border-left-color: ${Colors.BLUE4} !important;
		}

		&:hover {
		background-color: ${Colors.GRAY3}26 !important;
		background-color: ${Colors.LIGHT_GRAY4} !important;
		}

		.${Classes.DARK} &:hover {
		background-color: ${Colors.DARK_GRAY1} !important;
		}
		`

		@@ -41,12 +47,39 @@ const timestamp = css`
		}
		`

		const unreadSubject = css`
		color: ${Colors.BLUE3};

		.${Classes.DARK} & {
		color: ${Colors.BLUE4};
		}
		`

		const pending = css`
		background-color: ${Colors.ORANGE3}26 !important;

		&:hover {
		background-color: ${Colors.ORANGE4}26 !important;
		}

		.${Classes.DARK} & {
		background-color: ${Colors.ORANGE3}26 !important;
		border-color: ${Colors.ORANGE3}66 !important;
		box-shadow: 0 0 0 1px ${Colors.ORANGE4}33;

		&:hover {
		background-color: ${Colors.ORANGE3}2e !important;
		}
		}
		`

		interface ThreadLogCardProps {
		emailThread: ExtendedEmailThread
		teamId: string
		isSelected?: boolean
		onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
		inAnalyst?: boolean
		markDoneAvailable: boolean
		}

		const ThreadLogCard: FC<ThreadLogCardProps> = ({
		@@ -55,6 +88,7 @@ const ThreadLogCard: FC<ThreadLogCardProps> = ({
		isSelected,
		onClick,
		inAnalyst,
		markDoneAvailable,
		}) => {
		const { t } = useTranslationFrontend()

		@@ -62,6 +96,11 @@ const ThreadLogCard: FC<ThreadLogCardProps> = ({

		const { lastEmailBiased } = emailThread

		const isPending = useMemo(
		() => emailThread.emails?.some(email => !email.done),
		[emailThread.emails]
		)

		const isUnread = useMemo(
		() => emailThread.emails?.some(email => !email.timestampRead),
		[emailThread.emails]
		@@ -80,6 +119,7 @@ const ThreadLogCard: FC<ThreadLogCardProps> = ({
		<Card
		className={cx({
		[card]: true,
		[pending]: markDoneAvailable && isPending && !isSelected,
		[unread]: !inAnalyst && isUnread,
		[selected]: isSelected,
		})}
		@@ -128,7 +168,10 @@ const ThreadLogCard: FC<ThreadLogCardProps> = ({
		className={cx(
		Classes.HEADING,
		Classes.SECTION_HEADER_TITLE,
		ellipsized
		ellipsized,
		{
		[unreadSubject]: !inAnalyst && isUnread,
		}
		)}
		>
		{(lastEmailBiased.details.content.attachments.length \|\| 0) > 0 && (

frontend/src/email/TeamEmails/ThreadLog/ThreadLogCards.tsx

+3 −0

Original line number	Diff line number	Diff line
		@@ -11,6 +11,7 @@ interface ThreadLogCardsProps {
		selectedEmailThreadId?: string
		onClick: (emailThread: EmailThreadChecked) => void
		inAnalyst?: boolean
		markDoneAvailable?: boolean
		}

		export const ThreadLogCards: FC<ThreadLogCardsProps> = ({
		@@ -20,6 +21,7 @@ export const ThreadLogCards: FC<ThreadLogCardsProps> = ({
		selectedEmailThreadId,
		onClick,
		inAnalyst = false,
		markDoneAvailable = false,
		}) => (
		<CardList
		bordered={false}
		@@ -37,6 +39,7 @@ export const ThreadLogCards: FC<ThreadLogCardsProps> = ({
		isSelected={emailThread.id === selectedEmailThreadId}
		onClick={() => onClick(emailThread)}
		inAnalyst={inAnalyst}
		markDoneAvailable={markDoneAvailable}
		/>
		))
		) : (

frontend/src/routes/_protected/instructor/$exerciseId/$teamId/email/$tab/route.tsx

+1 −0

Original line number	Diff line number	Diff line
		@@ -179,6 +179,7 @@ const RouteComponent = () => {
		},
		})
		}}
		markDoneAvailable
		selectedEmailThreadId={threadId}
		/>
		</div>