diff --git a/components/cycle-day/radio-button-group.js b/components/cycle-day/radio-button-group.js index 4ef8358..0881809 100644 --- a/components/cycle-day/radio-button-group.js +++ b/components/cycle-day/radio-button-group.js @@ -12,10 +12,8 @@ export default class RadioButton extends Component { { this.props.buttons.map(({ label, value }) => { + const isActive = value === this.props.active const circleStyle = [styles.radioButton] - if (value === this.props.active) { - circleStyle.push(styles.radioButtonActive) - } return ( this.props.onSelect(value)} @@ -23,7 +21,10 @@ export default class RadioButton extends Component { activeOpacity={1} > - + + {isActive ? + : null} + {label} diff --git a/styles/index.js b/styles/index.js index 7cc0c14..9a1e6a9 100644 --- a/styles/index.js +++ b/styles/index.js @@ -209,17 +209,21 @@ export default StyleSheet.create({ marginVertical: 10, }, radioButton: { - width: 30, - height: 30, + width: 20, + height: 20, borderRadius: 100, borderStyle: 'solid', borderWidth: 2, borderColor: secondaryColor, - marginBottom: 5 + marginBottom: 5, + alignItems: 'center', + justifyContent: 'center' }, - radioButtonActive: { - backgroundColor: secondaryColor, - color: fontOnPrimaryColor + radioButtonActiveDot: { + width: 10, + height: 10, + borderRadius: 100, + backgroundColor: secondaryColor }, radioButtonGroup: { flexDirection: 'row',