1import { Typography } from '@mui/material';
 2import makeStyles from '@mui/styles/makeStyles';
 3
 4import Author from 'src/components/Author';
 5import Date from 'src/components/Date';
 6
 7import { SetTitleFragment } from './SetTitleFragment.generated';
 8
 9const useStyles = makeStyles((theme) => ({
10  main: {
11    color: theme.palette.text.secondary,
12    marginLeft: theme.spacing(1) + 40,
13  },
14  author: {
15    fontWeight: 'bold',
16    color: theme.palette.text.secondary,
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    <Typography 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    </Typography>
42  );
43}
44
45export default SetTitle;