Add image to messages page

ui/src/component/Container.js

@@ -13,12 +13,13 @@ class Container extends Component {
     static propTypes = {
         classes: PropTypes.object.isRequired,
         children: PropTypes.node,
+        style: PropTypes.object,
     };
 
     render() {
-        const {classes, children} = this.props;
+        const {classes, children, style} = this.props;
         return (
-            <Paper elevation={6} className={classes.paper}>
+            <Paper elevation={6} className={classes.paper} style={style}>
                 {children}
             </Paper>
         );

ui/src/component/Message.js

@@ -18,22 +18,36 @@ const styles = () => ({
         marginTop: -15,
         marginRight: -15,
     },
+    messageContentWrapper: {
+        width: '100%',
+    },
+    image: {
+        marginRight: 15,
+    },
+    imageWrapper: {
+        display: 'flex',
+    },
 });
 
 class Message extends Component {
     static propTypes = {
         classes: PropTypes.object.isRequired,
         title: PropTypes.string.isRequired,
+        image: PropTypes.string.isRequired,
         date: PropTypes.string.isRequired,
         content: PropTypes.string.isRequired,
         fDelete: PropTypes.func.isRequired,
     };
 
     render() {
-        const {fDelete, classes, title, date, content} = this.props;
+        const {fDelete, classes, title, date, content, image} = this.props;
 
         return (
-            <Container>
+            <Container style={{display: 'flex'}}>
+                <div className={classes.imageWrapper}>
+                    <img src={image} alt="app logo" width="70" height="70" className={classes.image}/>
+                </div>
+                <div className={classes.messageContentWrapper}>
                     <div className={classes.header}>
                         <Typography className={classes.headerTitle} variant="headline">
                             {title}
@@ -43,9 +57,8 @@ class Message extends Component {
                         </Typography>
                         <IconButton onClick={fDelete} className={classes.trash}><Delete/></IconButton>
                     </div>
-                <Typography component="p">
+                    <Typography component="p">{content}</Typography>
-                    {content}
+                </div>
-                </Typography>
             </Container>
         );
     }

ui/src/pages/Messages.js

@@ -59,7 +59,7 @@ class Messages extends Component {
                     return (
                         <Grid item xs={12} key={message.id}>
                             <Message fDelete={() => MessageAction.deleteMessage(message.id)} title={message.title}
-                                     date={message.date} content={message.message}/>
+                                     date={message.date} content={message.message} image={message.image}/>
                         </Grid>
                     );
                 })}