updated completed form modal to have white background and minor changes to table column names

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']);

spiffworkflow-frontend/src/index.css

@@ -841,11 +841,18 @@ div.onboarding {
   margin-bottom: 2rem;
 }
 
-.cds--text-input:disabled,
+/* makde the completed user form modal more readable */
-.cds--text-area:disabled,
+.completed-task-modal .cds--modal-container {
-.cds--date-picker__input:disabled,
-.cds--select-input:disabled,
-.cds--select-input:hover:disabled {
-  --cds-text-disabled: rgba(22, 22, 22, .5);
   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);
+}

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}

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>