From 9cfec3d35730d5a0a97564b21b79bb564c44fc83 Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Thu, 21 Sep 2023 08:00:14 -0400
Subject: [PATCH] updated completed form modal to have white background and
 minor changes to table column names

---
 .../src/components/TaskListTable.tsx          | 16 +++++++++-------
 spiffworkflow-frontend/src/index.css          | 19 +++++++++++++------
 .../src/routes/ProcessInstanceShow.tsx        |  2 +-
 .../src/routes/ProcessModelShow.tsx           |  2 +-
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/TaskListTable.tsx b/spiffworkflow-frontend/src/components/TaskListTable.tsx
index e8f03036b..7ac09ebbd 100644
--- a/spiffworkflow-frontend/src/components/TaskListTable.tsx
+++ b/spiffworkflow-frontend/src/components/TaskListTable.tsx
@@ -166,8 +166,8 @@ export default function TaskListTable({
           open={!!formSubmissionTask}
           passiveModal
           onRequestClose={() => setFormSubmissionTask(null)}
-          modalHeading={`${formSubmissionTask.name_for_display}
-              `}
+          modalHeading={`${formSubmissionTask.name_for_display}`}
+          className="completed-task-modal"
         >
           <div className="indented-content explanatory-message">
             ✅ You completed this form{' '}
@@ -179,7 +179,9 @@ export default function TaskListTable({
             </div>
           </div>
           <hr />
-          <InstructionsForEndUser task={formSubmissionTask} allowCollapse />
+          <div className="with-bottom-margin">
+            <InstructionsForEndUser task={formSubmissionTask} allowCollapse />
+          </div>
           <CustomForm
             id={formSubmissionTask.guid}
             formData={formSubmissionTask.data}
@@ -344,16 +346,16 @@ export default function TaskListTable({
     }
     tableHeaders.push('Task');
     if (showStartedBy) {
-      tableHeaders.push('Started By');
+      tableHeaders.push('Started by');
     }
     if (showWaitingOn) {
-      tableHeaders.push('Waiting For');
+      tableHeaders.push('Waiting for');
     }
     if (showDateStarted) {
-      tableHeaders.push('Date Started');
+      tableHeaders.push('Date started');
     }
     if (showLastUpdated) {
-      tableHeaders.push('Last Updated');
+      tableHeaders.push('Last updated');
     }
     if (showActionsColumn) {
       tableHeaders = tableHeaders.concat(['Actions']);
diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index 3f206ee26..6ceb6d7d1 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -841,11 +841,18 @@ div.onboarding {
   margin-bottom: 2rem;
 }
 
-.cds--text-input:disabled,
-.cds--text-area:disabled,
-.cds--date-picker__input:disabled,
-.cds--select-input:disabled,
-.cds--select-input:hover:disabled {
-  --cds-text-disabled: rgba(22, 22, 22, .5);
+/* makde the completed user form modal more readable */
+.completed-task-modal .cds--modal-container {
   background-color: #ffffff
 }
+.completed-task-modal .cds--text-input:disabled,
+.completed-task-modal .cds--text-area:disabled,
+.completed-task-modal .cds--date-picker__input:disabled,
+.completed-task-modal .cds--select-input:disabled,
+.completed-task-modal .cds--select-input:hover:disabled {
+  --cds-text-disabled: rgba(22, 22, 22, .5);
+  background-color: var(--cds-field)
+}
+.completed-task-modal .cds--form__helper-text--disabled {
+  --cds-text-disabled: rgba(22, 22, 22, .5);
+}
diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
index cedb8d00e..03a5a27ef 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
@@ -1511,7 +1511,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
                 <TaskListTable
                   apiPath={`/tasks/completed-by-me/${processInstance.id}`}
                   paginationClassName="with-large-bottom-margin"
-                  textToShowIfEmpty="There are no tasks you completed for this process instance."
+                  textToShowIfEmpty="You have not completed any tasks for this process instance."
                   shouldPaginateTable={false}
                   showProcessModelIdentifier={false}
                   showProcessId={false}
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
index 4a45bfa93..7efca7827 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
@@ -642,7 +642,7 @@ export default function ProcessModelShow() {
         <TabList aria-label="List of tabs">
           <Tab>About</Tab>
           <Tab>Files</Tab>
-          <Tab>My Process instances</Tab>
+          <Tab>My process instances</Tab>
         </TabList>
         <TabPanels>
           <TabPanel>{readmeFileArea()}</TabPanel>