Start styling the day overview

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)

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>
+    )
+  }
+}

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] }

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(

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'
+  },
 })