From 4f30db69f3f946dcd123e12be1a4fcad7bb1b0ba Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Mon, 23 Mar 2020 10:48:12 +0100
Subject: [PATCH] Introduces License and About components redesign

---
 components/common/app-page.js  | 32 ++++++++++++++++++
 components/settings/about.js   | 60 ++++++++++++++++++----------------
 components/settings/license.js | 29 ++++++++--------
 styles/colors.js               |  1 +
 styles/containers.js           |  6 +++-
 styles/typography.js           | 16 +++++++--
 6 files changed, 98 insertions(+), 46 deletions(-)
 create mode 100644 components/common/app-page.js

diff --git a/components/common/app-page.js b/components/common/app-page.js
new file mode 100644
index 0000000..2e7027d
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/components/settings/about.js b/components/settings/about.js
index 5d289f1..89b37d5 100644
--- a/components/settings/about.js
+++ b/components/settings/about.js
@@ -1,33 +1,35 @@
-import React, { Component } from 'react'
-import { ScrollView } from 'react-native'
+import React from 'react'
+
+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 {
-  render() {
-    return (
-      <ScrollView>
-        <FramedSegment title={labels.aboutSection.title}>
-          <AppText>{labels.aboutSection.text}</AppText>
-        </FramedSegment>
-        <FramedSegment title={labels.philosophy.title}>
-          <AppText>{labels.philosophy.text}</AppText>
-        </FramedSegment>
-        <FramedSegment title={labels.credits.title}>
-          <AppText>{labels.credits.note}</AppText>
-        </FramedSegment>
-        <FramedSegment title={labels.donate.title}>
-          <AppText>{labels.donate.note}</AppText>
-        </FramedSegment>
-        <FramedSegment title={labels.website.title}>
-          <AppText>{links.website.url}</AppText>
-        </FramedSegment>
-        <FramedSegment title={labels.version.title} last>
-          <AppText>{require('../../package.json').version}</AppText>
-        </FramedSegment>
-      </ScrollView>
-    )
-  }
+import labels from '../../i18n/en/settings'
+import links from '../../i18n/en/links'
+
+const AboutSection = () => {
+  return (
+    <AppPage title={labels.aboutSection.title} >
+      <FramedSegment>
+        <AppText>{labels.aboutSection.text}</AppText>
+      </FramedSegment>
+      <FramedSegment title={labels.philosophy.title}>
+        <AppText>{labels.philosophy.text}</AppText>
+      </FramedSegment>
+      <FramedSegment title={labels.credits.title}>
+        <AppText>{labels.credits.note}</AppText>
+      </FramedSegment>
+      <FramedSegment title={labels.donate.title}>
+        <AppText>{labels.donate.note}</AppText>
+      </FramedSegment>
+      <FramedSegment title={labels.website.title}>
+        <AppText>{links.website.url}</AppText>
+      </FramedSegment>
+      <FramedSegment title={labels.version.title} last>
+        <AppText>{require('../../package.json').version}</AppText>
+      </FramedSegment>
+    </AppPage>
+  )
 }
+
+export default AboutSection
diff --git a/components/settings/license.js b/components/settings/license.js
index 7821edd..20e3171 100644
--- a/components/settings/license.js
+++ b/components/settings/license.js
@@ -1,18 +1,19 @@
-import React, { Component } from 'react'
-import { View, ScrollView } from 'react-native'
+import React from 'react'
+
+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 {
-  render() {
-    return (
-      <ScrollView>
-        <View style={styles.framedSegment}>
-          <AppText style={styles.framedSegmentTitle}>{`${labels.license.title} `}</AppText>
-          <AppText>{`${labels.license.text} `}</AppText>
-        </View>
-      </ScrollView>
-    )
-  }
+const License = () => {
+  return (
+    <AppPage title={labels.license.title} >
+      <FramedSegment last >
+        <AppText>{labels.license.text}</AppText>
+      </FramedSegment>
+    </AppPage>
+  )
 }
+
+export default License
diff --git a/styles/colors.js b/styles/colors.js
index 8aecfb9..c1d4859 100644
--- a/styles/colors.js
+++ b/styles/colors.js
@@ -1,4 +1,5 @@
 export default {
+  greenSuperLight: '#E9F2ED',
   grey: '#A5A5A5',
   greyLight: '#D2D2D2',
   greySuperLight: '#F2F2F2',
diff --git a/styles/containers.js b/styles/containers.js
index 8927d29..61cc282 100644
--- a/styles/containers.js
+++ b/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 }
 }
\ No newline at end of file
diff --git a/styles/typography.js b/styles/typography.js
index f73d6f9..81b098d 100644
--- a/styles/typography.js
+++ b/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' }
 }