<commit_before>import React from 'react';
import { connect } from 'react-redux';
import { muteSound, unmuteSound } from '../redux/sound/action-creator';
import IconButton from 'material-ui/IconButton';

export const styles = {
  largeIcon: {
    width: 60,
    height: 60,
    fontSize: 60,
    color: '#fff'
  },
  large: {
    width: 120,
    height: 120,
    padding: 30,
  },
};


const MuteButton = (props) => {
  if (props.sound) {
    return (
      <div className="mute">
        <IconButton
          onClick={() => props.muteSound()}
          disableTouchRipple={true}
          iconClassName="material-icons"
          iconStyle={styles.largeIcon}
          style={styles.large}>
          volume_up
        </IconButton>
      </div>
    )
  } else {
    return (
      <div className="mute">
        <IconButton
          onClick={() => props.unmuteSound()}
          disableTouchRipple={true}
          iconClassName="material-icons"
          iconStyle={styles.largeIcon}
          style={styles.large}>
          volume_off
        </IconButton>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  sound: state.sound
})

const mapDispatchToProps = (dispatch) => ({
  muteSound: () => dispatch(muteSound()),
  unmuteSound: () => dispatch(unmuteSound())
})

export default connect(mapStateToProps, mapDispatchToProps)(MuteButton)<commit_msg>refactored mute button component<commit_after>import React from 'react';
import { connect } from 'react-redux';
import { muteSound, unmuteSound } from '../redux/sound/action-creator';
import IconButton from 'material-ui/IconButton';

export const styles = {
  largeIcon: {
    width: 60,
    height: 60,
    fontSize: 60,
    color: '#fff'
  },
  large: {
    width: 120,
    height: 120,
    padding: 30,
  },
};


const MuteButton = (props) => {
  const muteOrUnmute = props.sound ? props.muteSound : props.unmuteSound;
  const icon = props.sound ? "volume_up" : "volume_off";

  return (
    <div className="mute">
      <IconButton
        onClick={muteOrUnmute}
        disableTouchRipple={true}
        iconClassName="material-icons"
        iconStyle={styles.largeIcon}
        style={styles.large}>
        {icon}
      </IconButton>
    </div>
  )
}

const mapStateToProps = (state) => ({
  sound: state.sound
})

const mapDispatchToProps = (dispatch) => ({
  muteSound: () => dispatch(muteSound()),
  unmuteSound: () => dispatch(unmuteSound())
})

export default connect(mapStateToProps, mapDispatchToProps)(MuteButton)
{'fraction_non_alphanumeric': 0.14165666266506602, 'fraction_numerical': 0.011204481792717087, 'mean_word_length': 2.8580246913580245, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 27, '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': '4092034', 'n_tokens_mistral': 822, 'n_tokens_neox': 791, 'n_words': 163}