From ad38a090525603a5d0023b184158e02434acda42 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 31 Jul 2018 15:45:33 +0100
Subject: [PATCH] added Discord and social media links to the About page

---
 app/src/page/about/view.js | 27 +++++++++++++++++++--------
 app/src/styles/about.js    |  9 ++++++++-
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/app/src/page/about/view.js b/app/src/page/about/view.js
index 0f33a9c0..29edd73c 100644
--- a/app/src/page/about/view.js
+++ b/app/src/page/about/view.js
@@ -11,11 +11,11 @@ class AboutPage extends React.PureComponent {
     lbryId: null,
     versionInfo: null
   };
-  
+
   componentDidMount() {
     if (NativeModules.VersionInfo) {
       NativeModules.VersionInfo.getAppVersion().then(version => {
-        this.setState({appVersion: version});  
+        this.setState({appVersion: version});
       });
     }
     Lbry.version().then(info => {
@@ -29,11 +29,11 @@ class AboutPage extends React.PureComponent {
       });
     });
   }
-  
+
   render() {
     const loading = 'Loading...';
     const ver = this.state.versionInfo ? this.state.versionInfo : null;
-    
+
     return (
       <View>
         <PageHeader title={"About LBRY"}
@@ -50,27 +50,38 @@ class AboutPage extends React.PureComponent {
             <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.socialTitle}>Get Social</Text>
+          <Text style={aboutStyle.paragraph}>
+            You can interact with the LBRY team and members of the community on Discord, Facebook, Instagram, Twitter or Reddit.
+          </Text>
+          <View style={aboutStyle.links}>
+            <Link style={aboutStyle.link} href="https://discordapp.com/invite/Z3bERWA" text="Discord" />
+            <Link style={aboutStyle.link} href="https://www.facebook.com/LBRYio" text="Facebook" />
+            <Link style={aboutStyle.link} href="https://www.instagram.com/LBRYio/" text="Instagram" />
+            <Link style={aboutStyle.link} href="https://twitter.com/LBRYio" text="Twitter" />
+            <Link style={aboutStyle.link} href="https://reddit.com/r/lbry" text="Reddit" />
+          </View>
           <Text style={aboutStyle.releaseInfoTitle}>Release information</Text>
           <View style={aboutStyle.row}>
             <View style={aboutStyle.col}><Text style={aboutStyle.text}>App version</Text></View>
             <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{this.state.appVersion}</Text></View>
           </View>
-          
+
           <View style={aboutStyle.row}>
             <View style={aboutStyle.col}><Text style={aboutStyle.text}>Daemon (lbrynet)</Text></View>
             <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{ver ? ver.lbrynet_version : loading }</Text></View>
           </View>
-          
+
           <View style={aboutStyle.row}>
             <View style={aboutStyle.col}><Text style={aboutStyle.text}>Wallet (lbryum)</Text></View>
             <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{ver ? ver.lbryum_version : loading }</Text></View>
           </View>
-        
+
           <View style={aboutStyle.row}>
             <View style={aboutStyle.col}><Text style={aboutStyle.text}>Platform</Text></View>
             <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{ver ? ver.platform : loading }</Text></View>
           </View>
-          
+
           <View style={aboutStyle.row}>
             <View style={aboutStyle.col}>
               <Text style={aboutStyle.text}>Installation ID</Text>
diff --git a/app/src/styles/about.js b/app/src/styles/about.js
index 58d7265f..d9697294 100644
--- a/app/src/styles/about.js
+++ b/app/src/styles/about.js
@@ -33,7 +33,7 @@ const aboutStyle = StyleSheet.create({
   links: {
     marginLeft: 12,
     marginRight: 12,
-    marginBottom: 12
+    marginBottom: 18
   },
   link: {
     color: Colors.LbryGreen,
@@ -44,6 +44,13 @@ const aboutStyle = StyleSheet.create({
   col: {
     alignSelf: 'stretch'
   },
+  socialTitle: {
+    fontFamily: 'Metropolis-Regular',
+    marginLeft: 12,
+    marginRight: 12,
+    marginBottom: 8,
+    fontSize: 20
+  },
   releaseInfoTitle: {
     fontFamily: 'Metropolis-Regular',
     marginLeft: 12,