Introduces License and About components redesign

components/common/app-page.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ScrollView, StyleSheet } from 'react-native'
+
+import AppText from '../common/app-text'
+
+import { Containers, Typography } from '../../styles/redesign'
+
+const AppPage = ({ children, title }) => {
+  return(
+    <ScrollView style={styles.container}>
+      {title && <AppText style={styles.title}>{title}</AppText>}
+      {children}
+    </ScrollView>
+  )
+}
+
+AppPage.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.page
+  },
+  title: {
+    ...Typography.pageTitle
+  }
+})
+
+export default AppPage

components/settings/about.js

@@ -1,33 +1,35 @@
-import React, { Component } from 'react'
+import React from 'react'
-import { ScrollView } from 'react-native'
+
+import AppPage from '../common/app-page'
 import AppText from '../common/app-text'
-import labels from '../../i18n/en/settings'
-import links from '../../i18n/en/links'
 import FramedSegment from '../common/framed-segment'
 
-export default class AboutSection extends Component {
+import labels from '../../i18n/en/settings'
-  render() {
+import links from '../../i18n/en/links'
-    return (
+
-      <ScrollView>
+const AboutSection = () => {
-        <FramedSegment title={labels.aboutSection.title}>
+  return (
-          <AppText>{labels.aboutSection.text}</AppText>
+    <AppPage title={labels.aboutSection.title} >
-        </FramedSegment>
+      <FramedSegment>
-        <FramedSegment title={labels.philosophy.title}>
+        <AppText>{labels.aboutSection.text}</AppText>
-          <AppText>{labels.philosophy.text}</AppText>
+      </FramedSegment>
-        </FramedSegment>
+      <FramedSegment title={labels.philosophy.title}>
-        <FramedSegment title={labels.credits.title}>
+        <AppText>{labels.philosophy.text}</AppText>
-          <AppText>{labels.credits.note}</AppText>
+      </FramedSegment>
-        </FramedSegment>
+      <FramedSegment title={labels.credits.title}>
-        <FramedSegment title={labels.donate.title}>
+        <AppText>{labels.credits.note}</AppText>
-          <AppText>{labels.donate.note}</AppText>
+      </FramedSegment>
-        </FramedSegment>
+      <FramedSegment title={labels.donate.title}>
-        <FramedSegment title={labels.website.title}>
+        <AppText>{labels.donate.note}</AppText>
-          <AppText>{links.website.url}</AppText>
+      </FramedSegment>
-        </FramedSegment>
+      <FramedSegment title={labels.website.title}>
-        <FramedSegment title={labels.version.title} last>
+        <AppText>{links.website.url}</AppText>
-          <AppText>{require('../../package.json').version}</AppText>
+      </FramedSegment>
-        </FramedSegment>
+      <FramedSegment title={labels.version.title} last>
-      </ScrollView>
+        <AppText>{require('../../package.json').version}</AppText>
-    )
+      </FramedSegment>
-  }
+    </AppPage>
+  )
 }
+
+export default AboutSection

components/settings/license.js

@@ -1,18 +1,19 @@
-import React, { Component } from 'react'
+import React from 'react'
-import { View, ScrollView } from 'react-native'
+
+import AppPage from '../common/app-page'
 import AppText from '../common/app-text'
-import styles from '../../styles/index'
+import FramedSegment from '../common/framed-segment'
+
 import labels from '../../i18n/en/settings'
 
-export default class License extends Component {
+const License = () => {
-  render() {
+  return (
-    return (
+    <AppPage title={labels.license.title} >
-      <ScrollView>
+      <FramedSegment last >
-        <View style={styles.framedSegment}>
+        <AppText>{labels.license.text}</AppText>
-          <AppText style={styles.framedSegmentTitle}>{`${labels.license.title} `}</AppText>
+      </FramedSegment>
-          <AppText>{`${labels.license.text} `}</AppText>
+    </AppPage>
-        </View>
+  )
-      </ScrollView>
-    )
-  }
 }
+
+export default License

styles/colors.js

@@ -1,4 +1,5 @@
 export default {
+  greenSuperLight: '#E9F2ED',
   grey: '#A5A5A5',
   greyLight: '#D2D2D2',
   greySuperLight: '#F2F2F2',

styles/containers.js

@@ -5,7 +5,7 @@ export default {
   bottomBorder: {
     borderStyle: 'solid',
     borderBottomWidth: 2,
-    borderBottomColor: Colors.greySuperLight,
+    borderBottomColor: Colors.greyLight,
     paddingBottom: Spacing.base
   },
   centerItems: {
@@ -24,5 +24,9 @@ export default {
     backgroundColor: Colors.orange,
     borderRadius: 25
   },
+  page: {
+    backgroundColor: Colors.greenSuperLight,
+    flex: 1
+  },
   segmentContainer: { marginHorizontal: Spacing.base }
 }

styles/typography.js

@@ -20,6 +20,12 @@ const button = {
   textTransform: 'uppercase'
 }
 
+const title = {
+  color: Colors.purple,
+  marginHorizontal: Spacing.base,
+  marginVertical: Spacing.large
+}
+
 export default {
   buttonTextBold: {
     fontFamily: fonts.bold,
@@ -33,10 +39,16 @@ export default {
     fontFamily: fonts.main,
     fontSize: sizes.mainMedium
   },
+  pageTitle: {
+    alignSelf: 'center',
+    fontFamily: fonts.bold,
+    fontWeight: '700',
+    fontSize: sizes.titleMedium,
+    ...title
+  },
   titleSmall: {
-    color: Colors.purple,
     fontSize: sizes.titleSmall,
-    marginVertical: Spacing.base
+    ...title
   },
   underline: { textDecorationLine: 'underline' }
 }