<commit_before>import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Card from '@material-ui/core/Card'
import IconButton from '@material-ui/core/IconButton'
import Icon from '@material-ui/core/Icon'
import CardContent from '@material-ui/core/CardContent'
import Popper from '@material-ui/core/Popper'
import Paper from '@material-ui/core/Paper'
import Fade from '@material-ui/core/Fade'
import AddComment from 'client/components/AddComment'
import { facebookSignInUrl } from 'client/src/urls'

const styles = theme => ({
  commentContainer: {
    left: '50%',
    position: 'relative',
    transform: 'translateX(-50%)',
    marginTop: theme.spacing.unit,
    width: '100%',
    [theme.breakpoints.only('sm')]: {
      width: 600,
    },
    [theme.breakpoints.only('md')]: {
      width: 800,
    },
    [theme.breakpoints.up('lg')]: {
      width: 1024,
    },
  },
  meta: {
    alignItems: 'start',
    display: 'flex',
    justifyContent: 'space-between',
    paddingLeft: theme.spacing.unit * 2,
  },
  caption: {
    paddingTop: theme.spacing.unit * 1.5, // match button
  },
  heartContainer: {
  },
  favoriteCount: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    display: 'inline',
  },
  commentList: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    listStyleType: 'none',
    paddingInlineStart: 0,
    marginTop: theme.spacing.unit,
    width: '100%',
  },
  commentListItem: {
    display: 'flex',
    marginBottom: theme.spacing.unit,
    width: '100%',
  },
  card: {
    textAlign: 'left',
    width: '100%',
  },
  commentRight: {
    paddingLeft: 50 + theme.spacing.unit,
  },
  profileImage: {
    height: 50,
    width: 50,
    float: 'left',
    marginRight: theme.spacing.unit,
  },
})

const PhotoComments = ({ comments, photo, user, classes, ...props}) => (
  <div className={classes.commentContainer}>
    <div className={classes.meta}>
      <Typography className={classes.caption} variant="caption">
        {photo.caption}
      </Typography>
      <div className={classes.heartContainer}>
        <Typography variant="body2" className={classes.favoriteCount}>
          {photo.favorites.count}
        </Typography>
        <IconButton aria-label="Favorite" onClick={props.handleFavorite}>
          <Icon>favorite</Icon>
        </IconButton>
        <Popper
          id={props.showSignInPopper ? 'sign-in-popper' : undefined}
          open={props.showSignInPopper}
          anchorEl={props.signInPopperEl}
          transition>
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Card>
                <CardContent>
                  <Typography variant="body2">
                    <a href={facebookSignInUrl}>Sign in</a> to add a favorite
                  </Typography>
                </CardContent>
              </Card>
            </Fade>
          )}
        </Popper>
      </div>
    </div>
  <ul className={classes.commentList}>
    {comments.map(comment => (
      <li className={classes.commentListItem} key={comment.id}>
        <Card className={classes.card}>
          <CardContent>
            <img
              className={classes.profileImage}
              src={comment.user_profile_photo_url}
              alt="profile photo" />
            <div className={classes.commentRight}>
              <Typography variant="subtitle2">
                {comment.user_name}
              </Typography>
              <Typography variant="body2" component="p" gutterBottom>
                {comment.body}
              </Typography>
            </div>
          </CardContent>
        </Card>
      </li>
    ))}
    <li className={classes.commentListItem}>
      {user.id ?
        <AddComment photo_id={photo.id} handleCommentAdded={props.handleCommentAdded} />
        :
        <Card className={classes.card}>
          <CardContent>
            <Typography variant="body2">
              <a href={facebookSignInUrl}>Sign in</a> to leave a comment
            </Typography>
          </CardContent>
        </Card>
      }
    </li>
  </ul>
  </div>
)

export default withStyles(styles)(PhotoComments)
<commit_msg>Adjust favorite padding and margins<commit_after>import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Card from '@material-ui/core/Card'
import IconButton from '@material-ui/core/IconButton'
import Icon from '@material-ui/core/Icon'
import CardContent from '@material-ui/core/CardContent'
import Popper from '@material-ui/core/Popper'
import Paper from '@material-ui/core/Paper'
import Fade from '@material-ui/core/Fade'
import AddComment from 'client/components/AddComment'
import { facebookSignInUrl } from 'client/src/urls'

const styles = theme => ({
  commentContainer: {
    left: '50%',
    position: 'relative',
    transform: 'translateX(-50%)',
    marginTop: theme.spacing.unit,
    width: '100%',
    [theme.breakpoints.only('sm')]: {
      width: 600,
    },
    [theme.breakpoints.only('md')]: {
      width: 800,
    },
    [theme.breakpoints.up('lg')]: {
      width: 1024,
    },
  },
  meta: {
    alignItems: 'start',
    display: 'flex',
    justifyContent: 'space-between',
    paddingLeft: theme.spacing.unit * 2,
  },
  caption: {
    paddingTop: theme.spacing.unit * 1.5, // match button
  },
  heartContainer: {
    marginLeft: theme.spacing.unit,
  },
  favoriteCount: {
    paddingLeft: theme.spacing.unit,
    paddingRight: theme.spacing.unit,
    display: 'inline',
  },
  commentList: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    listStyleType: 'none',
    paddingInlineStart: 0,
    marginTop: theme.spacing.unit,
    width: '100%',
  },
  commentListItem: {
    display: 'flex',
    marginBottom: theme.spacing.unit,
    width: '100%',
  },
  card: {
    textAlign: 'left',
    width: '100%',
  },
  commentRight: {
    paddingLeft: 50 + theme.spacing.unit,
  },
  profileImage: {
    height: 50,
    width: 50,
    float: 'left',
    marginRight: theme.spacing.unit,
  },
})

const PhotoComments = ({ comments, photo, user, classes, ...props}) => (
  <div className={classes.commentContainer}>
    <div className={classes.meta}>
      <Typography className={classes.caption} variant="caption">
        {photo.caption}
      </Typography>
      <div className={classes.heartContainer}>
        <Typography variant="body2" className={classes.favoriteCount}>
          {photo.favorites.count}
        </Typography>
        <IconButton aria-label="Favorite" onClick={props.handleFavorite}>
          <Icon>favorite</Icon>
        </IconButton>
        <Popper
          id={props.showSignInPopper ? 'sign-in-popper' : undefined}
          open={props.showSignInPopper}
          anchorEl={props.signInPopperEl}
          transition>
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Card>
                <CardContent>
                  <Typography variant="body2">
                    <a href={facebookSignInUrl}>Sign in</a> to add a favorite
                  </Typography>
                </CardContent>
              </Card>
            </Fade>
          )}
        </Popper>
      </div>
    </div>
  <ul className={classes.commentList}>
    {comments.map(comment => (
      <li className={classes.commentListItem} key={comment.id}>
        <Card className={classes.card}>
          <CardContent>
            <img
              className={classes.profileImage}
              src={comment.user_profile_photo_url}
              alt="profile photo" />
            <div className={classes.commentRight}>
              <Typography variant="subtitle2">
                {comment.user_name}
              </Typography>
              <Typography variant="body2" component="p" gutterBottom>
                {comment.body}
              </Typography>
            </div>
          </CardContent>
        </Card>
      </li>
    ))}
    <li className={classes.commentListItem}>
      {user.id ?
        <AddComment photo_id={photo.id} handleCommentAdded={props.handleCommentAdded} />
        :
        <Card className={classes.card}>
          <CardContent>
            <Typography variant="body2">
              <a href={facebookSignInUrl}>Sign in</a> to leave a comment
            </Typography>
          </CardContent>
        </Card>
      }
    </li>
  </ul>
  </div>
)

export default withStyles(styles)(PhotoComments)

{'fraction_non_alphanumeric': 0.14176156170113874, 'fraction_numerical': 0.01022542412270509, 'mean_word_length': 2.332171893147503, 'pattern_counts': {'":': 0, '<': 107, '<?xml version=': 0, '>': 115, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5917287', 'n_tokens_mistral': 2634, 'n_tokens_neox': 2537, 'n_words': 500}