<commit_before>import React from 'react';
import Header from '../apps/Header';
import Grommet from 'grommet';
import Social from '../apps/Social';
import Footer from '../apps/Footer';
import SponsorsBar from '../common/SponsorsBar';
import MainContainer from '../common/MainContainer';
import MediaQuery from 'react-responsive';

import {History, State, RouteHandler} from 'react-router';


export default React.createClass({

  displayName: 'App',

  propTypes: {
    children: React.PropTypes.element.isRequired
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  mixins: [
    History,
    State
  ],

  getStyles() {
    return {
      mainView: {
        maxWidth: 1320,
        margin: 'auto'
      },
      mainDiv: {
        color: '#565a5f',
        backgroundColor: '#f5f8f9'
      },
      container: {
        marginTop: 24
      },
      xlSide: {
        width: '25%'
      },
      xlCenter: {
        width: '50%'
      },
      sSide: {
        width: '100%'
      },
      sCenter: {
        width: '100%'
      }
    };
  },

  render() {
    let styles = this.getStyles();

    return (
      <div style={styles.mainDiv}>
        <div style={styles.mainView}>
          <Header/>
          <div style={styles.container}>
            <MediaQuery orientation='portrait'>
              <div style={styles.sSide}>
                <Social/>
              </div>
              <div style={styles.sCenter}>
                <MainContainer>
                  {this.props.children}
                </MainContainer>
              </div>
              <div style={styles.sSide}>
                <SponsorsBar/>
              </div>
            </MediaQuery>
            <MediaQuery orientation='landscape' >
                <MediaQuery minWidth={768} style={{display: 'flex'}}>
                  <div style={styles.xlSide}>
                    <Social/>
                  </div>
                  <div style={styles.xlCenter}>
                    <MainContainer>
                      {this.props.children}
                    </MainContainer>
                  </div>
                  <div style={styles.xlSide}>
                    <SponsorsBar/>
                  </div>
                </MediaQuery>
                <MediaQuery maxWidth={768}>
                  <div style={styles.sSide}>
                    <Social/>
                  </div>
                  <div style={styles.sCenter}>
                    <MainContainer>
                      {this.props.children}
                    </MainContainer>
                  </div>
                  <div style={styles.sSide}>
                    <SponsorsBar/>
                  </div>
                </MediaQuery>
            </MediaQuery>
          </div>
          <Footer/>
        </div>
      </div>
    );
  }
});
<commit_msg>[HAC-85] changed inline styles for mediaqueries components<commit_after>import React from 'react';
import Header from '../apps/Header';
import Grommet from 'grommet';
import Social from '../apps/Social';
import Footer from '../apps/Footer';
import SponsorsBar from '../common/SponsorsBar';
import MainContainer from '../common/MainContainer';
import MediaQuery from 'react-responsive';

import {History, State, RouteHandler} from 'react-router';


export default React.createClass({

  displayName: 'App',

  propTypes: {
    children: React.PropTypes.element.isRequired
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  mixins: [
    History,
    State
  ],

  getStyles() {
    return {
      mainView: {
        maxWidth: 1320,
        margin: 'auto'
      },
      mainDiv: {
        color: '#565a5f',
        backgroundColor: '#f5f8f9'
      },
      container: {
        marginTop: 24
      },
      boxColumns: {
        display: 'flex',
        flexDirection: 'column'
      },
      boxRows: {
        display: 'flex',
        flexDirection: 'row'
      },
      xlSide: {
        width: '25%'
      },
      xlCenter: {
        width: '50%'
      },
      sSide: {
        width: '100%'
      },
      sCenter: {
        width: '100%'
      }
    };
  },

  render() {
    let styles = this.getStyles();

    return (
      <div style={styles.mainDiv}>
        <div style={styles.mainView}>
          <Header/>
          <div style={styles.container}>
            <MediaQuery orientation='portrait' style={styles.boxColumns}>
              <div style={styles.sSide}>
                <Social/>
              </div>
              <div style={styles.sCenter}>
                <MainContainer>
                  {this.props.children}
                </MainContainer>
              </div>
              <div style={styles.sSide}>
                <SponsorsBar/>
              </div>
            </MediaQuery>
            <MediaQuery orientation='landscape' >
                <MediaQuery minWidth={768} style={styles.boxRows}>
                  <div style={styles.xlSide}>
                    <Social/>
                  </div>
                  <div style={styles.xlCenter}>
                    <MainContainer>
                      {this.props.children}
                    </MainContainer>
                  </div>
                  <div style={styles.xlSide}>
                    <SponsorsBar/>
                  </div>
                </MediaQuery>
                <MediaQuery maxWidth={768} style={styles.boxColumns}>
                  <div style={styles.sSide}>
                    <Social/>
                  </div>
                  <div style={styles.sCenter}>
                    <MainContainer>
                      {this.props.children}
                    </MainContainer>
                  </div>
                  <div style={styles.sSide}>
                    <SponsorsBar/>
                  </div>
                </MediaQuery>
            </MediaQuery>
          </div>
          <Footer/>
        </div>
      </div>
    );
  }
});

{'fraction_non_alphanumeric': 0.12796610169491526, 'fraction_numerical': 0.010169491525423728, 'mean_word_length': 1.2925407925407926, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 95, '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': '2451846', 'n_tokens_mistral': 1689, 'n_tokens_neox': 1563, 'n_words': 319}