Introduces data management section redesign

components/settings/data-management/delete-data.js

@@ -3,12 +3,13 @@ import RNFS from 'react-native-fs'
 import { Alert, ToastAndroid } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { clearDb, isDbEmpty } from '../../../db'
-import { hasEncryptionObservable } from '../../../local-storage'
-import SettingsButton from '../shared/settings-button'
+import Button from '../../common/button'
+
 import ConfirmWithPassword from '../shared/confirm-with-password'
 import alertError from '../shared/alert-error'
 
+import { clearDb, isDbEmpty } from '../../../db'
+import { hasEncryptionObservable } from '../../../local-storage'
 import settings from '../../../i18n/en/settings'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import { EXPORT_FILE_NAME } from './constants'
@@ -18,6 +19,7 @@ const exportedFilePath = `${RNFS.DocumentDirectoryPath}/${EXPORT_FILE_NAME}`
 export default class DeleteData extends Component {
   constructor() {
     super()
+
     this.state = {
       isPasswordSet: hasEncryptionObservable.value,
       isConfirmingWithPassword: false
@@ -92,9 +94,9 @@ export default class DeleteData extends Component {
     }
 
     return (
-      <SettingsButton onPress={this.alertBeforeDeletion}>
+      <Button isCTA onPress={this.alertBeforeDeletion}>
         {settings.deleteSegment.title}
-      </SettingsButton>
+      </Button>
     )
   }
 }

components/settings/data-management/index.js

 import React, { Component } from 'react'
-import { ScrollView, View } from 'react-native'
+
+import AppLoadingView from '../../common/app-loading'
+import AppPage from '../../common/app-page'
 import AppText from '../../common/app-text'
+import Button from '../../common/button'
 import Segment from '../../common/segment'
-import AppLoadingView from '../../common/app-loading'
-import SettingsButton from '../shared/settings-button'
+
 import { openImportDialog, getFileContent, importData } from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
 import DeleteData from './delete-data'
+
 import labels from '../../../i18n/en/settings'
 
 export default class DataManagement extends Component {
 
   constructor(props) {
     super(props)
+
     this.state = {
       isLoading: false,
       currentAction: null
@@ -51,41 +55,36 @@ export default class DataManagement extends Component {
   }
 
   render() {
-    const { currentAction } = this.state
+    const { currentAction, isLoading } = this.state
+    const isDeletingData = currentAction === 'delete'
+
     return (
-      <View flex={1}>
-        {this.state.isLoading && <AppLoadingView />}
-        {!this.state.isLoading &&
-          <ScrollView>
-            <View>
-              <Segment title={labels.export.button}>
-                <AppText>{labels.export.segmentExplainer}</AppText>
-                <SettingsButton onPress={this.startExport}>
-                  {labels.export.button}
-                </SettingsButton>
-              </Segment>
-              <Segment title={labels.import.button}>
-                <AppText>{labels.import.segmentExplainer}</AppText>
-                <SettingsButton
-                  onPress= {this.startImport}
-                >
-                  {labels.import.button}
-                </SettingsButton>
-              </Segment>
-              <Segment
-                title={labels.deleteSegment.title}
-                last
-              >
-                <AppText>{labels.deleteSegment.explainer}</AppText>
-                <DeleteData
-                  isDeletingData = { currentAction === 'delete' }
-                  onStartDeletion = {() => this.setCurrentAction('delete')}
-                />
-              </Segment>
-            </View>
-          </ScrollView>
+      <AppPage>
+        {isLoading && <AppLoadingView />}
+        {!isLoading &&
+          <React.Fragment>
+            <Segment title={labels.export.button}>
+              <AppText>{labels.export.segmentExplainer}</AppText>
+              <Button isCTA onPress={this.startExport}>
+                {labels.export.button}
+              </Button>
+            </Segment>
+            <Segment title={labels.import.button}>
+              <AppText>{labels.import.segmentExplainer}</AppText>
+              <Button isCTA onPress= {this.startImport}>
+                {labels.import.button}
+              </Button>
+            </Segment>
+            <Segment title={labels.deleteSegment.title} last>
+              <AppText>{labels.deleteSegment.explainer}</AppText>
+              <DeleteData
+                isDeletingData = {isDeletingData}
+                onStartDeletion = {() => this.setCurrentAction('delete')}
+              />
+            </Segment>
+          </React.Fragment>
         }
-      </View>
+      </AppPage>
     )
   }
 }
\ No newline at end of file