Moves Segment stiles to local file, separates MenuItem component.

components/common/segment.js

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
 
-import { Containers, Spacing, Typography } from '../../styles/redesign'
+import { Colors, Spacing, Typography } from '../../styles/redesign'
 
 const Segment = ({ children, last, title }) => {
   const containerStyle = last ? styles.containerLast : styles.container
@@ -30,8 +30,11 @@ const segmentContainer = {
 
 const styles = StyleSheet.create({
   container: {
-    ...segmentContainer,
+    borderStyle: 'solid',
-    ...Containers.bottomBorder
+    borderBottomWidth: 2,
+    borderBottomColor: Colors.grey,
+    paddingBottom: Spacing.base,
+    ...segmentContainer
   },
   containerLast: {
     ...segmentContainer

components/settings/menu-item.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+
+import AppIcon from '../common/app-icon'
+import AppText from '../common/app-text'
+import Segment from '../common/segment'
+
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { Colors, Containers, Sizes } from '../../styles/redesign'
+
+const MenuItem = ({ item, last, navigate }) => {
+  return (
+    <Segment last={last}>
+      <TouchableOpacity
+        style={styles.container}
+        key={item.name}
+        onPress={() => navigate(item.component)}
+      >
+        <View>
+          <AppText style={styles.title}>{item.name}</AppText>
+          {item.text.length > 0 && <AppText>{item.text}</AppText>}
+        </View>
+        <AppIcon name={'chevron-right'} isCTA/>
+      </TouchableOpacity>
+    </Segment>
+  )
+}
+
+MenuItem.propTypes = {
+  item: PropTypes.object.isRequired,
+  last: PropTypes.bool.isRequired,
+  navigate: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer
+  },
+  title: {
+    color: Colors.purple,
+    fontSize: Sizes.subtitle
+  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(MenuItem)

components/settings/settings-menu.js

@@ -1,15 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
-import AppIcon from '../common/app-icon'
 import AppPage from '../common/app-page'
-import AppText from '../common/app-text'
+import MenuItem from './menu-item'
 
-import { connect } from 'react-redux'
-import { navigate } from '../../slices/navigation'
-
-import { Colors, Containers, Sizes, Spacing } from '../../styles/redesign'
 import settingsLabels from '../../i18n/en/settings'
 
 const { menuItems } = settingsLabels
@@ -20,71 +13,17 @@ const menu = [
   { ...menuItems.password, component: 'Password'}
 ]
 
-const SettingsMenu = ({ navigate }) => {
+const SettingsMenu = () => {
   return (
     <AppPage title={settingsLabels.title}>
-      {menu.map((menuItem, i) =>
+      {menu.map((menuItem, i) => {
-        <MenuItem item={menuItem} i={i} navigate={navigate} key={i}/>
+        const last = (menu.length === i + 1)
+
+        return <MenuItem item={menuItem} key={i} last={last}/>
+      }
       )}
     </AppPage>
   )
 }
 
-SettingsMenu.propTypes = {
+export default SettingsMenu
-  navigate: PropTypes.func.isRequired
-}
-
-const MenuItem = ({ i, item, navigate }) => {
-  const isLast = (menu.length === i + 1)
-  const containerStyle = isLast ? styles.containerLast : styles.container
-
-  return (
-    <TouchableOpacity
-      style={containerStyle}
-      key={item.name}
-      onPress={() => navigate(item.component)}
-    >
-      <View>
-        <AppText style={styles.title}>{item.name}</AppText>
-        {item.text.length > 0 && <AppText>{item.text}</AppText>}
-      </View>
-      <AppIcon name={'chevron-right'} isCTA/>
-    </TouchableOpacity>
-  )
-}
-
-MenuItem.propTypes = {
-  i: PropTypes.number.isRequired,
-  item: PropTypes.object.isRequired,
-  navigate: PropTypes.func.isRequired
-}
-
-const menuItemContainer = {
-  margin: Spacing.base,
-  ...Containers.rowContainer
-}
-
-const styles = StyleSheet.create({
-  container: {
-    ...menuItemContainer,
-    ...Containers.bottomBorder
-  },
-  containerLast: {
-    ...menuItemContainer
-  },
-  title: {
-    color: Colors.purple,
-    fontSize: Sizes.subtitle
-  },
-})
-
-const mapDispatchToProps = (dispatch) => {
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  null,
-  mapDispatchToProps
-)(SettingsMenu)

styles/containers.js

@@ -1,13 +1,4 @@
-import Colors from './colors'
-import Spacing from './spacing'
-
 export default {
-  bottomBorder: {
-    borderStyle: 'solid',
-    borderBottomWidth: 2,
-    borderBottomColor: Colors.grey,
-    paddingBottom: Spacing.base
-  },
   centerItems: {
     alignItems: 'center',
     flex: 1,