1import React from 'react';
 2
 3import { makeStyles } from '@material-ui/core/styles';
 4
 5import Author from 'src/components/Author';
 6import Date from 'src/components/Date';
 7
 8import { SetTitleFragment } from './SetTitleFragment.generated';
 9
10const useStyles = makeStyles(theme => ({
11  main: {
12    ...theme.typography.body2,
13    marginLeft: theme.spacing(1) + 40,
14  },
15  author: {
16    fontWeight: 'bold',
17  },
18  before: {
19    fontWeight: 'bold',
20    textDecoration: 'line-through',
21  },
22  after: {
23    fontWeight: 'bold',
24  },
25}));
26
27type Props = {
28  op: SetTitleFragment;
29};
30
31function SetTitle({ op }: Props) {
32  const classes = useStyles();
33  return (
34    <div className={classes.main}>
35      <Author author={op.author} className={classes.author} />
36      <span> changed the title from </span>
37      <span className={classes.before}>{op.was}</span>
38      <span> to </span>
39      <span className={classes.after}>{op.title}</span>&nbsp;
40      <Date date={op.date} />
41    </div>
42  );
43}
44
45export default SetTitle;