Merge branch 'master' into '150-apply-design-to-chart'

# Conflicts:
#   components/calendar.js
#   components/chart/y-axis.js

styles/index.js

@@ -7,6 +7,9 @@ export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light
 export const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker]
 
 export default StyleSheet.create({
+  appText: {
+    color: 'black'
+  },
   welcome: {
     fontSize: 20,
     margin: 30,
@@ -25,20 +28,15 @@ export default StyleSheet.create({
     textAlign: 'center',
     marginLeft: 15
   },
-  symptomDayView: {
+  symptomViewHeading: {
     fontSize: 20,
-    textAlignVertical: 'center'
+    color: 'black',
+    marginBottom: 5
   },
   symptomBoxImage: {
     width: 50,
     height: 50
   },
-  radioButton: {
-    fontSize: 18,
-    margin: 8,
-    textAlign: 'center',
-    textAlignVertical: 'center'
-  },
   symptomBoxesView: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -85,17 +83,6 @@ export default StyleSheet.create({
   symptomDataText: {
     fontSize: 12
   },
-  symptomEditRow: {
-    justifyContent: 'space-between',
-    marginBottom: 10,
-  },
-  symptomViewRowInline: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 10,
-    alignItems: 'center',
-    height: 50
-  },
   header: {
     backgroundColor: primaryColor,
     paddingHorizontal: 15,
@@ -152,11 +139,6 @@ export default StyleSheet.create({
   symptomEditButton: {
     width: 130
   },
-  radioButtonRow: {
-    marginTop: 15,
-    marginLeft: 'auto',
-    marginRight: 'auto'
-  },
   statsIntro: {
     fontSize: 18,
     margin: 10,
@@ -200,6 +182,57 @@ export default StyleSheet.create({
     fontSize: 15,
     color: fontOnPrimaryColor
   },
+  selectBox: {
+    backgroundColor: 'lightgrey',
+    marginRight: 7,
+    marginVertical: 5,
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+    borderRadius: 10
+  },
+  selectBoxActive: {
+    backgroundColor: secondaryColor,
+    color: fontOnPrimaryColor
+  },
+  selectBoxTextActive: {
+    color: fontOnPrimaryColor
+  },
+  selectBoxSection: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginVertical: 10,
+  },
+  selectTabGroup: {
+    marginVertical: 10,
+    flexDirection: 'row'
+  },
+  selectTab: {
+    backgroundColor: 'lightgrey',
+    borderStyle: 'solid',
+    borderLeftWidth: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderColor: 'white',
+    marginBottom: 3,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  selectTabActive: {
+    backgroundColor: secondaryColor,
+    color: fontOnPrimaryColor
+  },
+  selectTabLast: {
+    borderTopRightRadius: 10,
+    borderBottomRightRadius: 10,
+  },
+  selectTabFirst: {
+    borderTopLeftRadius: 10,
+    borderBottomLeftRadius: 10,
+    borderLeftWidth: null
+  },
+  page: {
+    marginHorizontal: 10
+  }
 })
 
 export const iconStyles = {
@@ -219,5 +252,5 @@ export const iconStyles = {
   },
   menuIconInactive: {
     color: 'lightgrey'
-  }
+  },
 }