Introduces License page redesign

components/license.js

@@ -1,44 +1,49 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { ScrollView, View, BackHandler } from 'react-native'
+import { BackHandler, StyleSheet, View } from 'react-native'
+
+import AppPage from './common/app-page'
 import AppText from './common/app-text'
-import { shared } from '../i18n/en/labels'
-import settingsLabels from '../i18n/en/settings'
-import styles,{secondaryColor} from '../styles'
 import Button from './common/button'
+import Segment from './common/segment'
+
 import { saveLicenseFlag } from '../local-storage'
 
+import { shared } from '../i18n/en/labels'
+import settingsLabels from '../i18n/en/settings'
+import { Containers } from '../styles/redesign'
+
 const labels = settingsLabels.license
-export default function License({setLicense}) {
+
+export default function License({ setLicense }) {
+  const onAcceptLicense = async () => {
+    await saveLicenseFlag()
+    setLicense()
+  }
+
   return (
-    <ScrollView testID='licensePage' style={styles.licensePage}>
+    <AppPage testID='licensePage'>
-      <AppText style={styles.framedSegmentTitle}>{labels.title}</AppText>
+      <Segment last testID='test' title={labels.title}>
-      <AppText testID='test'>{labels.text}</AppText>
+        <AppText testID='test'>{labels.text}</AppText>
-      <View style={styles.licenseButtons}>
+        <View style={styles.container}>
-        <Button
+          <Button onPress={BackHandler.exitApp} testID='licenseCancelButton'>
-          style={styles.licenseButton}
+            {shared.cancel}
-          backgroundColor={'grey'}
+          </Button>
-          onPress={() => BackHandler.exitApp()}
+          <Button isCTA onPress={onAcceptLicense} testID='licenseOkButton'>
-          testID='licenseCancelButton'
+            {shared.ok}
-        >
+          </Button>
-          {shared.cancel}
+        </View>
-        </Button>
+      </Segment>
-        <Button
+    </AppPage>
-          style={styles.licenseButton}
-          backgroundColor={secondaryColor}
-          onPress={async () => {
-            await saveLicenseFlag()
-            setLicense()
-          }}
-          testID='licenseOkButton'
-        >
-          {shared.ok}
-        </Button>
-      </View>
-    </ScrollView>
   )
 }
 
 License.propTypes = {
   setLicense: PropTypes.func.isRequired
 }
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer
+  }
+})