Merge branch '293-change-highlighting-of-unread-emails' into 'main'

Resolve "change highlighting of unread emails"

Closes #293, #237, and #292

See merge request inject/frontend!229

CHANGELOG.md

+2024-05-14 - improve new email highlighting
 2024-05-07 - add the option to add not team-visible addresses to the recipients list
 2024-05-07 - add exercise name, rework exercise panel add dialogs
 2024-05-07 - add learning objectives page to the instructor view

frontend/src/email/TeamEmails/EmailCard.tsx

 import useFormatTimestamp from '@/analyst/useFormatTimestamp'
 import { HIGHLIGHTED_COLOR } from '@/analyst/utilities'
 import FileViewRedirectButton from '@/components/FileViewRedirectButton'
-import { Classes, Icon, Section, SectionCard } from '@blueprintjs/core'
+import { Classes, Colors, Icon, Section, SectionCard } from '@blueprintjs/core'
 import type { Email } from '@inject/graphql/fragments/Email.generated'
 import { useWriteReadReceiptEmail } from '@inject/graphql/mutations/clientonly/WriteReadReceiptEmail.generated'
 import Timestamp from '@inject/shared/components/Timestamp'
 import type { FC } from 'react'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo } from 'react'
 
 interface EmailCardProps {
   exerciseId: string
@@ -25,21 +25,22 @@ const EmailCard: FC<EmailCardProps> = ({
 }) => {
   const formatTimestamp = useFormatTimestamp()
 
-  const [newIndicator, setNewIndicator] = useState(false)
+  // this ensures the message is rendered as 'not read' the first time it's rendered
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const initialReadReceipt = useMemo(() => email.readReceipt, [])
   const [mutate] = useWriteReadReceiptEmail({
     variables: { emailId: email.id },
   })
   useEffect(() => {
     if (!email.readReceipt) {
       mutate()
-      setNewIndicator(() => true)
     }
   }, [email.readReceipt, mutate])
 
   return (
     <Section
       style={{
-        background: newIndicator ? HIGHLIGHTED_COLOR : undefined,
+        background: initialReadReceipt ? undefined : HIGHLIGHTED_COLOR,
         overflow: 'unset',
       }}
       icon={
@@ -63,7 +64,16 @@ const EmailCard: FC<EmailCardProps> = ({
           {inAnalyst ? (
             formatTimestamp(email.timestamp)
           ) : (
-            <Timestamp minimal datetime={new Date(email.timestamp)} />
+            <Timestamp
+              minimal
+              datetime={new Date(email.timestamp)}
+              style={{
+                backgroundColor: initialReadReceipt
+                  ? `${Colors.GREEN3}4d`
+                  : `${Colors.ORANGE3}4d`,
+                alignSelf: 'center',
+              }}
+            />
           )}
         </span>
       }

frontend/src/email/TeamEmails/ThreadLogCard.tsx

 import useFormatTimestamp from '@/analyst/useFormatTimestamp'
 import { HIGHLIGHTED_COLOR, ellipsized } from '@/analyst/utilities'
-import { Card, Classes, Icon } from '@blueprintjs/core'
+import { Card, Classes, Colors, Icon } from '@blueprintjs/core'
 import type { Email } from '@inject/graphql/fragments/Email.generated'
 import type { EmailThread } from '@inject/graphql/fragments/EmailThread.generated'
 import { useWriteReadReceiptEmailThread } from '@inject/graphql/mutations/clientonly/WriteReadReceiptEmailThread.generated'
@@ -94,7 +94,16 @@ const ThreadLogCard: FC<ThreadLogCardProps> = ({
           {inAnalyst ? (
             formatTimestamp(lastEmail.timestamp)
           ) : (
-            <Timestamp minimal datetime={new Date(lastEmail.timestamp)} />
+            <Timestamp
+              minimal
+              datetime={new Date(lastEmail.timestamp)}
+              style={{
+                backgroundColor: emailThread.readReceipt
+                  ? `${Colors.GREEN3}4d`
+                  : `${Colors.ORANGE3}4d`,
+                alignSelf: 'center',
+              }}
+            />
           )}
         </span>
         <Icon icon='chevron-right' className={Classes.TEXT_MUTED} />