<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { action, computed } from 'mobx';
import { observer, inject } from 'mobx-react';
import { RoutedAnchor } from 'grommet';
import styled, { css } from 'styled-components';
import color from 'grommet/utils/colors';
import Icon from '../components/icon';

const activeStyle = css`
  background-color: ${props => color.colorForName('border', props.theme)};
`;

const MenuLink = styled(RoutedAnchor)`
  padding: 10px 0 10px 10px;
  color: ${props => color.colorForName('light-1', props.theme)};
  ${props => props.isActive && activeStyle}
  &:hover {
    text-decoration: none;
    background-color: ${props => color.colorForName('neutral-3', props.theme)};
  }
`;

export { MenuLink };

@inject('routing')
@observer
export class MenuOption extends React.Component {

    static propTypes = {
        onSelection: PropTypes.func.isRequired,
        screen: PropTypes.shape({
            title:   PropTypes.string.isRequired,
            icon:    PropTypes.string.isRequired,
            display: PropTypes.func.isRequired,
        }).isRequired,
    }

    static contextTypes = {
        router: PropTypes.object,
    }

    @action.bound
    activateScreen() {
        this.props.onSelection(this.props.screen);
        this.props.screen.display();
    }

    @computed get path() {
        return `/${this.props.screen.id}`;
    }

    @computed get isActive() {
        const { location } = this.props.routing;
        return this.path === location.pathname;
    }


    render() {
        const { screen } = this.props;
        return (
            <MenuLink
                isActive={this.isActive}
                icon={<Icon name={screen.icon} />}
                label={screen.title}
                path={this.path}
                onClick={this.activateScreen}
            />
        );
    }

}
<commit_msg>display as flex so menu vertically aligns<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { action, computed } from 'mobx';
import { observer, inject } from 'mobx-react';
import { RoutedAnchor } from 'grommet';
import styled, { css } from 'styled-components';
import color from 'grommet/utils/colors';
import Icon from '../components/icon';

const activeStyle = css`
  background-color: ${props => color.colorForName('border', props.theme)};
`;

const MenuLink = styled(RoutedAnchor)`
  display: flex;
  > * {
    display: flex;
    align-items: center;
  }
  padding: 10px 0 10px 10px;
  color: ${props => color.colorForName('light-1', props.theme)};
  ${props => props.isActive && activeStyle}
  &:hover {
    text-decoration: none;
    background-color: ${props => color.colorForName('neutral-3', props.theme)};
  }
`;

export { MenuLink };

@inject('routing')
@observer
export class MenuOption extends React.Component {

    static propTypes = {
        onSelection: PropTypes.func.isRequired,
        screen: PropTypes.shape({
            title:   PropTypes.string.isRequired,
            icon:    PropTypes.string.isRequired,
            display: PropTypes.func.isRequired,
        }).isRequired,
    }

    static contextTypes = {
        router: PropTypes.object,
    }

    @action.bound
    activateScreen() {
        this.props.onSelection(this.props.screen);
        this.props.screen.display();
    }

    @computed get path() {
        return `/${this.props.screen.id}`;
    }

    @computed get isActive() {
        const { location } = this.props.routing;
        return this.path === location.pathname;
    }


    render() {
        const { screen } = this.props;
        return (
            <MenuLink
                isActive={this.isActive}
                icon={<Icon name={screen.icon} />}
                label={screen.title}
                path={this.path}
                onClick={this.activateScreen}
            />
        );
    }

}

{'fraction_non_alphanumeric': 0.13471901462663588, 'fraction_numerical': 0.004618937644341801, 'mean_word_length': 2.443462897526502, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 16, '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': '4639681', 'n_tokens_mistral': 1169, 'n_tokens_neox': 1143, 'n_words': 252}