From 4a5afd46620fe7b55276bdd48d421bfa01cd2781 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Fri, 15 Jun 2018 19:31:29 +0200
Subject: [PATCH 1/2] change layouts of cycle-day, edit symptoms screens and
 home

---
 bleeding.js           | 102 ++++++++++++++++++++++++----------------
 cycle-day-overview.js |  46 +++++++++++-------
 cycle-day.js          |  27 +++++++----
 home.js               |  40 ++++++++++------
 styles.js             |  31 ++++++++++++-
 temperature.js        | 105 +++++++++++++++++++++++++-----------------
 6 files changed, 228 insertions(+), 123 deletions(-)

diff --git a/bleeding.js b/bleeding.js
index 4019e9c..3eddddf 100644
--- a/bleeding.js
+++ b/bleeding.js
@@ -33,45 +33,69 @@ export default class Bleeding extends Component {
       {label: labels[3], value: 3 },
     ]
     return (
-      <View style={styles.container}>
-        <Text>Bleeding</Text>
-        <RadioForm
-          radio_props={bleedingRadioProps}
-          initial={this.state.currentValue}
-          formHorizontal={true}
-          labelHorizontal={false}
-          onPress={(itemValue) => {
-            this.setState({currentValue: itemValue})
-          }}
-        />
-        <Text>Exclude</Text>
-        <Switch
-          onValueChange={(val) => {
-            this.setState({exclude: val})
-          }}
-          value={this.state.exclude} />
-        <Button
-          onPress={() => this.showView('dayView')}
-          title="Cancel">
-        </Button>
-        <Button
-          onPress={() => {
-            saveBleeding(this.cycleDay)
-            this.showView('dayView')
-          }}
-          title="Delete entry">
-        </Button>
-        <Button
-          onPress={() => {
-            saveBleeding(this.cycleDay, {
-              value: this.state.currentValue,
-              exclude: this.state.exclude
-            })
-            this.showView('dayView')
-          }}
-          disabled={ this.state.currentValue === -1 }
-          title="Save">
-        </Button>
+      <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})
+                }}
+              />
+            </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}
+              />
+            </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">
+            </Button>
+          </View>
+          <View style={{flex: 1, margin: 5}}>
+            <Button
+              onPress={() => {
+                saveBleeding(this.cycleDay, {
+                  value: this.state.currentValue,
+                  exclude: this.state.exclude
+                })
+                this.showView('dayView')
+              }}
+              disabled={ this.state.currentValue === -1 }
+              title="Save">
+            </Button>
+          </View>
+        </View>
       </View>
     )
   }
diff --git a/cycle-day-overview.js b/cycle-day-overview.js
index ed7f164..0155f86 100644
--- a/cycle-day-overview.js
+++ b/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>
-        <Button
-          onPress={() => this.showView('bleedingEditView')}
-          title="Edit bleeding">
-        </Button>
-        <Button
-          onPress={() => this.showView('temperatureEditView')}
-          title="Edit temperature">
-        </Button>
+      <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={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={temperatureLabel}>
+            </Button>
+          </View>
+        </View>
       </View >
     )
   }
diff --git a/cycle-day.js b/cycle-day.js
index 35d8b78..4a88fc2 100644
--- a/cycle-day.js
+++ b/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> }
-        {
-          { 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 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 >
     )
   }
diff --git a/home.js b/home.js
index 2d8576f..5b62fa4 100644
--- a/home.js
+++ b/home.js
@@ -46,20 +46,32 @@ export default class Home extends Component {
   render() {
     const navigate = this.props.navigation.navigate
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>{this.state.welcomeText}</Text>
-        <Button
-          onPress={() => this.passTodayToDayView()}
-          title="Edit symptoms for today">
-        </Button>
-        <Button
-          onPress={() => navigate('calendar')}
-          title="Go to calendar">
-        </Button>
-        <Button
-          onPress={() => deleteAll()}
-          title="delete everything">
-        </Button>
+      <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>
     )
   }
diff --git a/styles.js b/styles.js
index dd1e124..1305b42 100644
--- a/styles.js
+++ b/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'
+  },
 })
\ No newline at end of file
diff --git a/temperature.js b/temperature.js
index 786248b..6b16007 100644
--- a/temperature.js
+++ b/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,47 +33,69 @@ export default class Temp extends Component {
   render() {
     const cycleDay = this.cycleDay
     return (
-      <View>
-        <Text>Temperature</Text>
-        <TextInput
-          placeholder="Enter temperature"
-          onChangeText={(val) => {
-            this.setState({currentValue: val})
-          }}
-          keyboardType='numeric'
-          value = {this.state.currentValue}
-        />
-        <Text>Exclude</Text>
-        <Switch
-          onValueChange = {(val) => {
-            this.setState({ exclude: val })
-          }}
-          value = { this.state.exclude }
-        />
-        <Button
-          onPress={() => {
-            this.showView('dayView')
-          }}
-          title="Cancel">
-        </Button>
-        <Button
-          onPress={() => {
-            saveTemperature(cycleDay)
-            this.showView('dayView')
-          }}
-          title="Delete entry">
-        </Button>
-        <Button
-          onPress={() => {
-            saveTemperature(cycleDay, {
-              value: Number(this.state.currentValue),
-              exclude: this.state.exclude
-            })
-            this.showView('dayView')
-          }}
-          disabled={ this.state.currentValue === '' }
-          title="Save">
-        </Button>
+      <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) => {
+                  this.setState({currentValue: val})
+                }}
+                keyboardType='numeric'
+                value = {this.state.currentValue}
+              />
+            </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">
+            </Button>
+          </View>
+          <View style={{flex: 1, margin: 5}}>
+            <Button
+              onPress={() => {
+                saveTemperature(cycleDay, {
+                  value: Number(this.state.currentValue),
+                  exclude: this.state.exclude
+                })
+                this.showView('dayView')
+              }}
+              disabled={ this.state.currentValue === '' }
+              title="Save">
+            </Button>
+          </View>
+        </View>
       </View>
     )
   }

From feb642aa92d16aecb35c568dd4002a708bd0ba9f Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Mon, 18 Jun 2018 14:06:32 +0200
Subject: [PATCH 2/2] put view styles in styles.js

---
 bleeding.js           | 22 +++++++--------
 cycle-day-overview.js | 10 +++----
 cycle-day.js          |  8 +++---
 home.js               |  4 +--
 styles.js             | 64 +++++++++++++++++++++++++++++++++++++++++++
 temperature.js        | 18 ++++++------
 6 files changed, 95 insertions(+), 31 deletions(-)

diff --git a/bleeding.js b/bleeding.js
index 3eddddf..fcbcb50 100644
--- a/bleeding.js
+++ b/bleeding.js
@@ -33,9 +33,9 @@ export default class Bleeding extends Component {
       {label: labels[3], value: 3 },
     ]
     return (
-      <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={ styles.symptomEditView }>
+        <View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
+          <View style={ styles.symptomEditListedSymptomView }>
             <View style={{flex: 1}}>
               <Text style={styles.symptomDayView}>Bleeding</Text>
             </View>
@@ -52,11 +52,11 @@ export default class Bleeding extends Component {
               />
             </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 style={ styles.itemsInRowSeparatedView }>
+            <View style={ styles.singleButtonView }>
+              <Text style={ styles.symptomDayView }>Exclude</Text>
             </View>
-            <View style={{flex: 1, margin: 5}}>
+            <View style={ styles.singleButtonView }>
               <Switch
                 onValueChange={(val) => {
                   this.setState({exclude: val})
@@ -66,14 +66,14 @@ export default class Bleeding extends Component {
             </View>
           </View>
         </View>
-        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
-          <View style={{flex: 1, margin: 5}}>
+        <View style={ styles.itemsInRowSeparatedView }>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => this.showView('dayView')}
               title="Cancel">
             </Button>
           </View>
-          <View style={{flex: 1, margin: 5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 saveBleeding(this.cycleDay)
@@ -82,7 +82,7 @@ export default class Bleeding extends Component {
               title="Delete">
             </Button>
           </View>
-          <View style={{flex: 1, margin: 5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 saveBleeding(this.cycleDay, {
diff --git a/cycle-day-overview.js b/cycle-day-overview.js
index 0155f86..b5c5370 100644
--- a/cycle-day-overview.js
+++ b/cycle-day-overview.js
@@ -54,23 +54,23 @@ export default class DayView extends Component {
     }
 
     return (
-      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start'}}>
-        <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+      <View style={ styles.symptomEditListedSymptomView }>
+        <View style={ styles.itemsInRowSeparatedView }>
           <View style={{flex: 1}}>
             <Text style={styles.symptomDayView}>Bleeding</Text>
           </View>
-          <View style={{flex: 1, margin:5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => this.showView('bleedingEditView')}
               title={bleedingLabel}>
             </Button>
           </View>
         </View>
-        <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+        <View style={ styles.itemsInRowSeparatedView}>
           <View style={{flex: 1}}>
             <Text style={styles.symptomDayView}>Temperature</Text>
           </View>
-          <View style={{flex: 1, margin:5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => this.showView('temperatureEditView')}
               title={temperatureLabel}>
diff --git a/cycle-day.js b/cycle-day.js
index 4a88fc2..def2369 100644
--- a/cycle-day.js
+++ b/cycle-day.js
@@ -29,16 +29,16 @@ export default class Day extends Component {
   render() {
     const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
     return (
-      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-around'}}>
-        <View style={{flex: 2, justifyContent: 'center', backgroundColor: 'steelblue'}}>
+      <View style={ styles.cycleDayOuterView }>
+        <View style={ styles.cycleDayDateView }>
           <Text style={styles.dateHeader}>
             {formatDateForViewHeader(this.cycleDay.date)}
           </Text>
         </View >
-        <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'skyblue'}}>
+        <View style={ styles.cycleDayNumberView }>
           { cycleDayNumber && <Text style={styles.cycleDayNumber} >Cycle day {cycleDayNumber}</Text> }
         </View >
-        <View style={{flex: 8, justifyContent: 'center',}}>
+        <View style={ styles.cycleDaySymptomsView }>
           {
             { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
               bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,
diff --git a/home.js b/home.js
index 5b62fa4..0ada69f 100644
--- a/home.js
+++ b/home.js
@@ -46,13 +46,13 @@ export default class Home extends Component {
   render() {
     const navigate = this.props.navigation.navigate
     return (
-      <View style={{flex: 0.5, flexDirection: 'column', justifyContent: 'space-around'}}>
+      <View style={ styles.homeContainerView }>
         <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 style={ styles.homeButtonsView}>
           <View>
             <Button
               onPress={() => this.passTodayToDayView()}
diff --git a/styles.js b/styles.js
index 1305b42..5eb9cc1 100644
--- a/styles.js
+++ b/styles.js
@@ -37,4 +37,68 @@ export default StyleSheet.create({
     textAlign: 'center',
     textAlignVertical: 'center'
   },
+  singleButtonView: {
+    flex: 1,
+    margin: 5
+  },
+  itemsInRowView: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center'
+  },
+  itemsInRowSeparatedView: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center'
+  },
+  symptomEditView: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start'
+  },
+  symptomEditSplitSymptomsAndLastRowButtons: {
+    flex: 4,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  },
+  symptomEditListedSymptomView: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  },
+  cycleDayOuterView: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-around'
+  },
+  cycleDayDateView: {
+    flex: 2,
+    justifyContent: 'center',
+    backgroundColor: 'steelblue'
+  },
+  cycleDayNumberView: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'skyblue'
+  },
+  cycleDaySymptomsView: {
+    flex: 8,
+    justifyContent: 'center'
+  },
+  homeContainerView: {
+    flex: 0.5,
+    flexDirection: 'column',
+    justifyContent: 'space-around'
+  },
+  homeButtonsView: {
+    flex: 3,
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    margin: 5
+  }
 })
\ No newline at end of file
diff --git a/temperature.js b/temperature.js
index 6b16007..ea158a1 100644
--- a/temperature.js
+++ b/temperature.js
@@ -33,15 +33,15 @@ export default class Temp extends Component {
   render() {
     const cycleDay = this.cycleDay
     return (
-      <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={ styles.symptomEditView }>
+        <View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
+          <View style={ styles.itemsInRowView }>
             <View style={{flex: 3, margin: 5}}>
               <Text style={styles.symptomDayView}>Temperature (°C)</Text>
             </View>
             <View style={{flex: 1, margin: 5}}>
               <TextInput
-                placeholder="Enter temperature"
+                placeholder="Enter"
                 onChangeText={(val) => {
                   this.setState({currentValue: val})
                 }}
@@ -50,7 +50,7 @@ export default class Temp extends Component {
               />
             </View>
           </View>
-          <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+          <View style={ styles.itemsInRowSeparatedView }>
             <View style={{flex: 1, margin: 5}}>
               <Text style={styles.symptomDayView}>Exclude</Text>
             </View>
@@ -64,8 +64,8 @@ export default class Temp extends Component {
             </View>
           </View>
         </View>
-        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
-          <View style={{flex: 1, margin: 5}}>
+        <View style={ styles.itemsInRowSeparatedView }>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 this.showView('dayView')
@@ -73,7 +73,7 @@ export default class Temp extends Component {
               title="Cancel">
             </Button>
           </View>
-          <View style={{flex: 1, margin: 5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 saveTemperature(cycleDay)
@@ -82,7 +82,7 @@ export default class Temp extends Component {
               title="Delete">
             </Button>
           </View>
-          <View style={{flex: 1, margin: 5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 saveTemperature(cycleDay, {