diff --git a/components/chart/chart.js b/components/chart/chart.js index cc03963c9526eb1fd9b4a28f5252de9b7324d98c..ce5a9e57c2ebebdd81a06675b8c38d7c59413df3 100644 --- a/components/chart/chart.js +++ b/components/chart/chart.js @@ -111,7 +111,7 @@ export default class CycleChart extends Component { (cycleDay.cervix.opening + cycleDay.cervix.firmness) } else if (symptom === 'sex') { // solo = 1 + partner = 2 - acc.sex = cycleDay.sex && (cycleDay.sex.solo + cycleDay.sex.partner) + acc.sex = cycleDay.sex && (cycleDay.sex.solo + 2 * cycleDay.sex.partner) } else if (symptom === 'pain') { // is any pain documented? acc.pain = cycleDay.pain && diff --git a/components/chart/day-column.js b/components/chart/day-column.js index f2ed95b54bc2ff783e76b03fcd80ed55ad9ca0f9..30f8cdc3aafa8a40dc092f267c555661e8d78c28 100644 --- a/components/chart/day-column.js +++ b/components/chart/day-column.js @@ -3,7 +3,6 @@ import { Text, View, TouchableOpacity } from 'react-native' import Svg,{ G, Rect, Line } from 'react-native-svg' -import Icon from 'react-native-vector-icons/Entypo' import styles from './styles' import config from '../../config' import { getOrCreateCycleDay } from '../../db' @@ -116,10 +115,9 @@ export default class DayColumn extends Component { symptomHeight={symptomHeight} key='bleeding' > - <Icon - name='drop' - size={12} - color={styles.bleedingIconShades[this.props.bleeding]} + <View + {...styles.symptomIcon} + backgroundColor={styles.iconShades.bleeding[this.props.bleeding]} /> </SymptomIconView> ), @@ -130,8 +128,8 @@ export default class DayColumn extends Component { key='mucus' > <View - {...styles.mucusIcon} - backgroundColor={styles.mucusIconShades[this.props.mucus]} + {...styles.symptomIcon} + backgroundColor={styles.iconShades.mucus[this.props.mucus]} /> </SymptomIconView> ), @@ -142,9 +140,9 @@ export default class DayColumn extends Component { key='cervix' > <View - {...styles.mucusIcon} + {...styles.symptomIcon} // cervix is sum of openess and firmness - fertile only when closed and hard (=0) - backgroundColor={this.props.cervix > 0 ? 'blue' : 'green'} + backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[1] : styles.iconShades.cervix[0]} /> </SymptomIconView> ), @@ -155,8 +153,8 @@ export default class DayColumn extends Component { key='sex' > <View - {...styles.mucusIcon} - backgroundColor='orange' + {...styles.symptomIcon} + backgroundColor={styles.iconShades.sex[this.props.sex - 1]} /> </SymptomIconView> ), @@ -167,8 +165,8 @@ export default class DayColumn extends Component { key='desire' > <View - {...styles.mucusIcon} - backgroundColor='red' + {...styles.symptomIcon} + backgroundColor={styles.iconShades.desire[this.props.desire]} /> </SymptomIconView> ), @@ -179,8 +177,8 @@ export default class DayColumn extends Component { key='pain' > <View - {...styles.mucusIcon} - backgroundColor='blue' + {...styles.symptomIcon} + backgroundColor={styles.iconShades.pain} /> </SymptomIconView> ), @@ -191,8 +189,8 @@ export default class DayColumn extends Component { key='note' > <View - {...styles.mucusIcon} - backgroundColor='green' + {...styles.symptomIcon} + backgroundColor={styles.iconShades.note} /> </SymptomIconView> ) diff --git a/components/chart/styles.js b/components/chart/styles.js index 9d5901aa65734cde3ff2dfb89d6c96af6c7958f1..bdf0211ef549dd06025dfe80913bd5c6863f61f1 100644 --- a/components/chart/styles.js +++ b/components/chart/styles.js @@ -48,25 +48,39 @@ const styles = { fill: 'transparent' } }, - bleedingIcon: { - fill: '#fb2e01', - scale: 0.6, - x: 6, - y: 3 - }, - bleedingIconShades: shadesOfRed, - mucusIcon: { + symptomIcon: { width: 12, height: 12, borderRadius: 50, }, - mucusIconShades: [ - '#fef0e4', - '#fee1ca', - '#fed2af', - '#fec395', - '#feb47b' - ], + iconShades: { + 'bleeding': shadesOfRed, + 'mucus': [ + '#e8f6a4', + '#bccd67', + '#91a437', + '#6a7b15', + '#445200', + ], + 'cervix': [ + '#f0e19d', + '#e9d26d', + '#e2c33c', + '#dbb40c', + ], + 'sex': [ + '#A66FA6', + '#8A458A', + '#6f2565', + ], + 'desire': [ + '#68113f', + '#8b2e5f', + '#ad5784', + ], + 'pain': ['#7689A9'], + 'note': ['#6CA299'] + }, yAxis: { width: 27, borderRightWidth: 1, diff --git a/styles/index.js b/styles/index.js index ee63b83cb349ba7716827c8c74183b85b8fdc1d7..28b6ff016c68650aeacf50582594faac4735a5cb 100644 --- a/styles/index.js +++ b/styles/index.js @@ -4,7 +4,12 @@ export const primaryColor = '#ff7e5f' export const secondaryColor = '#351c4d' export const secondaryColorLight = '#91749d' export const fontOnPrimaryColor = 'white' -export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark +export const shadesOfRed = [ + '#e7999e', + '#db666d', + '#cf323d', + '#c3000d' +] // light to dark const defaultBottomMargin = 5 const defaultIndentation = 10