<commit_before>import React from 'react';
import { Text, ScrollView, View, StyleSheet, Image, TouchableHighlight } from 'react-native';

const styles = StyleSheet.create({
  container: {
    padding: 10,
    flex: 1,
    flexDirection: 'row',
    borderTopWidth: 5,
    borderColor:'#777'
  },
  output: {
    flex: 15
  },
  trashContainer: {
    flex: 1
  },
  trashImage: {
    tintColor: '#777',
    width: 20,
    height: 20,
    alignSelf:'flex-end'
  }
});

const successStyle = StyleSheet.create({
  text: {
    color: 'black'
  }
});

const errorStyle = StyleSheet.create({
  text: {
    color: 'darkred'
  }
});

const Output = ({ output, status, onClearOutput }) =>
  <View style={styles.container}>
    <View style={styles.output}>
      <ScrollView >
        {output.length ? output.map((line, i) => {
          const styles = line.status === 'ERROR' ? errorStyle : successStyle;
          return (
            <View key={i} style={styles.lineWrapper}>
              <Text style={styles.text}>
                {line.message}
              </Text>
            </View>
          );
        }) : null}
      </ScrollView>
    </View>
    <View style={styles.trashContainer}>
      <TouchableHighlight onPress={() => onClearOutput()}>
        <Image 
          style={styles.trashImage}
          source={require('../../assets/delete.png')}
        />
      </TouchableHighlight>
    </View>
  </View>

export default Output;<commit_msg>Fix highlight issue with trash<commit_after>import React from 'react';
import { Text, ScrollView, View, StyleSheet, Image, TouchableOpacity } from 'react-native';

const styles = StyleSheet.create({
  container: {
    padding: 10,
    flex: 1,
    flexDirection: 'row',
    borderTopWidth: 5,
    borderColor:'#777'
  },
  output: {
    flex: 15
  },
  trashContainer: {
    flex: 1
  },
  trashImage: {
    tintColor: '#777',
    width: 20,
    height: 20,
    alignSelf:'flex-end'
  }
});

const successStyle = StyleSheet.create({
  text: {
    color: 'black'
  }
});

const errorStyle = StyleSheet.create({
  text: {
    color: 'darkred'
  }
});

const Output = ({ output, status, onClearOutput }) =>
  <View style={styles.container}>
    <View style={styles.output}>
      <ScrollView >
        {output.length ? output.map((line, i) => {
          const styles = line.status === 'ERROR' ? errorStyle : successStyle;
          return (
            <View key={i} style={styles.lineWrapper}>
              <Text style={styles.text}>
                {line.message}
              </Text>
            </View>
          );
        }) : null}
      </ScrollView>
    </View>
    <View style={styles.trashContainer}>
      <TouchableOpacity onPress={() => onClearOutput()}>
        <Image 
          style={styles.trashImage}
          source={require('../../assets/delete.png')}
        />
      </TouchableOpacity>
    </View>
  </View>

export default Output;
{'fraction_non_alphanumeric': 0.15432311401997933, 'fraction_numerical': 0.011712022046159145, 'mean_word_length': 2.273957158962796, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 39, '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': '4193832', 'n_tokens_mistral': 931, 'n_tokens_neox': 896, 'n_words': 197}