add a paragraph and links to the About page

This commit is contained in:
Akinwale Ariwodola 2018-06-05 15:53:10 +01:00
parent 8c3ca2161d
commit 4d8085a0db
3 changed files with 47 additions and 5 deletions

View file

@ -23,11 +23,13 @@ export default class Link extends React.PureComponent {
} = this.props; } = this.props;
let styles = []; let styles = [];
if (style) {
if (style.length) { if (style.length) {
styles = styles.concat(style); styles = styles.concat(style);
} else { } else {
styles.push(style); styles.push(style);
} }
}
return ( return (
<TouchableOpacity onPress={onPress ? onPress : this.handlePress}> <TouchableOpacity onPress={onPress ? onPress : this.handlePress}>

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Lbry } from 'lbry-redux'; import { Lbry } from 'lbry-redux';
import { NativeModules, Text, View, ScrollView } from 'react-native'; import { NativeModules, Text, View, ScrollView } from 'react-native';
import Link from '../../component/link';
import PageHeader from '../../component/pageHeader'; import PageHeader from '../../component/pageHeader';
import aboutStyle from '../../styles/about'; import aboutStyle from '../../styles/about';
@ -38,6 +39,17 @@ class AboutPage extends React.PureComponent {
<PageHeader title={"About LBRY"} <PageHeader title={"About LBRY"}
onBackPressed={() => { this.props.navigation.goBack(); }} /> onBackPressed={() => { this.props.navigation.goBack(); }} />
<ScrollView style={aboutStyle.scrollContainer}> <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> <Text style={aboutStyle.releaseInfoTitle}>Release information</Text>
<View style={aboutStyle.row}> <View style={aboutStyle.row}>
<View style={aboutStyle.col}><Text style={aboutStyle.text}>App version</Text></View> <View style={aboutStyle.col}><Text style={aboutStyle.text}>App version</Text></View>

View file

@ -1,4 +1,5 @@
import { StyleSheet } from 'react-native'; import { StyleSheet } from 'react-native';
import Colors from './colors';
const aboutStyle = StyleSheet.create({ const aboutStyle = StyleSheet.create({
scrollContainer: { scrollContainer: {
@ -13,6 +14,33 @@ const aboutStyle = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between' 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: { col: {
alignSelf: 'stretch' alignSelf: 'stretch'
}, },
@ -21,7 +49,7 @@ const aboutStyle = StyleSheet.create({
marginLeft: 12, marginLeft: 12,
marginRight: 12, marginRight: 12,
marginBottom: 12, marginBottom: 12,
fontSize: 14 fontSize: 20
}, },
text: { text: {
fontFamily: 'Metropolis-SemiBold', fontFamily: 'Metropolis-SemiBold',