Merge pull request #158 from lbryio/about-page-text

add a paragraph and links to the About page

app/src/page/about/view.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Lbry } from 'lbry-redux';
 import { NativeModules, Text, View, ScrollView } from 'react-native';
+import Link from '../../component/link';
 import PageHeader from '../../component/pageHeader';
 import aboutStyle from '../../styles/about';
 
@@ -38,6 +39,17 @@ class AboutPage extends React.PureComponent {
         <PageHeader title={"About LBRY"}
           onBackPressed={() => { this.props.navigation.goBack(); }} />
         <ScrollView style={aboutStyle.scrollContainer}>
+          <Text style={aboutStyle.title}>Content Freedom</Text>
+          <Text style={aboutStyle.paragraph}>
+            LBRY is a free, open, and community-run digital marketplace. It is a decentralized peer-to-peer
+            content distribution platform for creators to upload and share content, and earn LBRY credits
+            for their effort. Users will be able to find a wide selection of videos, music, ebooks and other
+            digital content they are interested in.
+          </Text>
+          <View style={aboutStyle.links}>
+            <Link style={aboutStyle.link} href="https://lbry.io/faq/what-is-lbry" text="What is LBRY?" />
+            <Link style={aboutStyle.link} href="https://lbry.io/faq" text="Frequently Asked Questions" />
+          </View>
           <Text style={aboutStyle.releaseInfoTitle}>Release information</Text>
           <View style={aboutStyle.row}>
             <View style={aboutStyle.col}><Text style={aboutStyle.text}>App version</Text></View>

app/src/styles/about.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import Colors from './colors';
 
 const aboutStyle = StyleSheet.create({
   scrollContainer: {
@@ -13,6 +14,33 @@ const aboutStyle = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between'
   },
+  title: {
+    color: Colors.LbryGreen,
+    fontSize: 24,
+    fontFamily: 'Metropolis-SemiBold',
+    marginLeft: 12,
+    marginRight: 12,
+    marginBottom: 8
+  },
+  paragraph: {
+    fontFamily: 'Metropolis-Regular',
+    fontSize: 16,
+    lineHeight: 24,
+    marginLeft: 12,
+    marginRight: 12,
+    marginBottom: 24
+  },
+  links: {
+    marginLeft: 12,
+    marginRight: 12,
+    marginBottom: 12
+  },
+  link: {
+    color: Colors.LbryGreen,
+    fontFamily: 'Metropolis-Regular',
+    fontSize: 16,
+    marginBottom: 24
+  },
   col: {
     alignSelf: 'stretch'
   },
@@ -21,7 +49,7 @@ const aboutStyle = StyleSheet.create({
     marginLeft: 12,
     marginRight: 12,
     marginBottom: 12,
-    fontSize: 14
+    fontSize: 20
   },
   text: {
     fontFamily: 'Metropolis-SemiBold',