From 6e827190c525c76345a2d10f1af93d31a93d8d0c Mon Sep 17 00:00:00 2001
From: Jay Kim <76601570+yeonkim1213@users.noreply.github.com>
Date: Wed, 27 May 2026 21:18:38 -0600
Subject: [PATCH 1/4] Fix reject participant button - participant count, gap

---
 .../ParticipantRejectModal.tsx                | 91 ++++++++++---------
 1 file changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/analysis/individualStudy/ParticipantRejectModal.tsx b/src/analysis/individualStudy/ParticipantRejectModal.tsx
index 263919fb55..e1f5af7c3d 100644
--- a/src/analysis/individualStudy/ParticipantRejectModal.tsx
+++ b/src/analysis/individualStudy/ParticipantRejectModal.tsx
@@ -1,5 +1,5 @@
 import {
-  Modal, Text, TextInput, Flex, Button, Alert, Tooltip,
+  Modal, Text, TextInput, Flex, Button, Alert, Tooltip, Group,
 } from '@mantine/core';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import {
@@ -106,26 +106,30 @@ export function ParticipantRejectModal({
 
   return (
     <>
-      {rejectedParticipantsCount > 0 && (
-      <Tooltip label="Only admins can undo rejection" disabled={user.isAdmin}>
-        <Button disabled={!user.isAdmin} onClick={() => setModalUndoRejectOpened(true)} color="blue">
-          Undo Reject
-          {!footer ? ` Participants (${rejectedParticipantsCount})` : ''}
-        </Button>
-      </Tooltip>
-      )}
-      {nonRejectedParticipantsCount > 0 && (
-      <Tooltip label="Only admins can reject participants" disabled={user.isAdmin}>
-        <Button disabled={!user.isAdmin} onClick={() => setModalRejectOpened(true)} color="red">
-          Reject
-          {!footer ? ` Participants (${nonRejectedParticipantsCount})` : ''}
-        </Button>
-      </Tooltip>
+      {(rejectedParticipantsCount > 0 || nonRejectedParticipantsCount > 0) && (
+        <Group gap="xs">
+          {rejectedParticipantsCount > 0 && (
+            <Tooltip label="Only admins can undo rejection" disabled={user.isAdmin}>
+              <Button disabled={!user.isAdmin} onClick={() => setModalUndoRejectOpened(true)} color="blue">
+                Undo Reject
+                {!footer ? ` Participant${rejectedParticipantsCount === 1 ? '' : 's'} (${rejectedParticipantsCount})` : ''}
+              </Button>
+            </Tooltip>
+          )}
+          {nonRejectedParticipantsCount > 0 && (
+            <Tooltip label="Only admins can reject participants" disabled={user.isAdmin}>
+              <Button disabled={!user.isAdmin} onClick={() => setModalRejectOpened(true)} color="red">
+                Reject
+                {!footer ? ` Participant${nonRejectedParticipantsCount === 1 ? '' : 's'} (${nonRejectedParticipantsCount})` : ''}
+              </Button>
+            </Tooltip>
+          )}
+        </Group>
       )}
       <Modal
         opened={modalRejectOpened}
         onClose={() => setModalRejectOpened(false)}
-        title={nonRejectedParticipantsCount > 0 ? `Reject Participants (${nonRejectedParticipantsCount})` : 'Reject Participant'}
+        title={`Reject Participant${nonRejectedParticipantsCount === 1 ? '' : 's'} (${nonRejectedParticipantsCount})`}
       >
         <Alert
           icon={<IconAlertTriangle size={16} />}
@@ -134,25 +138,25 @@ export function ParticipantRejectModal({
           mb="md"
         >
           {currentAndSelectedParticipants.length > 0 && rejectedParticipantsCount > 0 && (
-          <>
-            {rejectedParticipantsCount}
-            {' '}
-            of your
-            {' '}
-            {currentAndSelectedParticipants.length}
-            {' '}
-            selected participant
-            {currentAndSelectedParticipants.length === 1 ? '' : 's'}
-            {' '}
-            {rejectedParticipantsCount === 1 ? 'has' : 'have'}
-            {' '}
-            already been rejected. Clicking reject participants will now reject the other
-            {' '}
-            {nonRejectedParticipantsCount}
-            .
-            <br />
-            <br />
-          </>
+            <>
+              {rejectedParticipantsCount}
+              {' '}
+              of your
+              {' '}
+              {currentAndSelectedParticipants.length}
+              {' '}
+              selected participant
+              {currentAndSelectedParticipants.length === 1 ? '' : 's'}
+              {' '}
+              {rejectedParticipantsCount === 1 ? 'has' : 'have'}
+              {' '}
+              already been rejected. Clicking reject participants will now reject the other
+              {' '}
+              {nonRejectedParticipantsCount}
+              .
+              <br />
+              <br />
+            </>
           )}
           When participants are rejected, their sequences will be reassigned to other participants.
         </Alert>
@@ -165,7 +169,7 @@ export function ParticipantRejectModal({
             Cancel
           </Button>
           <Button color="red" onClick={handleRejectParticipant}>
-            {currentAndSelectedParticipants.length > 0 ? 'Reject Participants' : 'Reject Participant'}
+            {`Reject Participant${nonRejectedParticipantsCount === 1 ? '' : 's'}`}
           </Button>
         </Flex>
       </Modal>
@@ -175,9 +179,9 @@ export function ParticipantRejectModal({
         onClose={() => setModalUndoRejectOpened(false)}
         title={(
           <Text>
-            {`Undo Reject Participants (${currentAndSelectedParticipants.length})`}
+            {`Undo Reject Participant${rejectedParticipantsCount === 1 ? '' : 's'} (${rejectedParticipantsCount})`}
           </Text>
-          )}
+        )}
       >
         <Alert
           icon={<IconAlertTriangle size={16} />}
@@ -188,7 +192,12 @@ export function ParticipantRejectModal({
           When you undo participant rejections, you may end up with unbalanced latin squares. This is because the rejected sequence may have been reassigned.
         </Alert>
         {currentAndSelectedParticipants.length > 0 ? (
-          <Text>Are you sure you want to undo the rejection of these participants?</Text>
+          <Text>
+            Are you sure you want to undo the rejection of
+            {' '}
+            {rejectedParticipantsCount === 1 ? 'this participant' : 'these participants'}
+            ?
+          </Text>
         ) : (
           <>
             <Text>
@@ -206,7 +215,7 @@ export function ParticipantRejectModal({
             Cancel
           </Button>
           <Button color="blue" onClick={handleUndoRejectParticipant}>
-            {currentAndSelectedParticipants.length > 0 ? 'Undo Reject Participants' : 'Undo Reject Participant'}
+            {`Undo Reject Participant${rejectedParticipantsCount === 1 ? '' : 's'}`}
           </Button>
         </Flex>
       </Modal>

From 797b1a6de30b5193d3207018b37e5c9707786f1b Mon Sep 17 00:00:00 2001
From: Jay Kim <76601570+yeonkim1213@users.noreply.github.com>
Date: Wed, 27 May 2026 21:55:00 -0600
Subject: [PATCH 2/4] Update the screen recording icon color

---
 src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx b/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
index 52d431e27b..c3fa0e6b3c 100644
--- a/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
+++ b/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
@@ -125,6 +125,7 @@ export function ThinkAloudFooter({
     async function fetchAssetsUrl() {
       if (!storageEngine || !participantId || !currentTrial) {
         setAudioUrl(null);
+        setScreenRecordingUrl(null);
         return;
       }
 
@@ -599,7 +600,7 @@ export function ThinkAloudFooter({
             )}
             {screenRecordingUrl && (
               <Tooltip label="Download screen recording">
-                <ActionIcon variant="filled" size={30} onClick={handleDownloadScreenRecording}>
+                <ActionIcon variant="light" size={30} onClick={handleDownloadScreenRecording}>
                   <IconDeviceDesktopDown />
                 </ActionIcon>
               </Tooltip>

From 709ba5bdc6c9d90ae79bfc3e15f15e22060e1c0b Mon Sep 17 00:00:00 2001
From: Jay Kim <76601570+yeonkim1213@users.noreply.github.com>
Date: Wed, 27 May 2026 22:09:19 -0600
Subject: [PATCH 3/4] Fix plural wording for reject participants

---
 src/analysis/individualStudy/ParticipantRejectModal.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/analysis/individualStudy/ParticipantRejectModal.tsx b/src/analysis/individualStudy/ParticipantRejectModal.tsx
index e1f5af7c3d..a616c6b9c0 100644
--- a/src/analysis/individualStudy/ParticipantRejectModal.tsx
+++ b/src/analysis/individualStudy/ParticipantRejectModal.tsx
@@ -150,9 +150,12 @@ export function ParticipantRejectModal({
               {' '}
               {rejectedParticipantsCount === 1 ? 'has' : 'have'}
               {' '}
-              already been rejected. Clicking reject participants will now reject the other
+              already been rejected. Clicking reject participant
+              {nonRejectedParticipantsCount === 1 ? '' : 's'}
               {' '}
-              {nonRejectedParticipantsCount}
+              will now reject
+              {' '}
+              {nonRejectedParticipantsCount === 1 ? 'this participant' : 'these participants'}
               .
               <br />
               <br />

From 1307d0643608d1134baba7c7941378d20c18d018 Mon Sep 17 00:00:00 2001
From: Jay Kim <76601570+yeonkim1213@users.noreply.github.com>
Date: Thu, 28 May 2026 00:26:23 -0600
Subject: [PATCH 4/4] Refactor reject participants label

---
 .../ParticipantRejectModal.tsx                | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/analysis/individualStudy/ParticipantRejectModal.tsx b/src/analysis/individualStudy/ParticipantRejectModal.tsx
index a616c6b9c0..5efd5ac714 100644
--- a/src/analysis/individualStudy/ParticipantRejectModal.tsx
+++ b/src/analysis/individualStudy/ParticipantRejectModal.tsx
@@ -52,6 +52,8 @@ export function ParticipantRejectModal({
   const currentAndSelectedParticipants = useMemo(() => [...selectedParticipants, currentParticipantData].filter((p) => p !== null) as ParticipantData[], [selectedParticipants, currentParticipantData]);
   const rejectedParticipantsCount = useMemo(() => currentAndSelectedParticipants.filter((p) => p.rejected).length, [currentAndSelectedParticipants]);
   const nonRejectedParticipantsCount = useMemo(() => currentAndSelectedParticipants.filter((p) => !p.rejected).length, [currentAndSelectedParticipants]);
+  const rejectParticipantLabel = `Reject Participant${nonRejectedParticipantsCount === 1 ? '' : 's'}`;
+  const undoRejectParticipantLabel = `Undo Reject Participant${rejectedParticipantsCount === 1 ? '' : 's'}`;
 
   const rejectParticipant = useCallback(async (rejectParticipantId: string, reason: string) => {
     if (storageEngine && studyId) {
@@ -111,16 +113,14 @@ export function ParticipantRejectModal({
           {rejectedParticipantsCount > 0 && (
             <Tooltip label="Only admins can undo rejection" disabled={user.isAdmin}>
               <Button disabled={!user.isAdmin} onClick={() => setModalUndoRejectOpened(true)} color="blue">
-                Undo Reject
-                {!footer ? ` Participant${rejectedParticipantsCount === 1 ? '' : 's'} (${rejectedParticipantsCount})` : ''}
+                {footer ? 'Undo Reject' : `${undoRejectParticipantLabel} (${rejectedParticipantsCount})`}
               </Button>
             </Tooltip>
           )}
           {nonRejectedParticipantsCount > 0 && (
             <Tooltip label="Only admins can reject participants" disabled={user.isAdmin}>
               <Button disabled={!user.isAdmin} onClick={() => setModalRejectOpened(true)} color="red">
-                Reject
-                {!footer ? ` Participant${nonRejectedParticipantsCount === 1 ? '' : 's'} (${nonRejectedParticipantsCount})` : ''}
+                {footer ? 'Reject' : `${rejectParticipantLabel} (${nonRejectedParticipantsCount})`}
               </Button>
             </Tooltip>
           )}
@@ -129,7 +129,9 @@ export function ParticipantRejectModal({
       <Modal
         opened={modalRejectOpened}
         onClose={() => setModalRejectOpened(false)}
-        title={`Reject Participant${nonRejectedParticipantsCount === 1 ? '' : 's'} (${nonRejectedParticipantsCount})`}
+        title={footer
+          ? rejectParticipantLabel
+          : `${rejectParticipantLabel} (${nonRejectedParticipantsCount})`}
       >
         <Alert
           icon={<IconAlertTriangle size={16} />}
@@ -172,7 +174,7 @@ export function ParticipantRejectModal({
             Cancel
           </Button>
           <Button color="red" onClick={handleRejectParticipant}>
-            {`Reject Participant${nonRejectedParticipantsCount === 1 ? '' : 's'}`}
+            {rejectParticipantLabel}
           </Button>
         </Flex>
       </Modal>
@@ -180,11 +182,9 @@ export function ParticipantRejectModal({
       <Modal
         opened={modalUndoRejectOpened}
         onClose={() => setModalUndoRejectOpened(false)}
-        title={(
-          <Text>
-            {`Undo Reject Participant${rejectedParticipantsCount === 1 ? '' : 's'} (${rejectedParticipantsCount})`}
-          </Text>
-        )}
+        title={footer
+          ? undoRejectParticipantLabel
+          : `${undoRejectParticipantLabel} (${rejectedParticipantsCount})`}
       >
         <Alert
           icon={<IconAlertTriangle size={16} />}
@@ -218,7 +218,7 @@ export function ParticipantRejectModal({
             Cancel
           </Button>
           <Button color="blue" onClick={handleUndoRejectParticipant}>
-            {`Undo Reject Participant${rejectedParticipantsCount === 1 ? '' : 's'}`}
+            {undoRejectParticipantLabel}
           </Button>
         </Flex>
       </Modal>