diff --git a/components/cycle-day/radio-button-group.js b/components/cycle-day/radio-button-group.js
deleted file mode 100644
index 8b7ffacd7a1c3b6f3c07b86de0a6cfddfe53c044..0000000000000000000000000000000000000000
--- a/components/cycle-day/radio-button-group.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react'
-import {
- View,
- TouchableOpacity,
-} from 'react-native'
-import styles from '../../styles'
-import { AppText } from '../app-text'
-
-export default class RadioButton extends Component {
- render() {
- return (
- <View style={styles.radioButtonGroup}>
- {
- this.props.buttons.map(({ label, value }) => {
- const isActive = value === this.props.active
- return (
- <TouchableOpacity
- onPress={() => this.props.onSelect(value)}
- key={value}
- activeOpacity={1}
- >
- <View style={styles.radioButtonTextGroup}>
- <View style={styles.radioButton}>
- {isActive ?
- <View style={styles.radioButtonActiveDot}/> : null}
- </View>
- <AppText>{label}</AppText>
- </View>
- </TouchableOpacity>
- )
- })
- }
- </View>
- )
- }
-}
\ No newline at end of file
diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js
new file mode 100644
index 0000000000000000000000000000000000000000..f40224071e5906800f3c0cecb1bb0dc4dd8829be
--- /dev/null
+++ b/components/cycle-day/select-tab-group.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import {
+ View,
+ TouchableOpacity,
+} from 'react-native'
+import styles from '../../styles'
+import { AppText } from '../app-text'
+
+export default class SelectTabGroup extends Component {
+ render() {
+ return (
+ <View style={styles.selectTabGroup}>
+ {
+ this.props.buttons.map(({ label, value }, i) => {
+ let firstOrLastStyle
+ if (i === this.props.buttons.length - 1) {
+ firstOrLastStyle = styles.selectTabLast
+ } else if (i === 0) {
+ firstOrLastStyle = styles.selectTabFirst
+ }
+ let activeStyle
+ const isActive = value === this.props.active
+ if (isActive) activeStyle = styles.selectTabActive
+ return (
+ <TouchableOpacity
+ onPress={() => this.props.onSelect(value)}
+ key={value}
+ activeOpacity={1}
+ >
+ <View style={styles.radioButtonTextGroup}>
+ <View style={[
+ styles.selectTab,
+ firstOrLastStyle,
+ activeStyle
+ ]}>
+ <AppText style={activeStyle}>{label}</AppText>
+ </View>
+ </View>
+ </TouchableOpacity>
+ )
+ })
+ }
+ </View>
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 57a084acdcc6c0cccd4a22c6f1cd62b0a2770e9a..132116272c8f49f4b02fbd4a10d43b9bf4b0c293 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -8,7 +8,7 @@ import styles from '../../../styles'
import { saveSymptom } from '../../../db'
import { bleeding as labels } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
import { SymptomSectionHeader, AppText } from '../../app-text'
export default class Bleeding extends Component {
@@ -39,7 +39,7 @@ export default class Bleeding extends Component {
<View>
<SymptomSectionHeader>Heaviness</SymptomSectionHeader>
<AppText>How heavy is the bleeding?</AppText>
- <RadioButtonGroup
+ <SelectTabGroup
buttons={bleedingRadioProps}
active={this.state.currentValue}
onSelect={val => this.setState({ currentValue: val })}
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index 86d46aae3af7ef733685ed469a90c76132ac8081..ba1872e0d6b9c77ce3b9fadaa90b27fc5ee3dec8 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -12,7 +12,7 @@ import {
cervixPosition as positionLabels
} from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
import { SymptomSectionHeader } from '../../app-text'
export default class Cervix extends Component {
@@ -54,19 +54,19 @@ export default class Cervix extends Component {
<ScrollView style={styles.page}>
<View>
<SymptomSectionHeader>Opening</SymptomSectionHeader>
- <RadioButtonGroup
+ <SelectTabGroup
buttons={cervixOpeningRadioProps}
active={this.state.opening}
onSelect={val => this.setState({ opening: val })}
/>
<SymptomSectionHeader>Firmness</SymptomSectionHeader>
- <RadioButtonGroup
+ <SelectTabGroup
buttons={cervixFirmnessRadioProps}
active={this.state.firmness}
onSelect={val => this.setState({ firmness: val })}
/>
<SymptomSectionHeader>Position</SymptomSectionHeader>
- <RadioButtonGroup
+ <SelectTabGroup
buttons={cervixPositionRadioProps}
active={this.state.position}
onSelect={val => this.setState({ position: val })}
diff --git a/components/cycle-day/symptoms/desire.js b/components/cycle-day/symptoms/desire.js
index 64a0306ea8cb46c6fcc053061a273c50f89c7600..d78bcff4a0c0ebf4e690622c26d23b7ee679b422 100644
--- a/components/cycle-day/symptoms/desire.js
+++ b/components/cycle-day/symptoms/desire.js
@@ -7,7 +7,7 @@ import styles from '../../../styles'
import { saveSymptom } from '../../../db'
import { intensity as labels } from '../labels/labels'
import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
export default class Desire extends Component {
constructor(props) {
@@ -31,7 +31,7 @@ export default class Desire extends Component {
<View style={{ flex: 1 }}>
<ScrollView style={styles.page}>
<View>
- <RadioButtonGroup
+ <SelectTabGroup
buttons={desireRadioProps}
acitve={this.state.currentValue}
onSelect={val => this.setState({ currentValue: val })}
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index f8c35343c3ea765d1f5c5c5deae3fbd7d8a93596..586fcb234307cd9d866ff3e821d08b51e3f716cd 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -12,7 +12,7 @@ import {
} from '../labels/labels'
import computeSensiplanValue from '../../../lib/sensiplan-mucus'
import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
import { SymptomSectionHeader } from '../../app-text'
@@ -52,13 +52,13 @@ export default class Mucus extends Component {
<ScrollView style={styles.page}>
<View>
<SymptomSectionHeader>Feeling</SymptomSectionHeader>
- <RadioButtonGroup
+ <SelectTabGroup
buttons={mucusFeeling}
onSelect={val => this.setState({ feeling: val })}
active={this.state.feeling}
/>
<SymptomSectionHeader>Texture</SymptomSectionHeader>
- <RadioButtonGroup
+ <SelectTabGroup
buttons={mucusTexture}
onSelect={val => this.setState({ texture: val })}
active={this.state.texture}
diff --git a/styles/index.js b/styles/index.js
index b357a8287af8f9babf92a283e99f90df3aacef4f..e3fd7d2ff300a7aea1a34299d6930ea3442031f8 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -213,31 +213,33 @@ export default StyleSheet.create({
flexWrap: 'wrap',
marginVertical: 10,
},
- radioButtonGroup: {
- marginTop: 10
+ selectTabGroup: {
+ marginTop: 10,
+ flexDirection: 'row'
},
- radioButton: {
- width: 20,
- height: 20,
- borderRadius: 100,
+ selectTab: {
+ backgroundColor: 'lightgrey',
borderStyle: 'solid',
- borderWidth: 2,
- borderColor: secondaryColor,
+ borderLeftWidth: 1,
+ paddingVertical: 10,
+ paddingHorizontal: 15,
+ borderColor: 'white',
marginBottom: 3,
- marginRight: 10,
alignItems: 'center',
justifyContent: 'center'
},
- radioButtonActiveDot: {
- width: 10,
- height: 10,
- borderRadius: 100,
- backgroundColor: secondaryColor
+ selectTabActive: {
+ backgroundColor: secondaryColor,
+ color: fontOnPrimaryColor
},
- radioButtonTextGroup: {
- marginRight: 10,
- flexDirection: 'row',
- marginBottom: 10
+ selectTabLast: {
+ borderTopRightRadius: 10,
+ borderBottomRightRadius: 10,
+ },
+ selectTabFirst: {
+ borderTopLeftRadius: 10,
+ borderBottomLeftRadius: 10,
+ borderLeftWidth: null
},
page: {
marginHorizontal: 10