Skip to content
Snippets Groups Projects
Commit 8a29f08d authored by BloodyMarie's avatar BloodyMarie
Browse files

Cycle Day styling improvements

parent 655f6b31
No related branches found
No related tags found
No related merge requests found
......@@ -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 (
<React.Fragment>
{isSymptomEdited &&
{isSymptomEdited && (
<SymptomEditView
symptom={symptom}
symptomData={symptomData}
onClose={this.onFinishEditing}
/>
}
)}
<TouchableOpacity
disabled={isSymptomDisabled}
......@@ -93,11 +92,11 @@ class SymptomBox extends Component {
<AppText style={symptomNameStyle}>
{symptomTitles[symptom].toLowerCase()}
</AppText>
{symptomDataToDisplay &&
<AppText style={textStyle} numberOfLines={4} >
{symptomDataToDisplay && (
<AppText style={textStyle} numberOfLines={4}>
{symptomDataToDisplay}
</AppText>
}
)}
</View>
</TouchableOpacity>
</React.Fragment>
......@@ -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)
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment