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