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 }) {
-  return (
-    <ScrollView testID='licensePage' style={styles.licensePage}>
-      <AppText style={styles.framedSegmentTitle}>{labels.title}</AppText>
-      <AppText testID='test'>{labels.text}</AppText>
-      <View style={styles.licenseButtons}>
-        <Button
-          style={styles.licenseButton}
-          backgroundColor={'grey'}
-          onPress={() => BackHandler.exitApp()}
-          testID='licenseCancelButton'
-        >
-          {shared.cancel}
-        </Button>
-        <Button
-          style={styles.licenseButton}
-          backgroundColor={secondaryColor}
-          onPress={async () => {
+  const onAcceptLicense = async () => {
     await saveLicenseFlag()
     setLicense()
-          }}
-          testID='licenseOkButton'
-        >
+  }
+
+  return (
+    <AppPage testID='licensePage'>
+      <Segment last testID='test' title={labels.title}>
+        <AppText testID='test'>{labels.text}</AppText>
+        <View style={styles.container}>
+          <Button onPress={BackHandler.exitApp} testID='licenseCancelButton'>
+            {shared.cancel}
+          </Button>
+          <Button isCTA onPress={onAcceptLicense} testID='licenseOkButton'>
             {shared.ok}
           </Button>
         </View>
-    </ScrollView>
+      </Segment>
+    </AppPage>
   )
 }
 
 License.propTypes = {
   setLicense: PropTypes.func.isRequired
 }
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer
+  }
+})