diff --git a/assets/bleeding.js b/assets/bleeding.js
new file mode 100644
index 0000000..d2f6772
--- /dev/null
+++ b/assets/bleeding.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+
+export default function BleedingIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/assets/cervix.js b/assets/cervix.js
new file mode 100644
index 0000000..bab3667
--- /dev/null
+++ b/assets/cervix.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+
+export default function CervixIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/assets/desire.js b/assets/desire.js
new file mode 100644
index 0000000..aba2415
--- /dev/null
+++ b/assets/desire.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+
+export default function DesireIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/assets/mucus.js b/assets/mucus.js
new file mode 100644
index 0000000..cc721af
--- /dev/null
+++ b/assets/mucus.js
@@ -0,0 +1,75 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+
+export default function MucusIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/assets/note.js b/assets/note.js
new file mode 100644
index 0000000..3413143
--- /dev/null
+++ b/assets/note.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+
+export default function NoteIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/assets/pain.js b/assets/pain.js
new file mode 100644
index 0000000..dae6ea8
--- /dev/null
+++ b/assets/pain.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+
+export default function PainIcon() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/assets/sex.js b/assets/sex.js
new file mode 100644
index 0000000..db8e175
--- /dev/null
+++ b/assets/sex.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+
+export default function SexIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/assets/temperature.js b/assets/temperature.js
new file mode 100644
index 0000000..403d88e
--- /dev/null
+++ b/assets/temperature.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+
+export default function TemperatureIcon() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 14219f2..775e299 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -6,13 +6,21 @@ import {
Dimensions
} from 'react-native'
import { LocalDate } from 'js-joda'
+import Svg, { G } from 'react-native-svg'
import Header from '../header'
import { getOrCreateCycleDay } from '../../db'
import cycleModule from '../../lib/cycle'
-import Icon from 'react-native-vector-icons/FontAwesome'
-import styles, { iconStyles } from '../../styles'
+import styles from '../../styles'
import * as labels from './labels/labels'
import { AppText } from '../app-text'
+import BleedingIcon from '../../assets/bleeding'
+import CervixIcon from '../../assets/cervix'
+import DesireIcon from '../../assets/desire'
+import MucusIcon from '../../assets/mucus'
+import NoteIcon from '../../assets/note'
+import PainIcon from '../../assets/pain'
+import SexIcon from '../../assets/sex'
+import TemperatureIcon from '../../assets/temperature'
const bleedingLabels = labels.bleeding
const feelingLabels = labels.mucus.feeling.categories
@@ -68,48 +76,64 @@ export default class CycleDayOverView extends Component {
onPress={() => this.navigate('BleedingEditView')}
data={getLabel('bleeding', cycleDay.bleeding)}
disabled={dateInFuture}
- />
+ >
+
+
this.navigate('TemperatureEditView')}
data={getLabel('temperature', cycleDay.temperature)}
disabled={dateInFuture}
- />
+ >
+
+
this.navigate('MucusEditView')}
data={getLabel('mucus', cycleDay.mucus)}
disabled={dateInFuture}
- />
+ >
+
+
this.navigate('CervixEditView')}
data={getLabel('cervix', cycleDay.cervix)}
disabled={dateInFuture}
- />
+ >
+
+
this.navigate('DesireEditView')}
data={getLabel('desire', cycleDay.desire)}
disabled={dateInFuture}
- />
+ >
+
+
this.navigate('SexEditView')}
data={getLabel('sex', cycleDay.sex)}
disabled={dateInFuture}
- />
+ >
+
+
this.navigate('PainEditView')}
data={getLabel('pain', cycleDay.pain)}
disabled={dateInFuture}
- />
+ >
+
+
this.navigate('NoteEditView')}
data={getLabel('note', cycleDay.note)}
- />
+ >
+
+
{/* this is just to make the last row adhere to the grid
(and) because there are no pseudo properties in RN */}
@@ -222,10 +246,6 @@ class SymptomBox extends Component {
render() {
const d = this.props.data
const boxActive = d ? styles.symptomBoxActive : {}
- const iconActive = d ? iconStyles.symptomBoxActive : {}
- const iconStyle = Object.assign(
- {}, iconStyles.symptomBox, iconActive, disabledStyle
- )
const textActive = d ? styles.symptomTextActive : {}
const disabledStyle = this.props.disabled ? styles.symptomInFuture : {}
@@ -235,10 +255,20 @@ class SymptomBox extends Component {
disabled={this.props.disabled}
>
-
+
+ {this.props.children ?
+ React.Children.map(this.props.children, child => {
+ return (
+
+ )
+ })
+ : null
+ }
+
{this.props.title}