Merge branch 'action_button_as_buttons' into 'master'

makes the action button footer more like buttons

Closes #318

See merge request bloodyhealth/drip!208

components/cycle-day/symptoms/action-button-footer.js

@@ -60,7 +60,7 @@ export default class ActionButtonFooter extends Component {
       }
     ]
     return (
-      <View style={styles.menu}>
+      <View style={styles.actionButtonFooter}>
         {buttons.map(({ title, action, disabledCondition, icon }, i) => {
           const textStyle = [styles.menuText]
           if (disabledCondition) {
@@ -77,7 +77,7 @@ export default class ActionButtonFooter extends Component {
           return (
             <TouchableOpacity
               onPress={action}
-              style={styles.menuItem}
+              style={styles.actionButtonItem}
               key={i.toString()}
             >
               <Icon name={icon} {...iconStyle} />

styles/index.js

@@ -275,10 +275,19 @@ export default StyleSheet.create({
   temperatureTextInputSuggestion: {
     color: '#939393'
   },
-  actionButtonRow: {
+  actionButtonFooter: {
+    alignItems: 'center',
+    justifyContent: 'space-around',
     flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    marginTop: 50
+    height: 60,
+  },
+  actionButtonItem: {
+    backgroundColor: secondaryColor,
+    alignItems: 'center',
+    flex: 1,
+    marginHorizontal: 5,
+    paddingVertical: 5,
+    borderRadius: 5,
   },
   symptomEditButton: {
     width: 130
@@ -307,7 +316,8 @@ export default StyleSheet.create({
   settingsButton: {
     padding: 10,
     alignItems: 'center',
-    margin: 10
+    margin: 10,
+    borderRadius: 5,
   },
   settingsButtonAccent: {
     backgroundColor: secondaryColor