1 files changed, 58 insertions, 31 deletions

diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index a4e3eeb0..493de8ee 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -1,68 +1,95 @@
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
 import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
+import { Avatar } from '../Author';
 import Date from '../Date';
 
 const styles = theme => ({
+  author: {
+    fontWeight: 'bold',
+  },
+  container: {
+    display: 'flex',
+  },
+  avatar: {
+    marginTop: 2,
+  },
+  bubble: {
+    flex: 1,
+    marginLeft: theme.spacing.unit,
+  },
   header: {
     ...theme.typography.body2,
-    padding: '3px 3px 3px 6px',
-    backgroundColor: '#f1f8ff',
-    border: '1px solid #d1d5da',
-    borderTopLeftRadius: 3,
-    borderTopRightRadius: 3,
+    color: '#444',
+    padding: '0.5rem 1rem',
+    borderBottom: '1px solid #ddd',
+    display: 'flex',
+  },
+  title: {
+    flex: 1,
+  },
+  tag: {
+    ...theme.typography.button,
+    color: '#888',
+    border: '#ddd solid 1px',
+    padding: '0 0.5rem',
+    fontSize: '0.75rem',
+    borderRadius: 2,
+    marginLeft: '0.5rem',
   },
-  message: {
-    borderLeft: '1px solid #d1d5da',
-    borderRight: '1px solid #d1d5da',
-    borderBottom: '1px solid #d1d5da',
-    borderBottomLeftRadius: 3,
-    borderBottomRightRadius: 3,
-    backgroundColor: '#fff',
-    minHeight: 50,
-    padding: 5,
+  body: {
+    ...theme.typography.body1,
+    padding: '1rem',
     whiteSpace: 'pre-wrap',
   },
 });
 
 const Message = ({ op, classes }) => (
-  <div>
-    <div className={classes.header}>
-      <Author className={classes.author} author={op.author} bold />
-      <span> commented </span>
-      <Date date={op.date} />
-    </div>
-    <div className={classes.message}>
-      <Typography>{op.message}</Typography>
-    </div>
-  </div>
+  <article className={classes.container}>
+    <Avatar author={op.author} className={classes.avatar} />
+    <Paper elevation={1} className={classes.bubble}>
+      <header className={classes.header}>
+        <div className={classes.title}>
+          <Author className={classes.author} author={op.author} />
+          <span> commented </span>
+          <Date date={op.createdAt} />
+        </div>
+        {op.edited && <div className={classes.tag}>Edited</div>}
+      </header>
+      <section className={classes.body}>{op.message}</section>
+    </Paper>
+  </article>
 );
 
 Message.createFragment = gql`
-  fragment Create on Operation {
-    ... on CreateOperation {
-      date
+  fragment Create on TimelineItem {
+    ... on CreateTimelineItem {
+      createdAt
       author {
         name
         email
         displayName
+        avatarUrl
       }
+      edited
       message
     }
   }
 `;
 
 Message.commentFragment = gql`
-  fragment Comment on Operation {
-    ... on AddCommentOperation {
-      date
+  fragment AddComment on TimelineItem {
+    ... on AddCommentTimelineItem {
+      createdAt
       author {
         name
         email
         displayName
+        avatarUrl
       }
+      edited
       message
     }
   }