Merge pull request #114 from thornbill/update-settings-style

Update settings style

components/ButtonListItem.js

@@ -5,20 +5,33 @@
  */
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import { Button } from 'react-native-elements';
+import { Button, ListItem } from 'react-native-elements';
 import PropTypes from 'prop-types';
 
-const ButtonListItem = ({item}) => (
-  <Button {...item} buttonStyle={{ ...styles.button, ...item.buttonStyle }} />
+const ButtonListItem = ({item, index}) => (
+  <ListItem
+    title={
+      <Button
+        {...item}
+        type='clear'
+        buttonStyle={{ ...styles.button, ...item.buttonStyle }}
+        titleStyle={{ ...styles.title, ...item.titleStyle }}
+      />
+    }
+    topDivider={index === 0}
+    bottomDivider
+  />
 );
 
 ButtonListItem.propTypes = {
-  item: PropTypes.object.isRequired
+  item: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired
 };
 
 const styles = StyleSheet.create({
   button: {
-    marginHorizontal: 15
+    justifyContent: 'flex-start',
+    padding: 0
   }
 });
 

components/SwitchListItem.js

@@ -8,22 +8,20 @@ import { Switch } from 'react-native';
 import { ListItem } from 'react-native-elements';
 import PropTypes from 'prop-types';
 
-const SwitchListItem = ({item, index}) => {
-  return (
-    <ListItem
-      title={item.title}
-      subtitle={item.subtitle}
-      rightElement={
-        <Switch
-          value={item.value}
-          onValueChange={item.onValueChange}
-        />
-      }
-      topDivider={index === 0}
-      bottomDivider
-    />
-  );
-};
+const SwitchListItem = ({item, index}) => (
+  <ListItem
+    title={item.title}
+    subtitle={item.subtitle}
+    rightElement={
+      <Switch
+        value={item.value}
+        onValueChange={item.onValueChange}
+      />
+    }
+    topDivider={index === 0}
+    bottomDivider
+  />
+);
 
 SwitchListItem.propTypes = {
   item: PropTypes.object.isRequired,

screens/SettingsScreen.js

@@ -146,8 +146,8 @@ const SettingsScreen = observer(() => {
         data: [{
           key: 'reset-app-button',
           title: t('alerts.resetApplication.title'),
-          buttonStyle: {
-            backgroundColor: Platform.OS === 'ios' ? colors.platform.ios.error : colors.platform.android.error
+          titleStyle: {
+            color: Platform.OS === 'ios' ? colors.platform.ios.error : colors.platform.android.error
           },
           onPress: onResetApplication
         }],
@@ -165,7 +165,9 @@ const SettingsScreen = observer(() => {
           isFetching: rootStore.serverStore.fetchInfo.pending
         }}
         renderItem={({ item }) => <Text>{JSON.stringify(item)}</Text>}
-        renderSectionHeader={({ section: { title, hideHeader } }) => hideHeader ? null : <Text style={styles.header}>{title}</Text>}
+        renderSectionHeader={({ section: { title, hideHeader } }) => (
+          hideHeader ? <View style={styles.emptyHeader} /> : <Text style={styles.header}>{title}</Text>
+        )}
         renderSectionFooter={() => <View style={styles.footer} />}
         ListFooterComponent={AppInfoFooter}
         showsVerticalScrollIndicator={false}
@@ -188,6 +190,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 15,
     marginBottom: 1
   },
+  emptyHeader: {
+    marginTop: 15
+  },
   footer: {
     marginBottom: 15
   }

utils/Theme.js

@@ -39,7 +39,7 @@ export default {
   },
   ListItem: {
     containerStyle: {
-      backgroundColor: Colors.backgroundColor
+      backgroundColor: Colors.headerBackgroundColor
     },
     subtitleStyle: {
       color: colors.grey4,