<commit_before>import React from 'react';
import StyleSheet from 'react-inline';

class Button extends React.Component {
  render() {
    return (
      <div className="container">
        <button className={styles.button}>Click me!</button>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    padding: '6px 12px',
    fontSize: 14,
    lineHeight: 1.5,
    touchAction: 'manipulation',
    cursor: 'pointer',
    userSelect: 'none',
    border: '1px solid transparent',
    borderRadius: 4,
    color: '#fff',
    backgroundColor: '#337ab7',
    borderColor: '#2e6da4',

    '@media only screen and (max-width: 640px)': {
      display: 'block',
      width: '100%'
    },

    ':focus': {
      color: '#fff',
      backgroundColor: '#286090',
      borderColor: '#122b40',
      outline: 'thin dotted',
      outlineOffset: -2
    },

    ':hover': {
      color: '#fff',
      backgroundColor: '#286090',
      borderColor: '#204d74',
      textDecoration: 'none'
    },

    ':active': {
      color: '#fff',
      backgroundColor: '#286090',
      borderColor: '#204d74',
      backgroundImage: 'none',
      outline: 0,
      boxShadow: 'inset 0 3px 5px rgba(0, 0, 0, .125)',

      ':hover': {
        color: '#fff',
        backgroundColor: '#204d74',
        borderColor: '#122b40'
      }
    },

    '[disabled]': {
      backgroundColor: '#337ab7',
      borderColor: '#2e6da4',
      cursor: 'not-allowed',
      filter: 'alpha(opacity=65)',
      boxShadow: 'none',
      opacity: .65,
      pointerEvents: 'none'
    }
  }
});

React.render(<Button />, document.getElementById('content'));<commit_msg>make styles consistent with other examples<commit_after>import React from 'react';
import StyleSheet from 'react-inline';

class Button extends React.Component {
  render() {
    return (
      <div className={styles.container}>
        <button className={styles.button}>Click me!</button>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    textAlign: 'center'
  },

  button: {
    backgroundColor: '#ff0000',
    width: 320,
    padding: 20,
    borderRadius: 5,
    border: 'none',
    outline: 'none',

    ':hover': {
      color: '#fff'
    },

    ':active': {
      position: 'relative',
      top: 2
    },

    '@media (max-width: 480px)': {
      width: 160
    }
  }
});

React.render(<Button />, document.getElementById('content'));
{'fraction_non_alphanumeric': 0.16294458229942102, 'fraction_numerical': 0.043010752688172046, 'mean_word_length': 2.5469208211143695, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, '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': '6850254', 'n_tokens_mistral': 853, 'n_tokens_neox': 773, 'n_words': 182}