From 1c390f784cc2028b547acbab197bf8a516a577f4 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 17 Aug 2018 08:59:44 +0200
Subject: [PATCH] Use realistic icon and set active state

---
 components/cycle-day/assets/placeholder.png | Bin 4782 -> 0 bytes
 components/cycle-day/cycle-day-overview.js  |  45 ++++++++++----------
 styles/index.js                             |  12 ++++++
 3 files changed, 35 insertions(+), 22 deletions(-)
 delete mode 100644 components/cycle-day/assets/placeholder.png

diff --git a/components/cycle-day/assets/placeholder.png b/components/cycle-day/assets/placeholder.png
deleted file mode 100644
index fb6a6c98deedf368459cf4c5d5af315f3ab5f739..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4782
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

diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 4b75224..19e0084 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -2,11 +2,11 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Image,
   TouchableOpacity,
   Dimensions
 } from 'react-native'
-import styles from '../../styles'
+import Icon from 'react-native-vector-icons/FontAwesome'
+import styles, { iconStyles } from '../../styles'
 import {
   bleeding as bleedingLabels,
   mucusFeeling as feelingLabels,
@@ -25,44 +25,37 @@ export default class DayView extends Component {
       <View style={styles.symptomBoxesView}>
         <SymptomBox
           title='Bleeding'
-          icon={require('./assets/placeholder.png')}
-          onPress={() => this.showView('BleedingEditView')}
+          onPress={() => this.props.showView('BleedingEditView')}
           data={getLabel('bleeding', cycleDay.bleeding)}
         />
         <SymptomBox
           title='Temperature'
-          icon={require('./assets/placeholder.png')}
-          onPress={() => this.showView('TemperatureEditView')}
+          onPress={() => this.props.showView('TemperatureEditView')}
           data={getLabel('temperature', cycleDay.temperature)}
         />
         <SymptomBox
           title='Mucus'
-          icon={require('./assets/placeholder.png')}
-          onPress={() => this.showView('MucusEditView')}
+          onPress={() => this.props.showView('MucusEditView')}
           data={getLabel('mucus', cycleDay.mucus)}
         />
         <SymptomBox
           title='Cervix'
-          icon={require('./assets/placeholder.png')}
-          onPress={() => this.showView('CervixEditView')}
+          onPress={() => this.props.showView('CervixEditView')}
           data={getLabel('cervix', cycleDay.cervix)}
         />
         <SymptomBox
           title='Note'
-          icon={require('./assets/placeholder.png')}
-          onPress={() => this.showView('NoteEditView')}
+          onPress={() => this.props.showView('NoteEditView')}
           data={getLabel('note', cycleDay.note)}
         />
         <SymptomBox
           title='Desire'
-          icon={require('./assets/placeholder.png')}
-          onPress={() => this.showView('DesireEditView')}
+          onPress={() => this.props.showView('DesireEditView')}
           data={getLabel('desire', cycleDay.desire)}
         />
         <SymptomBox
           title='Sex'
-          icon={require('./assets/placeholder.png')}
-          onPress={() => this.showView('SexEditView')}
+          onPress={() => this.props.showView('SexEditView')}
           data={getLabel('sex', cycleDay.sex)}
         />
         {/*  this is just to make the last row adhere to the grid
@@ -145,15 +138,23 @@ function getLabel(symptomName, symptom) {
 
 class SymptomBox extends Component {
   render() {
+    const d = this.props.data
+    const boxActive = d ? styles.symptomBoxActive : {}
+    const iconActive = d ? iconStyles.symptomBoxActive : {}
+    const textStyle = d ? styles.symptomTextActive : {}
+
+    const symptomBoxStyle = Object.assign({}, styles.symptomBox, boxActive)
+    const iconStyle = Object.assign({}, iconStyles.symptomBox, iconActive)
+
     return (
       <TouchableOpacity onPress={this.props.onPress}>
-        <View style={styles.symptomBox}>
-          <Image
-            source={require('./assets/placeholder.png')}
-            style={styles.symptomBoxImage}
+        <View style={symptomBoxStyle}>
+          <Icon
+            name='thermometer'
+            {...iconStyle}
           />
-          <Text>{this.props.title}</Text>
-          <Text>{this.props.data}</Text>
+          <Text style={textStyle}>{this.props.title}</Text>
+          <Text style={textStyle}>{this.props.data}</Text>
         </View>
       </TouchableOpacity>
     )
diff --git a/styles/index.js b/styles/index.js
index 8896f03..087d20d 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -58,6 +58,12 @@ export default StyleSheet.create({
     minWidth: 100,
     minHeight: 100,
   },
+  symptomBoxActive: {
+    backgroundColor: secondaryColor,
+  },
+  symptomTextActive: {
+    color: fontOnPrimaryColor
+  },
   symptomEditRow: {
     justifyContent: 'space-between',
     marginBottom: 10,
@@ -121,5 +127,11 @@ export const iconStyles = {
   navigationArrow: {
     size: 45,
     color: fontOnPrimaryColor
+  },
+  symptomBox: {
+    size: 40
+  },
+  symptomBoxActive: {
+    color: fontOnPrimaryColor
   }
 }
\ No newline at end of file