From cda6ffc612f50aeddf2809a9bab474d64055fa25 Mon Sep 17 00:00:00 2001
From: James Perrin <james.perrin@manchester.ac.uk>
Date: Wed, 18 Dec 2024 11:37:56 +0000
Subject: [PATCH] #1512, use errorbox

---
 src/i18n/locales/en-US.json    |  1 -
 src/main/Save.tsx              | 13 +++++++++----
 src/main/WorkflowSelection.tsx |  8 ++++++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index d2c2edb91..1c37eb513 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -77,7 +77,6 @@
       "saveArea-tooltip": "Save Area",
       "confirm-success": "Okay",
       "cancel-save": "Don't save",
-      "invalid-headline-text": "Invalid Edits",
       "invalid-text": "The segments do not create a valid video. Either change or discard your edits if you wish to proceed. Contact an adminstrator for further help."
     },
 
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 927f02068..2c087352c 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -80,9 +80,14 @@ const Save: React.FC = () => {
     } else {
       return (
         <>
-          <span css={{ maxWidth: "500px" }}>
-            {validSegments ? t("save.info-text") : t("save.invalid-text")}
-          </span>
+          {validSegments ? <span>
+            {t("save.info-text")}
+          </span> : <ErrorBox>
+            <span css={{ whiteSpace: "pre-line" }}>
+              {t("save.invalid-text")}
+            </span>
+          </ErrorBox>
+          }
           <div css={backOrContinueStyle}>
             <PageButton pageNumber={0} label={t("various.goBack-button")} Icon={LuChevronLeft} />
             {validSegments && <SaveButton />}
@@ -94,7 +99,7 @@ const Save: React.FC = () => {
 
   return (
     <div css={saveStyle}>
-      <h1>{validSegments ? t("save.headline-text") : t("save.invalid-headline-text")}</h1>
+      <h1>{t("save.headline-text")}</h1>
       {render()}
       {postWorkflowStatus === "failed" &&
         <ErrorBox>
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index 331885952..cd3ce77e0 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -116,8 +116,12 @@ const WorkflowSelection: React.FC = () => {
     if (!validSegments) {
       return (
         render(
-          t("save.invalid-headline-text"),
-          <span css={{ maxWidth: "500px" }}>{t("save.invalid-text")}</span>,
+          t("workflowSelection.saveAndProcess-text"),
+          <ErrorBox>
+            <span css={{ whiteSpace: "pre-line" }}>
+              {t("save.invalid-text")}
+            </span>
+          </ErrorBox>,
           false,
           <div/>,
           saveStatus,