1 files changed, 27 insertions, 23 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
index a20c592c5..4cf63e927 100644
--- a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
+++ b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
@@ -36,10 +36,10 @@ const styles = (theme: Theme) => createStyles({
     justifyContent: "center",
   },
   paper: {
-    width: theme.spacing.unit * 50,
+    width: theme.spacing(50),
     backgroundColor: theme.palette.background.paper,
     boxShadow: theme.shadows[5],
-    padding: theme.spacing.unit * 4,
+    padding: theme.spacing(4),
   },
   card: {
     minWidth: 275,
@@ -75,43 +75,47 @@ type ErrorDisplayProps = WithStyles<typeof styles> & Connect;
  * Represents a compnent for formaing and displaying errors.
  */
 class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> {
+  constructor(props: ErrorDisplayProps) {
+    super(props);
+  }
+
   render(): JSX.Element {
     const { classes, state } = this.props;
     const errorInfo = state.framework.applicationState.errors.length && state.framework.applicationState.errors[state.framework.applicationState.errors.length - 1];
     return (
-      <Modal className={ classes.modal }
+      <Modal className={classes.modal}
         aria-labelledby="simple-modal-title"
         aria-describedby="simple-modal-description"
-        open={ state.framework.applicationState.errors && state.framework.applicationState.errors.length > 0 }
-        onClose={ () => this.props.dispatch(new ClearErrorInfoAction()) }
+        open={state.framework.applicationState.errors && state.framework.applicationState.errors.length > 0}
+        onClose={() => this.props.dispatch(new ClearErrorInfoAction())}
       >
-        { errorInfo &&
-          <div className={ classes.paper }>
-            <Card className={ classes.card }>
+        {errorInfo &&
+          <div className={classes.paper}>
+            <Card className={classes.card}>
               <CardContent>
-                <Typography className={ classes.title } color="textSecondary">
-                  Something went wrong.
+                <Typography className={classes.title} color="textSecondary">
+                  {errorInfo.title != null ? errorInfo.title : "Something went wrong."}
                 </Typography>
-                <Typography variant="headline" component="h2">
-                { errorInfo.error && errorInfo.error.toString() }
+                <Typography variant="h5" component="h2">
+                  {errorInfo.error && errorInfo.error.toString()}
                 </Typography>
-                <Typography className={ classes.pos } color="textSecondary">
-                { errorInfo.message && errorInfo.message .toString() }
+                <Typography className={classes.pos} color="textSecondary">
+                  {errorInfo.message && errorInfo.message.toString()}
                 </Typography>
                 <Typography component="p">
-                { errorInfo.info && errorInfo.info.componentStack && errorInfo.info.componentStack.split('\n').map(line => {
-                  return [line, <br />];
-                }) }
-                { errorInfo.info && errorInfo.info.extra && errorInfo.info.extra.split('\n').map(line => {
-                  return [line, <br />];
-                }) }
+                  {errorInfo.info && errorInfo.info.componentStack && errorInfo.info.componentStack.split('\n').map(line => {
+                    return [line, <br />];
+                  })}
+                  {errorInfo.info && errorInfo.info.extra && errorInfo.info.extra.split('\n').map(line => {
+                    return [line, <br />];
+                  })}
                 </Typography>
               </CardContent>
               <CardActions>
-              <Button size="small" onClick={ () => this.props.dispatch(new RemoveErrorInfoAction(errorInfo)) } >Close</Button>
-              </CardActions> 
+                <Button size="small" onClick={() => this.props.dispatch(new RemoveErrorInfoAction(errorInfo))} >Close</Button>
+              </CardActions>
             </Card>
-          </div> || null
+          </div> || <div></div>
         }
       </Modal>
     );