Introduces SettingsMenu component redesign

components/common/app-icon.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet } from 'react-native'
+import Icon from 'react-native-vector-icons/Entypo'
+
+import { Colors, Sizes } from '../../styles/redesign'
+
+const AppIcon = ({ isCTA, name }) => {
+  const style = isCTA ? styles.iconCTA : styles.icon
+
+  return <Icon name={name} style={style}/>
+}
+
+AppIcon.propTypes = {
+  isCTA: PropTypes.bool,
+  name: PropTypes.string.isRequired
+}
+
+AppIcon.defaultProps = {
+  isCTA: true
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    color: 'black',
+    fontSize: Sizes.subtitle
+  },
+  iconCTA: {
+    color: Colors.orange,
+    fontSize: Sizes.subtitle
+  }
+})
+
+export default AppIcon

components/common/segment.js

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
 
-import { Colors, Spacing, Sizes, Typography } from '../../styles/redesign'
+import { Containers, Spacing, Sizes, Typography } from '../../styles/redesign'
 
 const Segment = ({ children, last, title }) => {
   const containerStyle = last ? styles.containerLast : styles.container
@@ -23,13 +23,6 @@ Segment.propTypes = {
   title: PropTypes.string
 }
 
-const bottomBorder = {
-  borderStyle: 'solid',
-  borderBottomWidth: 2,
-  borderBottomColor: Colors.grey,
-  paddingBottom: Spacing.base
-}
-
 const segmentContainer = {
   marginHorizontal: Spacing.base,
   marginBottom: Spacing.base,
@@ -38,7 +31,7 @@ const segmentContainer = {
 const styles = StyleSheet.create({
   container: {
     ...segmentContainer,
-    ...bottomBorder
+    ...Containers.bottomBorder
   },
   containerLast: {
     ...segmentContainer