#1512, use errorbox

Author: JamesUoM

Diff for: 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 for: 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 for: 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,