From 714d9fd681ea343bdd5739a0246f8a31c25df764 Mon Sep 17 00:00:00 2001
From: Sofiya Tepikin <sofiya.tepikin@gmail.com>
Date: Wed, 9 Jan 2019 23:33:51 +0100
Subject: [PATCH] Styles the buttons in password confirmation
---
.../settings/shared/confirm-with-password.js | 33 ++++++++++++-------
components/settings/shared/settings-button.js | 12 +++++--
styles/index.js | 10 ++++--
3 files changed, 38 insertions(+), 17 deletions(-)
diff --git a/components/settings/shared/confirm-with-password.js b/components/settings/shared/confirm-with-password.js
index b4344c75..0f34422a 100644
--- a/components/settings/shared/confirm-with-password.js
+++ b/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,17 +74,27 @@ export default class ConfirmWithPassword extends Component {
value={password}
onChangeText={this.handlePasswordInput}
/>
- <SettingsButton
- onPress={this.initPasswordCheck}
- disabled={!password}
- >
- {shared.confirmToProceed}
- </SettingsButton>
- <SettingsButton
- onPress={this.props.onCancel}
- >
- {shared.cancel}
- </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>
)
diff --git a/components/settings/shared/settings-button.js b/components/settings/shared/settings-button.js
index 97272bb2..00bc8ed5 100644
--- a/components/settings/shared/settings-button.js
+++ b/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>
diff --git a/styles/index.js b/styles/index.js
index 08487b27..8c758e21 100644
--- a/styles/index.js
+++ b/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%'
--
GitLab