Symptom view redesign

components/common/app-modal.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Modal, StyleSheet, TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
+
+const AppModal = ({ children, onClose }) => {
+  return(
+    <Modal
+      animationType='fade'
+      onRequestClose={onClose}
+      transparent={true}
+      visible={true}
+    >
+      <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
+      {children}
+    </Modal>
+  )
+}
+
+AppModal.propTypes = {
+  children: PropTypes.node,
+  onClose: PropTypes.func
+}
+
+const styles = StyleSheet.create({
+  blackBackground: {
+    backgroundColor: 'black',
+    flex: 1,
+    opacity: 0.5,
+  }
+})
+
+export default AppModal

components/common/app-switch.js

@@ -20,7 +20,7 @@ const AppSwitch = ({ onToggle, text, value }) => {
 AppSwitch.propTypes = {
   onToggle: PropTypes.func.isRequired,
   text: PropTypes.string,
-  value: PropTypes.bool.isRequired
+  value: PropTypes.bool
 }
 
 const styles = StyleSheet.create({

components/common/app-text-input.js

@@ -1,10 +1,15 @@
 import React from 'react'
 import { StyleSheet, TextInput } from 'react-native'
+import PropTypes from 'prop-types'
 
 import { Colors, Spacing, Typography } from '../../styles/redesign'
 
-const AppTextInput = ({ ...props }) => {
-  return <TextInput style={styles.input} {...props} />
+const AppTextInput = ({ style, ...props }) => {
+  return <TextInput style={[styles.input, style]} {...props} />
+}
+
+AppTextInput.propTypes = {
+  style: PropTypes.object
 }
 
 const styles = StyleSheet.create({
@@ -16,6 +21,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     color: Colors.greyDark,
     marginTop: Spacing.base,
+    minWidth: '80%',
     paddingHorizontal: Spacing.base,
     ...Typography.mainText
   }

components/common/button.js

@@ -2,14 +2,23 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, TouchableOpacity } from 'react-native'
 
+import AppIcon from './app-icon'
 import AppText from './app-text'
 
 import { Colors, Fonts, Spacing } from '../../styles/redesign'
 
-const Button = ({ children, isCTA, isSmall, onPress, testID, ...props }) => {
+const Button = ({
+  children,
+  iconName,
+  isCTA,
+  isSmall,
+  onPress,
+  testID,
+  ...props
+}) => {
   const buttonStyle = isCTA ? styles.cta : styles.regular
   const textCTA = isCTA ? styles.buttonTextBold : styles.buttonTextRegular
-  const textStyle = [ textCTA, isSmall ? textSmall : text]
+  const textStyle = [textCTA, isSmall ? textSmall : text]
 
   return (
     <TouchableOpacity
@@ -19,12 +28,14 @@ const Button = ({ children, isCTA, isSmall, onPress, testID, ...props }) => {
       {...props}
     >
       <AppText style={textStyle}>{children}</AppText>
+      {iconName && <AppIcon color={Colors.orange} name={iconName} />}
     </TouchableOpacity>
   )
 }
 
 Button.propTypes = {
   children: PropTypes.node,
+  iconName: PropTypes.string,
   isCTA: PropTypes.bool,
   isSmall: PropTypes.bool,
   onPress: PropTypes.func,
@@ -48,8 +59,10 @@ const textSmall = {
 
 const button = {
   alignItems: 'center',
+  flexDirection: 'row',
   justifyContent: 'center',
-  margin: Spacing.base
+  margin: Spacing.base,
+  minWidth: '15%'
 }
 
 const styles = StyleSheet.create({

components/common/close-icon.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+
+import AppIcon from './app-icon'
+
+import { Colors, Sizes } from '../../styles/redesign'
+
+const CloseIcon = ({ onClose, ...props }) => {
+  return (
+    <TouchableOpacity
+      onPress={onClose}
+      style={styles.container}
+      {...props}
+    >
+      <AppIcon name='cross' color={Colors.orange} />
+    </TouchableOpacity>
+  )
+}
+
+CloseIcon.propTypes = {
+  onClose: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+    marginBottom: Sizes.base
+  }
+})
+
+export default CloseIcon

components/common/segment.js

@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
   container: {
     borderStyle: 'solid',
     borderBottomWidth: 2,
-    borderBottomColor: Colors.grey,
+    borderBottomColor: Colors.greyLight,
     paddingBottom: Spacing.base,
     ...segmentContainer
   },