Merge branch 'add-cancel-button' into 'master'

Add cancel button to ConfirmWithPassword component

Closes #274

See merge request bloodyhealth/drip!148

components/settings/shared/confirm-with-password.js

@@ -64,7 +64,6 @@ export default class ConfirmWithPassword extends Component {
   }
 
   render() {
-
     const { password } = this.state
     const labels = settings.passwordSettings
 
@@ -75,12 +74,27 @@ export default class ConfirmWithPassword extends Component {
           value={password}
           onChangeText={this.handlePasswordInput}
         />
-        <SettingsButton
-          onPress={this.initPasswordCheck}
-          disabled={!password}
-        >
-          {shared.confirmToProceed}
-        </SettingsButton>
+        <View style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'space-between'
+        }}>
+          <SettingsButton
+            onPress={this.props.onCancel}
+            secondary
+          >
+            {shared.cancel}
+          </SettingsButton>
+          <SettingsButton
+            onPress={this.initPasswordCheck}
+            disabled={!password}
+            style={{
+              flex: 1,
+            }}
+          >
+            {shared.confirmToProceed}
+          </SettingsButton>
+        </View>
       </View>
     )
 

components/settings/shared/settings-button.js

@@ -5,16 +5,22 @@ import { TouchableOpacity } from 'react-native'
 import AppText from '../../app-text'
 import styles from '../../../styles'
 
-const SettingsButton = ({ children, ...props }) => {
+const SettingsButton = ({ children, style, secondary, ...props }) => {
   return (
     <TouchableOpacity
       style={[
         styles.settingsButton,
-        props.disabled ? styles.settingsButtonDisabled : null
+        secondary ? null : styles.settingsButtonAccent,
+        props.disabled ? styles.settingsButtonDisabled : null,
+        style
       ]}
       { ...props }
     >
-      <AppText style={styles.settingsButtonText}>
+      <AppText style={
+        secondary ?
+          styles.settingsButtonSecondaryText :
+          styles.settingsButtonText
+      }>
         {children}
       </AppText>
     </TouchableOpacity>

styles/index.js

@@ -280,10 +280,12 @@ export default StyleSheet.create({
     fontWeight: 'bold'
   },
   settingsButton: {
-    backgroundColor: secondaryColor,
     padding: 10,
     alignItems: 'center',
-    margin: 10,
+    margin: 10
+  },
+  settingsButtonAccent: {
+    backgroundColor: secondaryColor
   },
   settingsButtonDisabled: {
     backgroundColor: colorInActive
@@ -291,6 +293,10 @@ export default StyleSheet.create({
   settingsButtonText: {
     color: fontOnPrimaryColor
   },
+  settingsButtonSecondaryText: {
+    color: secondaryColor
+
+  },
   statsRow: {
     flexDirection: 'row',
     width: '100%'