From cd99837378ac6ba3b7b87b00a7bac0976ce7bba7 Mon Sep 17 00:00:00 2001
From: danfunk <daniel.h.funk@gmail.com>
Date: Tue, 16 May 2023 15:26:48 -0400
Subject: [PATCH] Requested simplification of the interstitial page.

---
 spiffworkflow-frontend/src/index.css          |  6 ++++
 .../src/routes/ProcessInterstitial.tsx        | 36 +++++++++----------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index f0413204b..cfea25f48 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -478,22 +478,28 @@ svg.notification-icon {
 
 .user_instructions_0 {
   filter: opacity(1);
+  font-size: 1.2em;
+  margin-bottom: 30px;
 }
 
 .user_instructions_1 {
   filter: opacity(60%);
+  font-size: 1.1em;
 }
 
 .user_instructions_2 {
   filter: opacity(40%);
+  font-size: 1em;
 }
 
 .user_instructions_3 {
   filter: opacity(20%);
+  font-size: 9em;
 }
 
 .user_instructions_4 {
   filter: opacity(10%);
+  font-size: 8em;
 }
 
 .float-right {
diff --git a/spiffworkflow-frontend/src/routes/ProcessInterstitial.tsx b/spiffworkflow-frontend/src/routes/ProcessInterstitial.tsx
index 368c3285d..49c2a9bd5 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInterstitial.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInterstitial.tsx
@@ -111,6 +111,16 @@ export default function ProcessInterstitial() {
     }
   };
 
+  const getLoadingIcon = () => {
+    if(getStatus() === 'RUNNING') {
+    return (
+        <Loading description="Active loading indicator" withOverlay={false} style={{margin: "auto"}}/>
+    );
+    } else {
+      return null;
+    }
+  }
+
   const getReturnHomeButton = (index: number) => {
     if (
       index === 0 &&
@@ -123,6 +133,7 @@ export default function ProcessInterstitial() {
             kind="secondary"
             data-qa="return-to-home-button"
             onClick={() => navigate(`/tasks`)}
+            style={{marginBottom:30}}
           >
             Return to Home
           </Button>
@@ -155,7 +166,6 @@ export default function ProcessInterstitial() {
       if (!myTask.can_complete && userTasks.includes(myTask.type)) {
         return (
           <>
-            <h4 className="heading-compact-01">Waiting on Someone Else</h4>
             <p>
               This next task is assigned to a different person or team. There is
               no action for you to take at this time.
@@ -189,6 +199,8 @@ export default function ProcessInterstitial() {
   if (state === 'CLOSED' && lastTask === null) {
     navigate(`/tasks`);
   }
+
+
   if (lastTask) {
     return (
       <>
@@ -206,21 +218,10 @@ export default function ProcessInterstitial() {
             ],
           ]}
         />
-        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-          {getStatusImage()}
-          <div>
-            <h1 style={{ marginBottom: '0em' }}>
-              {lastTask.process_model_display_name}:{' '}
-              {lastTask.process_instance_id}
-            </h1>
-            <div>Status: {capitalize(getStatus())}</div>
-          </div>
-        </div>
-        <br />
-        <br />
+        {getLoadingIcon()}
+        <div style={{maxWidth:800, margin:"auto", padding:50}}>
         {data.map((d, index) => (
-          <Grid fullWidth style={{ marginBottom: '1em' }}>
-            <Column md={6} lg={8} sm={4}>
+          <>
               <div
                 className={
                   index < 4
@@ -231,10 +232,9 @@ export default function ProcessInterstitial() {
                 {userMessage(d)}
               </div>
               {getReturnHomeButton(index)}
-              {getHr(index)}
-            </Column>
-          </Grid>
+          </>
         ))}
+        </div>
       </>
     );
   }