diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index bb20435..294a176 100644 --- a/components/cycle-day/symptom-box.js +++ b/components/cycle-day/symptom-box.js @@ -15,7 +15,6 @@ import { Colors, Sizes, Spacing } from '../../styles' import { headerTitles as symptomTitles } from '../../i18n/en/labels' class SymptomBox extends Component { - static propTypes = { date: PropTypes.string.isRequired, isSymptomEdited: PropTypes.bool, @@ -33,7 +32,7 @@ class SymptomBox extends Component { super(props) this.state = { - isSymptomEdited: props.isSymptomEdited + isSymptomEdited: props.isSymptomEdited, } } @@ -58,24 +57,24 @@ class SymptomBox extends Component { const iconName = `drip-icon-${symptom}` const symptomNameStyle = [ styles.symptomName, - (isSymptomDisabled && styles.symptomNameDisabled), - (isExcluded && styles.symptomNameExcluded) + isSymptomDisabled && styles.symptomNameDisabled, + isExcluded && styles.symptomNameExcluded, ] const textStyle = [ styles.text, - (isSymptomDisabled && styles.textDisabled), - (isExcluded && styles.textExcluded) + isSymptomDisabled && styles.textDisabled, + isExcluded && styles.textExcluded, ] return ( - {isSymptomEdited && + {isSymptomEdited && ( - } + )} {symptomTitles[symptom].toLowerCase()} - {symptomDataToDisplay && - + {symptomDataToDisplay && ( + {symptomDataToDisplay} - } + )} @@ -112,20 +111,20 @@ const styles = StyleSheet.create({ borderRadius: scale(10), elevation: 4, flexDirection: 'row', - height: scale(120), + height: scale(110), marginBottom: Spacing.base, paddingHorizontal: Spacing.small, paddingVertical: Spacing.base, - width: Spacing.symptomTileWidth + width: Spacing.symptomTileWidth, }, symptomName: { paddingTop: Sizes.tiny, color: Colors.purple, fontSize: Sizes.base, - lineHeight: Sizes.base + lineHeight: Sizes.base, }, symptomNameDisabled: { - color: Colors.grey + color: Colors.grey, }, symptomNameExcluded: { color: Colors.greyDark, @@ -134,28 +133,24 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'center', marginLeft: Spacing.tiny, - maxWidth: Spacing.textWidth + maxWidth: Spacing.textWidth, }, text: { fontSize: Sizes.small, fontStyle: 'italic', - lineHeight: Sizes.small }, textDisabled: { - color: Colors.greyLight + color: Colors.greyLight, }, textExcluded: { color: Colors.grey, - } + }, }) const mapStateToProps = (state) => { - return({ + return { date: getDate(state), - }) + } } -export default connect( - mapStateToProps, - null, -)(SymptomBox) +export default connect(mapStateToProps, null)(SymptomBox)