From 4d8085a0db84dff724353a5de7b4d453b2658496 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 5 Jun 2018 15:53:10 +0100
Subject: [PATCH] add a paragraph and links to the About page

---
 app/src/component/link/view.js | 10 ++++++----
 app/src/page/about/view.js     | 12 ++++++++++++
 app/src/styles/about.js        | 30 +++++++++++++++++++++++++++++-
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/app/src/component/link/view.js b/app/src/component/link/view.js
index 8ea60a19..83e7a478 100644
--- a/app/src/component/link/view.js
+++ b/app/src/component/link/view.js
@@ -23,10 +23,12 @@ export default class Link extends React.PureComponent {
     } = this.props;
     
     let styles = [];
-    if (style.length) {
-      styles = styles.concat(style);
-    } else {
-      styles.push(style);
+    if (style) {
+      if (style.length) {
+        styles = styles.concat(style);
+      } else {
+        styles.push(style);
+      }
     }
     
     return (
diff --git a/app/src/page/about/view.js b/app/src/page/about/view.js
index 9bb1263f..0f33a9c0 100644
--- a/app/src/page/about/view.js
+++ b/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>
diff --git a/app/src/styles/about.js b/app/src/styles/about.js
index f49d2f11..58d7265f 100644
--- a/app/src/styles/about.js
+++ b/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',