<commit_before>import React from 'react';
import Modal from './modal';

class Nav extends React.Component {
  render() {
    let modal = null;
    if (this.props.modal) {
      modal = React.createElement(
        Modal,
        this.props,
        React.createElement(this.props.modal.component, this.props)
      );
    }

    let userNav = (<div className="button pull-right" onClick={this.props.openModal.bind(this, 'login')}>Log in</div>);
    if (this.props.user) {
      const color = '#' + this.props.user.color;
      const letter = this.props.user.name.substr(0, 1);
      userNav = (
        <div className="avatar" style={{backgroundColor: color}}>{letter}</div>
      );
    }

    return (
      <div className="nav-container">
        <nav>
          {userNav}
          <a href="/"><img className="logo" src="/public/images/logo.png" /></a>
        </nav>
        {modal}
      </div>
    );
  }
}

Nav.propTypes = {
  modal: React.PropTypes.shape({
    component: React.PropTypes.func,
  }),
  user: React.PropTypes.shape({
    name: React.PropTypes.string,
    color: React.PropTypes.string,
  }),
  openModal: React.PropTypes.func.isRequired,
};<commit_msg>Avatar tweaks<commit_after>import React from 'react';
import Modal from './modal';

class Nav extends React.Component {
  render() {
    let modal = null;
    if (this.props.modal) {
      modal = React.createElement(
        Modal,
        this.props,
        React.createElement(this.props.modal.component, this.props)
      );
    }

    let userNav = (<div className="button pull-right" onClick={this.props.openModal.bind(this, 'login')}>Log in</div>);
    if (this.props.user) {
      const color = '#' + this.props.user.color;
      const letter = this.props.user.name.substr(0, 1).toUpperCase();
      userNav = (
        <div className="avatar pull-right" style={{backgroundColor: color}}>{letter}</div>
      );
    }

    return (
      <div className="nav-container">
        <nav>
          {userNav}
          <a href="/"><img className="logo" src="/public/images/logo.png" /></a>
        </nav>
        {modal}
      </div>
    );
  }
}

Nav.propTypes = {
  modal: React.PropTypes.shape({
    component: React.PropTypes.func,
  }),
  user: React.PropTypes.shape({
    name: React.PropTypes.string,
    color: React.PropTypes.string,
  }),
  openModal: React.PropTypes.func.isRequired,
};
{'fraction_non_alphanumeric': 0.16238956668068993, 'fraction_numerical': 0.0016827934371055953, 'mean_word_length': 2.5334323922734026, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, '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': '5071973', 'n_tokens_mistral': 767, 'n_tokens_neox': 760, 'n_words': 146}