diff --git a/app.js b/app.js
index 7735256070bb44b375bfaac4167b7c9242e8d11f..0c951c89f6ed9d0cab544d5ce0d8055acf405be0 100644
--- a/app.js
+++ b/app.js
@@ -7,7 +7,7 @@ import Chart from './components/chart/chart'
import Settings from './components/settings'
import Stats from './components/stats'
-import styles from './styles'
+import styles, { primaryColor } from './styles'
// this is until react native fixes this bugg, see
// https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
@@ -26,9 +26,9 @@ const config = {
labeled: true,
shifting: false,
tabBarOptions: {
- style: {backgroundColor: '#ff7e5f'},
- labelStyle: {fontSize: 15, color: 'white'}
- },
+ style: {backgroundColor: primaryColor },
+ labelStyle: styles.menuLabel
+ }
}
export default createBottomTabNavigator(routes, config)
\ No newline at end of file
diff --git a/components/cycle-day/assets/placeholder.png b/components/cycle-day/assets/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb6a6c98deedf368459cf4c5d5af315f3ab5f739
Binary files /dev/null and b/components/cycle-day/assets/placeholder.png differ
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index b127b7471fe1742792f6f1e3bf9b8bd781799515..dee8a9ebe2a221096951bc1df21d75df38149d4d 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -1,8 +1,9 @@
import React, { Component } from 'react'
import {
View,
- Button,
- Text
+ Text,
+ Image,
+ TouchableOpacity
} from 'react-native'
import styles from '../../styles'
import {
@@ -48,70 +49,50 @@ export default class DayView extends Component {
const cycleDay = this.cycleDay
return (
<View style={styles.symptomEditView}>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Bleeding</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('BleedingEditView')}
- title={getLabel('bleeding', cycleDay.bleeding)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Temperature</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('TemperatureEditView')}
- title={getLabel('temperature', cycleDay.temperature)}>
- </Button>
- </View>
- </View>
- <View style={ styles.symptomViewRowInline }>
- <Text style={styles.symptomDayView}>Mucus</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('MucusEditView')}
- title={getLabel('mucus', cycleDay.mucus)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Cervix</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('CervixEditView')}
- title={getLabel('cervix', cycleDay.cervix)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Note</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('NoteEditView')}
- title={getLabel('note', cycleDay.note)}
- >
- </Button>
- </View>
- </View>
- <View style={ styles.symptomViewRowInline }>
- <Text style={styles.symptomDayView}>Desire</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('DesireEditView')}
- title={getLabel('desire', cycleDay.desire)}>
- </Button>
- </View>
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Sex</Text>
- <View style={styles.symptomEditButton}>
- <Button
- onPress={() => this.showView('SexEditView')}
- title={getLabel('sex', cycleDay.sex)}>
- </Button>
- </View>
- </View>
+ <View style={styles.symptomBoxesView}>
+ <SymptomBox
+ title='Bleeding'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('BleedingEditView')}
+ data={getLabel('bleeding', cycleDay.bleeding)}
+ />
+ <SymptomBox
+ title='Temperature'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('TemperatureEditView')}
+ data={getLabel('temperature', cycleDay.temperature)}
+ />
+ <SymptomBox
+ title='Mucus'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('MucusEditView')}
+ data={getLabel('mucus', cycleDay.mucus)}
+ />
+ <SymptomBox
+ title='Cervix'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('CervixEditView')}
+ data={getLabel('cervix', cycleDay.cervix)}
+ />
+ <SymptomBox
+ title='Note'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('NoteEditView')}
+ data={getLabel('note', cycleDay.note)}
+ />
+ <SymptomBox
+ title='Desire'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('DesireEditView')}
+ data={getLabel('desire', cycleDay.desire)}
+ />
+ <SymptomBox
+ title='Sex'
+ icon={require('./assets/placeholder.png')}
+ onPress={() => this.showView('SexEditView')}
+ data={getLabel('sex', cycleDay.sex)}
+ />
+ </View >
</View >
)
}
@@ -186,3 +167,20 @@ function getLabel(symptomName, symptom) {
if (!symptom) return 'edit'
return labels[symptomName](symptom) || 'edit'
}
+
+class SymptomBox extends Component {
+ render() {
+ return (
+ <TouchableOpacity onPress={this.props.onPress}>
+ <View style={styles.symptomBox}>
+ <Image
+ source={require('./assets/placeholder.png')}
+ style={styles.symptomBoxImage}
+ />
+ <Text>{this.props.title}</Text>
+ <Text>{this.props.data}</Text>
+ </View>
+ </TouchableOpacity>
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js
index 94bb51e4235958076b46bbc7e512b4799231dc27..fab2b2e3c586c3575854f55e2a92d9f66dc20301 100644
--- a/components/cycle-day/index.js
+++ b/components/cycle-day/index.js
@@ -5,7 +5,6 @@ import {
ScrollView
} from 'react-native'
import cycleModule from '../../lib/cycle'
-import { getFertilityStatusStringForDay } from '../../lib/sympto-adapter'
import { formatDateForViewHeader } from './labels/format'
import styles from '../../styles'
import actionButtonModule from './action-buttons'
@@ -50,23 +49,16 @@ export default class Day extends Component {
render() {
const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
- const fertilityStatus = getFertilityStatusStringForDay(this.cycleDay.date)
return (
<ScrollView>
<View style={ styles.cycleDayDateView }>
<Text style={styles.dateHeader}>
{formatDateForViewHeader(this.cycleDay.date)}
</Text>
- </View >
- <View style={ styles.cycleDayNumberView }>
{ cycleDayNumber &&
<Text style={styles.cycleDayNumber} >
Cycle day {cycleDayNumber}
</Text> }
-
- <Text style={styles.cycleDayNumber} >
- {fertilityStatus}
- </Text>
</View >
<View>
{ this.cycleDayViews[this.state.visibleComponent] }
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 7ec0574b924c6556d82239af59d20efbab21966f..ffd1836ec17093f10213f376faa83ffdf4090bb7 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -32,28 +32,30 @@ export default class Bleeding extends Component {
{ label: labels[3], value: 3 },
]
return (
- <View style={styles.symptomEditView}>
- <Text style={styles.symptomDayView}>Bleeding</Text>
- <View style={styles.radioButtonRow}>
- <RadioForm
- radio_props={bleedingRadioProps}
- initial={this.state.currentValue}
- formHorizontal={true}
- labelHorizontal={false}
- labelStyle={styles.radioButton}
- onPress={(itemValue) => {
- this.setState({ currentValue: itemValue })
- }}
- />
- </View>
- <View style={styles.symptomViewRowInline}>
- <Text style={styles.symptomDayView}>Exclude</Text>
- <Switch
- onValueChange={(val) => {
- this.setState({ exclude: val })
- }}
- value={this.state.exclude}
- />
+ <View>
+ <View style={styles.symptomEditView}>
+ <Text style={styles.symptomDayView}>Bleeding</Text>
+ <View style={styles.radioButtonRow}>
+ <RadioForm
+ radio_props={bleedingRadioProps}
+ initial={this.state.currentValue}
+ formHorizontal={true}
+ labelHorizontal={false}
+ labelStyle={styles.radioButton}
+ onPress={(itemValue) => {
+ this.setState({ currentValue: itemValue })
+ }}
+ />
+ </View>
+ <View style={styles.symptomViewRowInline}>
+ <Text style={styles.symptomDayView}>Exclude</Text>
+ <Switch
+ onValueChange={(val) => {
+ this.setState({ exclude: val })
+ }}
+ value={this.state.exclude}
+ />
+ </View>
</View>
<View style={styles.actionButtonRow}>
{this.makeActionButtons(
diff --git a/styles/index.js b/styles/index.js
index fde1700a6900a5120d887c67c0830a20068bbf71..9197f310dc08a22c2b1ea7743f651abb232bdd30 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -1,5 +1,8 @@
import { StyleSheet } from 'react-native'
+export const primaryColor = '#ff7e5f'
+export const secondaryColor = '#351c4d'
+
export default StyleSheet.create({
container: {
justifyContent: 'center',
@@ -12,31 +15,46 @@ export default StyleSheet.create({
textAlignVertical: 'center'
},
dateHeader: {
- fontSize: 20,
+ fontSize: 18,
fontWeight: 'bold',
- margin: 15,
color: 'white',
textAlign: 'center',
- textAlignVertical: 'center'
},
cycleDayNumber: {
- fontSize: 18,
+ fontSize: 15,
+ color: 'white',
textAlign: 'center',
- textAlignVertical: 'center'
+ marginLeft: 15
},
symptomDayView: {
fontSize: 20,
textAlignVertical: 'center'
},
+ symptomBoxImage: {
+ width: 50,
+ height: 50
+ },
radioButton: {
fontSize: 18,
margin: 8,
textAlign: 'center',
textAlignVertical: 'center'
},
- symptomEditView: {
- justifyContent: 'space-between',
- marginHorizontal: 15
+ symptomBoxesView: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'space-evenly'
+ },
+ symptomBox: {
+ borderColor: secondaryColor,
+ borderStyle: 'solid',
+ borderWidth: 1,
+ borderRadius: 10,
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginTop: '20%',
+ minWidth: 100,
+ minHeight: 100
},
symptomEditRow: {
justifyContent: 'space-between',
@@ -50,14 +68,11 @@ export default StyleSheet.create({
height: 50
},
cycleDayDateView: {
+ backgroundColor: primaryColor,
+ padding: 10,
+ flexDirection: 'row',
justifyContent: 'center',
- backgroundColor: 'steelblue'
- },
- cycleDayNumberView: {
- justifyContent: 'center',
- backgroundColor: 'skyblue',
- marginBottom: 15,
- paddingVertical: 15
+ alignItems: 'center'
},
homeButtons: {
marginHorizontal: 15
@@ -88,5 +103,9 @@ export default StyleSheet.create({
margin: 30,
textAlign: 'left',
textAlignVertical: 'center'
- }
+ },
+ menuLabel: {
+ fontSize: 15,
+ color: 'white'
+ },
})
\ No newline at end of file