<commit_before>import React from 'react';
import shuffle from 'shuffle-array';
import shallowCompare from 'react-addons-shallow-compare';

import Dialog from '../../shared/Dialog';
import Button from '../../shared/Button';
import Emojify from '../../shared/Emojify';

const IMAGE_PADDING_HORIZONTAL = 2.5;
const IMAGE_PADDING_VERTICAL = 7.5;

const PEOPLE = [
  { image: "keithpitt", name: "<NAME>" },
  { image: "harriet", name: "<NAME>" },
  { image: "ticky", name: "<NAME>" },
  { image: "sj26", name: "<NAME>" },
  { image: "toolmantim", name: "<NAME>" }
];

class SupportDialog extends React.Component {
  static displayName = "Navigation.SupportDialog";

  static propTypes = {
    isOpen: React.PropTypes.bool,
    onRequestClose: React.PropTypes.func
  };

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return (
      <Dialog isOpen={this.props.isOpen} onRequestClose={this.props.onRequestClose}>
        <h1 className="bold mt0 mb4"><Emojify text="We’re here to help :wave:"/></h1>
        <div
          className="mb4"
          style={{
            paddingTop: IMAGE_PADDING_VERTICAL,
            paddingBottom: IMAGE_PADDING_VERTICAL,
            paddingLeft: 15 + IMAGE_PADDING_HORIZONTAL,
            paddingRight: 15 + IMAGE_PADDING_HORIZONTAL
          }}
        >
          {shuffle(PEOPLE).map((person) => (
            <img
              key={person.name}
              src={require(`../../../images/people/${person.image}.jpg`)}
              width={70}
              height={70}
              alt={person.name}
              title={person.name}
              className="circle border border-white"
              style={{
                marginTop: -IMAGE_PADDING_VERTICAL,
                marginBottom: -IMAGE_PADDING_VERTICAL,
                marginLeft: -IMAGE_PADDING_HORIZONTAL,
                marginRight: -IMAGE_PADDING_HORIZONTAL
              }}
            />)
          )}
        </div>
        <div className="mx-auto mb4 pt1 px3">If you have a question, problem, or just need a hand send us an email and we’ll help you out!</div>

        <div className="pt1">
          <Button href="mailto:<EMAIL>" theme="default" outline={true}>Email <EMAIL></Button>
        </div>
      </Dialog>
    );
  }
}

export default SupportDialog;<commit_msg>Tweak padding, limit line length of main paragraph<commit_after>import React from 'react';
import shuffle from 'shuffle-array';
import shallowCompare from 'react-addons-shallow-compare';

import Dialog from '../../shared/Dialog';
import Button from '../../shared/Button';
import Emojify from '../../shared/Emojify';

const IMAGE_PADDING_HORIZONTAL = 6;
const IMAGE_PADDING_VERTICAL = 9;

const PEOPLE = [
  { image: "keithpitt", name: "<NAME>" },
  { image: "harriet", name: "<NAME>" },
  { image: "ticky", name: "<NAME>" },
  { image: "sj26", name: "<NAME>" },
  { image: "toolmantim", name: "<NAME>" }
];

class SupportDialog extends React.Component {
  static displayName = "Navigation.SupportDialog";

  static propTypes = {
    isOpen: React.PropTypes.bool,
    onRequestClose: React.PropTypes.func
  };

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return (
      <Dialog isOpen={this.props.isOpen} onRequestClose={this.props.onRequestClose}>
        <h1 className="bold mt0 mb4"><Emojify text="We’re here to help :wave:"/></h1>
        <div
          className="mb4"
          style={{
            paddingTop: IMAGE_PADDING_VERTICAL,
            paddingBottom: IMAGE_PADDING_VERTICAL,
            paddingLeft: 15 + IMAGE_PADDING_HORIZONTAL,
            paddingRight: 15 + IMAGE_PADDING_HORIZONTAL
          }}
        >
          {shuffle(PEOPLE).map((person) => (
            <img
              key={person.name}
              src={require(`../../../images/people/${person.image}.jpg`)}
              width={70}
              height={70}
              alt={person.name}
              title={person.name}
              className="circle border border-white"
              style={{
                borderWidth: 2,
                marginTop: -IMAGE_PADDING_VERTICAL,
                marginBottom: -IMAGE_PADDING_VERTICAL,
                marginLeft: -IMAGE_PADDING_HORIZONTAL,
                marginRight: -IMAGE_PADDING_HORIZONTAL
              }}
            />)
          )}
        </div>

        <div className="mx-auto mb4 pt1 px3 sm-col-9">
          If you have a question, problem, or just need a hand send us an email and we’ll help you out!
        </div>

        <div className="pt1">
          <Button href="mailto:<EMAIL>" theme="default" outline={true}>Email <EMAIL></Button>
        </div>
      </Dialog>
    );
  }
}

export default SupportDialog;
{'fraction_non_alphanumeric': 0.13495529216053234, 'fraction_numerical': 0.009565398211686421, 'mean_word_length': 2.317241379310345, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 47, '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': '4223627', 'n_tokens_mistral': 1495, 'n_tokens_neox': 1462, 'n_words': 321}