change layouts of cycle-day, edit symptoms screens and home

bleeding.js

@@ -33,34 +33,56 @@ export default class Bleeding extends Component {
       {label: labels[3], value: 3 },
     ]
     return (
-      <View style={styles.container}>
-        <Text>Bleeding</Text>
+      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}>
+        <View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
+          <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
+            <View style={{flex: 1}}>
+              <Text style={styles.symptomDayView}>Bleeding</Text>
+            </View>
+            <View style={{flex: 1}}>
               <RadioForm
                 radio_props={bleedingRadioProps}
                 initial={this.state.currentValue}
                 formHorizontal={true}
                 labelHorizontal={false}
+                labelStyle={styles.radioButton}
                 onPress={(itemValue) => {
                   this.setState({currentValue: itemValue})
                 }}
               />
-        <Text>Exclude</Text>
+            </View>
+          </View>
+          <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+            <View style={{flex: 1, margin: 5}}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+            </View>
+            <View style={{flex: 1, margin: 5}}>
               <Switch
                 onValueChange={(val) => {
                   this.setState({exclude: val})
                 }}
-          value={this.state.exclude} />
+                value={this.state.exclude}
+              />
+            </View>
+          </View>
+        </View>
+        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+          <View style={{flex: 1, margin: 5}}>
             <Button
               onPress={() => this.showView('dayView')}
               title="Cancel">
             </Button>
+          </View>
+          <View style={{flex: 1, margin: 5}}>
             <Button
               onPress={() => {
                 saveBleeding(this.cycleDay)
                 this.showView('dayView')
               }}
-          title="Delete entry">
+              title="Delete">
             </Button>
+          </View>
+          <View style={{flex: 1, margin: 5}}>
             <Button
               onPress={() => {
                 saveBleeding(this.cycleDay, {
@@ -73,6 +95,8 @@ export default class Bleeding extends Component {
               title="Save">
             </Button>
           </View>
+        </View>
+      </View>
     )
   }
 }

cycle-day-overview.js

@@ -39,32 +39,44 @@ export default class DayView extends Component {
     const bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
     let bleedingLabel
     if (typeof bleedingValue === 'number') {
-      bleedingLabel = `Bleeding: ${labels[bleedingValue]}`
-      if (this.cycleDay.bleeding.exclude) bleedingLabel += " (Excluded)"
+      bleedingLabel = `${labels[bleedingValue]}`
+      if (this.cycleDay.bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
     } else {
-      bleedingLabel = null
+      bleedingLabel = 'edit'
     }
     const temperatureValue = this.cycleDay.temperature && this.cycleDay.temperature.value
     let temperatureLabel
     if (typeof temperatureValue === 'number') {
-      temperatureLabel = `Temperature: ${temperatureValue}`
-      if (this.cycleDay.temperature.exclude) temperatureLabel += " (Excluded)"
+      temperatureLabel = `${temperatureValue} °C`
+      if (this.cycleDay.temperature.exclude) temperatureLabel = "( " + temperatureLabel + " )"
     } else {
-      temperatureLabel = null
+      temperatureLabel = 'edit'
     }
 
     return (
-      <View>
-        <Text style={styles.welcome}>{bleedingLabel}</Text>
-        <Text style={styles.welcome}>{temperatureLabel}</Text>
+      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start'}}>
+        <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+          <View style={{flex: 1}}>
+            <Text style={styles.symptomDayView}>Bleeding</Text>
+          </View>
+          <View style={{flex: 1, margin:5}}>
             <Button
               onPress={() => this.showView('bleedingEditView')}
-          title="Edit bleeding">
+              title={bleedingLabel}>
             </Button>
+          </View>
+        </View>
+        <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+          <View style={{flex: 1}}>
+            <Text style={styles.symptomDayView}>Temperature</Text>
+          </View>
+          <View style={{flex: 1, margin:5}}>
             <Button
               onPress={() => this.showView('temperatureEditView')}
-          title="Edit temperature">
+              title={temperatureLabel}>
             </Button>
+          </View>
+        </View>
       </View >
     )
   }

cycle-day.js

@@ -29,16 +29,23 @@ export default class Day extends Component {
   render() {
     const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>{formatDateForViewHeader(this.cycleDay.date)}</Text>
-        { cycleDayNumber && <Text>Cycle day {cycleDayNumber}</Text> }
+      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-around'}}>
+        <View style={{flex: 2, justifyContent: 'center', backgroundColor: 'steelblue'}}>
+          <Text style={styles.dateHeader}>
+            {formatDateForViewHeader(this.cycleDay.date)}
+          </Text>
+        </View >
+        <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'skyblue'}}>
+          { cycleDayNumber && <Text style={styles.cycleDayNumber} >Cycle day {cycleDayNumber}</Text> }
+        </View >
+        <View style={{flex: 8, justifyContent: 'center',}}>
           {
             { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
               bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,
               temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} showView={this.showView}/>
             }[this.state.visibleComponent]
           }
-
+        </View >
       </View >
     )
   }

home.js

@@ -46,21 +46,33 @@ export default class Home extends Component {
   render() {
     const navigate = this.props.navigation.navigate
     return (
-      <View style={styles.container}>
+      <View style={{flex: 0.5, flexDirection: 'column', justifyContent: 'space-around'}}>
+        <View style={{flex: 2}}>
+          <View>
             <Text style={styles.welcome}>{this.state.welcomeText}</Text>
+          </View>
+        </View>
+        <View style={{flex: 3, flexDirection: 'column', justifyContent: 'space-around', margin: 5}}>
+          <View>
             <Button
               onPress={() => this.passTodayToDayView()}
               title="Edit symptoms for today">
             </Button>
+          </View>
+          <View>
             <Button
               onPress={() => navigate('calendar')}
               title="Go to calendar">
             </Button>
+          </View>
+          <View>
             <Button
               onPress={() => deleteAll()}
               title="delete everything">
             </Button>
           </View>
+        </View>
+      </View>
     )
   }
 }

styles.js

@@ -8,6 +8,33 @@ export default StyleSheet.create({
   welcome: {
     fontSize: 20,
     margin: 30,
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+    textAlignVertical: 'center'
+  },
+  dateHeader: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    margin: 30,
+    color: 'white',
+    textAlign: 'center',
+    textAlignVertical: 'center'
+  },
+  cycleDayNumber: {
+    fontSize: 18,
+    margin: 20,
+    textAlign: 'center',
+    textAlignVertical: 'center'
+  },
+  symptomDayView: {
+    fontSize: 20,
+    margin: 30,
+    textAlign: 'left',
+    textAlignVertical: 'center'
+  },
+  radioButton: {
+    fontSize: 18,
+    margin: 5,
+    textAlign: 'center',
+    textAlignVertical: 'center'
+  },
 })

temperature.js

@@ -8,6 +8,7 @@ import {
 } from 'react-native'
 
 import { saveTemperature, getPreviousTemperature } from './db'
+import styles from './styles'
 
 export default class Temp extends Component {
   constructor(props) {
@@ -32,8 +33,13 @@ export default class Temp extends Component {
   render() {
     const cycleDay = this.cycleDay
     return (
-      <View>
-        <Text>Temperature</Text>
+      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}>
+        <View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
+          <View style={{flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
+            <View style={{flex: 3, margin: 5}}>
+              <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+            </View>
+            <View style={{flex: 1, margin: 5}}>
               <TextInput
                 placeholder="Enter temperature"
                 onChangeText={(val) => {
@@ -42,26 +48,41 @@ export default class Temp extends Component {
                 keyboardType='numeric'
                 value = {this.state.currentValue}
               />
-        <Text>Exclude</Text>
+            </View>
+          </View>
+          <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+            <View style={{flex: 1, margin: 5}}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+            </View>
+            <View style={{flex: 1, margin: 5}}>
               <Switch
                 onValueChange = {(val) => {
                   this.setState({ exclude: val })
                 }}
                 value = { this.state.exclude }
               />
+            </View>
+          </View>
+        </View>
+        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+          <View style={{flex: 1, margin: 5}}>
             <Button
               onPress={() => {
                 this.showView('dayView')
               }}
               title="Cancel">
             </Button>
+          </View>
+          <View style={{flex: 1, margin: 5}}>
             <Button
               onPress={() => {
                 saveTemperature(cycleDay)
                 this.showView('dayView')
               }}
-          title="Delete entry">
+              title="Delete">
             </Button>
+          </View>
+          <View style={{flex: 1, margin: 5}}>
             <Button
               onPress={() => {
                 saveTemperature(cycleDay, {
@@ -74,6 +95,8 @@ export default class Temp extends Component {
               title="Save">
             </Button>
           </View>
+        </View>
+      </View>
     )
   }
 }