Make use of error boxes from appkit

src/cssStyles.tsx

@@ -166,21 +166,6 @@ export const ariaLive = css({
   overflow: "hidden",
 });
 
-/**
- * CSS for displaying of errors
- */
-export const errorBoxStyle = (errorStatus: boolean, theme: Theme) => {
-  return (
-    css({
-      ...(!errorStatus) && { display: "none" },
-      borderColor: `${theme.error}`,
-      borderStyle: "dashed",
-      fontWeight: "bold",
-      padding: "10px",
-    })
-  );
-};
-
 type MyOptionType = {
   label: string;
   value: string;

src/main/Metadata.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 
 import { css } from "@emotion/react";
-import { BREAKPOINTS, calendarStyle, errorBoxStyle, selectFieldStyle, titleStyle, titleStyleBold } from "../cssStyles";
+import { BREAKPOINTS, calendarStyle, selectFieldStyle, titleStyle, titleStyleBold } from "../cssStyles";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
@@ -27,6 +27,7 @@ import { useTheme } from "../themes";
 import { ThemeProvider } from "@mui/material/styles";
 import { cloneDeep } from "lodash";
 import { ParseKeys } from "i18next";
+import { ErrorBox } from "@opencast/appkit";
 import { screenWidthAtMost } from "@opencast/appkit";
 
 /**
@@ -710,10 +711,16 @@ const Metadata: React.FC = () => {
             form.reset();
           }} css={metadataStyle}>
 
-            <div css={errorBoxStyle(getStatus === "failed", theme)} role="alert">
-              <span>A problem occurred during communication with Opencast.</span><br />
-              {getError ? "Details: " + getError : "No error details are available."}<br />
-            </div>
+            {getStatus === "failed" &&
+              <ErrorBox>
+                <span css={{ whiteSpace: "pre-line" }}>
+                  {"A problem occurred during communication with Opencast. \n"}
+                  {getError ?
+                    t("various.error-details-text", { errorMessage: getError }) : undefined
+                  }
+                </span>
+              </ErrorBox>
+            }
 
             {catalogs.map((catalog, i) => {
               if (settings.metadata.configureFields) {

src/main/Save.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 
 import { css } from "@emotion/react";
 import {
-  basicButtonStyle, backOrContinueStyle, ariaLive, errorBoxStyle,
+  basicButtonStyle, backOrContinueStyle, ariaLive,
   navigationButtonStyle,
 } from "../cssStyles";
 
@@ -32,6 +32,7 @@ import {
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
+import { ErrorBox } from "@opencast/appkit";
 import { Spinner } from "@opencast/appkit";
 import { ProtoButton } from "@opencast/appkit";
 import { setEnd } from "../redux/endSlice";
@@ -46,7 +47,6 @@ const Save: React.FC = () => {
 
   const postWorkflowStatus = useAppSelector(selectStatus);
   const postError = useAppSelector(selectError);
-  const theme = useTheme();
   const metadataHasChanges = useAppSelector(metadataSelectHasChanges);
   const hasChanges = useAppSelector(selectHasChanges);
   const subtitleHasChanges = useAppSelector(selectSubtitleHasChanges);
@@ -90,10 +90,16 @@ const Save: React.FC = () => {
     <div css={saveStyle}>
       <h1>{t("save.headline-text")}</h1>
       {render()}
-      <div css={errorBoxStyle(postWorkflowStatus === "failed", theme)} role="alert">
-        <span>{t("various.error-text")}</span><br />
-        {postError ? t("various.error-details-text", { errorMessage: postError }) : t("various.error-text")}<br />
-      </div>
+      {postWorkflowStatus === "failed" &&
+        <ErrorBox>
+          <span css={{ whiteSpace: "pre-line" }}>
+            {t("various.error-text") + "\n"}
+            {postError ?
+              t("various.error-details-text", { errorMessage: postError }) : undefined
+            }
+          </span>
+        </ErrorBox>
+      }
     </div>
   );
 };

src/main/VideoPlayers.tsx

@@ -9,7 +9,7 @@
   setIsPlaying,
   selectIsMuted,
   selectVolume,
   selectVideoURL,
   selectVideoCount,
   selectDurationInSeconds,
   setPreviewTriggered,
@@ -40,6 +40,7 @@
 import { backgroundBoxStyle } from "../cssStyles";
 import { BaseReactPlayerProps } from "react-player/base";
 import { AsyncThunkConfig } from "@reduxjs/toolkit/dist/createAsyncThunk";
+import { ErrorBox } from "@opencast/appkit";
 
 const VideoPlayers: React.FC<{
   refs?: React.MutableRefObject<(VideoPlayerForwardRef | null)[]>,
@@ -384,14 +385,6 @@
       },
     }));
 
-    const errorBoxStyle = css({
-      ...(!errorState) && { display: "none" },
-      borderColor: `${theme.error}`,
-      borderStyle: "dashed",
-      fontWeight: "bold",
-      padding: "10px",
-    });
-
     const reactPlayerStyle = css({
       aspectRatio: "16 / 9",    // Hard-coded for now because there are problems with updating this value at runtime
 
@@ -450,9 +443,9 @@
         );
       } else {
         return (
-          <div css={errorBoxStyle} role="alert">
-            <span>{t("video.loadError-text")} </span>
-          </div>
+          <ErrorBox>
+            {t("video.loadError-text")}
+          </ErrorBox>
         );
       }
     };

src/main/WorkflowConfiguration.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import { css } from "@emotion/react";
 import {
   backOrContinueStyle,
-  errorBoxStyle,
 } from "../cssStyles";
 
 import { LuChevronLeft, LuMoreHorizontal } from "react-icons/lu";
@@ -13,7 +12,7 @@ import { useAppSelector } from "../redux/store";
 import { PageButton } from "./Finish";
 
 import { useTranslation } from "react-i18next";
-import { useTheme } from "../themes";
+import { ErrorBox } from "@opencast/appkit";
 import { selectError, selectStatus } from "../redux/workflowPostSlice";
 import { SaveButton } from "./Save";
 
@@ -26,7 +25,6 @@ const WorkflowConfiguration: React.FC = () => {
 
   const postAndProcessWorkflowStatus = useAppSelector(selectStatus);
   const postAndProcessError = useAppSelector(selectError);
-  const theme = useTheme();
 
   const workflowConfigurationStyle = css({
     display: "flex",
@@ -49,12 +47,16 @@ const WorkflowConfiguration: React.FC = () => {
           text={t("workflowConfig.confirm-button")}
         />
       </div>
-      <div css={errorBoxStyle(postAndProcessWorkflowStatus === "failed", theme)} role="alert">
-        <span>{t("various.error-text")}</span><br />
-        {postAndProcessError ? t("various.error-details-text",
-          { errorMessage: postAndProcessError }) :
-          t("various.error-text")}<br />
-      </div>
+      {postAndProcessWorkflowStatus === "failed" &&
+        <ErrorBox>
+          <span css={{ whiteSpace: "pre-line" }}>
+            {t("various.error-text") + "\n"}
+            {postAndProcessError ?
+              t("various.error-details-text", { errorMessage: postAndProcessError }) : undefined
+            }
+          </span>
+        </ErrorBox>
+      }
     </div>
   );
 };

src/main/WorkflowSelection.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 
 import { css } from "@emotion/react";
-import { backOrContinueStyle, errorBoxStyle } from "../cssStyles";
+import { backOrContinueStyle } from "../cssStyles";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import { selectWorkflows, setSelectedWorkflowIndex } from "../redux/videoSlice";
@@ -17,6 +17,7 @@ import { useTranslation } from "react-i18next";
 import { Trans } from "react-i18next";
 import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
 import { useTheme } from "../themes";
+import { ErrorBox } from "@opencast/appkit";
 
 /**
  * Allows the user to select a workflow
@@ -34,8 +35,6 @@ const WorkflowSelection: React.FC = () => {
     return (b.displayOrder - a.displayOrder);
   });
 
-  const theme = useTheme();
-
   const saveStatus = useAppSelector(saveSelectStatus);
   const saveError = useAppSelector(saveSelectError);
 
@@ -97,12 +96,14 @@ const WorkflowSelection: React.FC = () => {
           {/* <PageButton pageNumber={2} label="Continue" iconName={faChevronRight}/> */}
           {nextButton}
         </div>
-        <div css={errorBoxStyle(errorStatus === "failed", theme)} role="alert">
-          <span>{t("various.error-text")}</span><br />
-          {errorMessage ?
-            t("various.error-details-text", { errorMessage: saveError }) :
-            t("various.error-text")}<br />
-        </div>
+        {errorStatus === "failed" &&
+          <ErrorBox>
+            <span>{t("various.error-text")}</span><br />
+            {errorMessage ?
+              t("various.error-details-text", { errorMessage: saveError }) :
+              t("various.error-text")}<br />
+          </ErrorBox>
+        }
       </div>
     );
   };