react-native-web port of fmf app

1 files changed, 111 insertions, 0 deletions

diff --git a/client/src/lib/timeline/timelineHeader.js b/client/src/lib/timeline/timelineHeader.js
new file mode 100644
index 0000000..559ace9
--- /dev/null
+++ b/client/src/lib/timeline/timelineHeader.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  View,
+  ScrollView,
+} from 'react-native';
+import HTMLView from 'react-native-htmlview'
+
+import htmlStyles from '../components/htmlStyles'
+import Heading from '../components/heading'
+import ClearText from '../components/text'
+import Button from '../components/button'
+import Close from '../components/close'
+
+export default class TimelineHeader extends Component {
+  constructor(props) {
+    super()
+  }
+  render() {
+    if (!! this.props.tag) {
+      return (
+        <View style={styles.tagContainer}></View>
+      )
+    }
+    else {
+      const body = '<p>' + this.props.content.body + '</p>'
+      return (
+        <ScrollView contentContainerStyle={styles.container}>
+          <View style={styles.body}>
+            <Heading>HISTORY OF SURVEILLANCE</Heading>
+            <HTMLView value={body} stylesheet={timelineHTMLStyles} onLinkPress={this.props.onLinkPress} />
+            <Button buttonStyle={styles.buttonStyle} onPress={this.props.onClose} label={'VIEW THE TIMELINE'} />
+          </View>
+        </ScrollView>
+      )
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  body: {
+    marginTop: 20,
+    maxWidth: 650,
+    marginBottom: 10,
+    backgroundColor: 'black',
+    padding: 40,
+  },
+  buttonStyle: {
+    marginTop: 40,
+    marginLeft: 0,
+    marginRight: 0,
+    marginBottom: 0,
+  },
+})
+
+const timelineHTMLStyles =  StyleSheet.create({
+  p: {
+    color: 'white',  
+    fontFamily: 'Futura-Medium',
+    textAlign: 'justify',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  b: {
+    fontFamily: 'Futura-MediumItalic',
+    color: 'white',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  i: {
+    color: 'white',
+    fontFamily: 'Futura-MediumItalic',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  a: {
+    color: 'white',
+    fontFamily: 'Futura-Medium',
+    textDecorationLine: 'underline',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  red: {
+    color: '#f00',
+    fontWeight: 'bold',
+    fontFamily: 'Futura-MediumItalic',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  green: {
+    color: '#0f0',
+    fontWeight: 'bold',
+    fontFamily: 'Futura-MediumItalic',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  blue: {
+    color: '#08f',
+    fontWeight: 'bold',
+    fontFamily: 'Futura-MediumItalic',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+})
+