1import { withStyles } from '@material-ui/core/styles'
 2import Typography from '@material-ui/core/Typography/Typography'
 3import gql from 'graphql-tag'
 4import React from 'react'
 5import Author from '../Author'
 6import Date from '../Date'
 7import TimelineQuery from './TimelineQuery'
 8
 9const styles = theme => ({
10  main: {
11    maxWidth: 600,
12    margin: 'auto',
13    marginTop: theme.spacing.unit * 4
14  },
15  header: {},
16  title: {
17    ...theme.typography.headline
18  },
19  id: {
20    ...theme.typography.subheading,
21    marginLeft: 15,
22  },
23  container: {
24    display: 'flex',
25    marginBottom: 30
26  },
27  timeline: {
28    width: '70%',
29    marginTop: 20,
30    marginRight: 20,
31  },
32  sidebar: {
33    width: '30%'
34  },
35  label: {
36    backgroundColor: '#da9898',
37    borderRadius: '3px',
38    paddingLeft: '10px',
39    margin: '2px 20px auto 2px',
40    fontWeight: 'bold',
41  }
42})
43
44const Bug = ({bug, classes}) => (
45  <main className={classes.main}>
46    <div className={classes.header}>
47      <span className={classes.title}>{bug.title}</span>
48      <span className={classes.id}>{bug.humanId}</span>
49
50      <Typography color={'textSecondary'}>
51        <Author author={bug.author}/>
52        <span> opened this bug </span>
53        <Date date={bug.createdAt} />
54      </Typography>
55    </div>
56
57    <div className={classes.container}>
58      <div className={classes.timeline}>
59        <TimelineQuery id={bug.id}/>
60      </div>
61      <div className={classes.sidebar}>
62        <Typography variant={'subheading'}>Labels</Typography>
63        {bug.labels.map(l => (
64          <Typography key={l} className={classes.label}>
65            {l}
66          </Typography>
67        ))}
68      </div>
69    </div>
70  </main>
71)
72
73Bug.fragment = gql`
74  fragment Bug on Bug {
75    id
76    humanId
77    status
78    title
79    labels
80    createdAt
81    author {
82      email
83      name
84    }
85  }
86`
87
88export default withStyles(styles)(Bug)