Symptom view redesign

styles/containers.js

@@ -1,4 +1,19 @@
+import Colors from './colors'
+import Spacing from './spacing'
+
 export default {
+  box: {
+    borderColor: Colors.orange,
+    borderRadius: 5,
+    borderWidth: 1,
+    marginTop: Spacing.small,
+    marginRight: Spacing.small,
+    paddingHorizontal: Spacing.small,
+    paddingVertical: Spacing.tiny
+  },
+  boxActive: {
+    backgroundColor: Colors.orange,
+  },
   centerItems: {
     alignItems: 'center',
     flex: 1,
@@ -8,5 +23,11 @@ export default {
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between'
+  },
+  selectGroupContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginVertical: Spacing.small
   }
 }

styles/spacing.js

@@ -2,5 +2,7 @@ export default {
   tiny: 4,
   small: 10,
   base: 16,
-  large: 20
+  large: 20,
+  symptomTileWidth: '48%',
+  textWidth: '70%'
 }

styles/typography.js

@@ -96,5 +96,12 @@ export default {
     fontSize: sizes.title,
     marginHorizontal: Spacing.base,
     ...title
+  },
+  titleWithoutMargin: {
+    alignSelf: 'center',
+    color: Colors.purple,
+    fontFamily: fonts.bold,
+    fontWeight: '700',
+    fontSize: sizes.title,
   }
 }