diff --git a/components/chart/chart.js b/components/chart/chart.js index cc03963..ce5a9e5 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 f2ed95b..30f8cdc 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' > - ), @@ -130,8 +128,8 @@ export default class DayColumn extends Component { key='mucus' > ), @@ -142,9 +140,9 @@ export default class DayColumn extends Component { key='cervix' > 0 ? 'blue' : 'green'} + backgroundColor={this.props.cervix > 0 ? styles.iconShades.cervix[1] : styles.iconShades.cervix[0]} /> ), @@ -155,8 +153,8 @@ export default class DayColumn extends Component { key='sex' > ), @@ -167,8 +165,8 @@ export default class DayColumn extends Component { key='desire' > ), @@ -179,8 +177,8 @@ export default class DayColumn extends Component { key='pain' > ), @@ -191,8 +189,8 @@ export default class DayColumn extends Component { key='note' > ) diff --git a/components/chart/styles.js b/components/chart/styles.js index 9d5901a..bdf0211 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 ee63b83..28b6ff0 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