Cycle Day styling improvements

components/cycle-day/symptom-box.js

@@ -15,7 +15,6 @@ import { Colors, Sizes, Spacing } from '../../styles'
 import { headerTitles as symptomTitles } from '../../i18n/en/labels'
 
 class SymptomBox extends Component {
-
   static propTypes = {
     date: PropTypes.string.isRequired,
     isSymptomEdited: PropTypes.bool,
@@ -33,7 +32,7 @@ class SymptomBox extends Component {
     super(props)
 
     this.state = {
-      isSymptomEdited: props.isSymptomEdited
+      isSymptomEdited: props.isSymptomEdited,
     }
   }
 
@@ -58,24 +57,24 @@ class SymptomBox extends Component {
     const iconName = `drip-icon-${symptom}`
     const symptomNameStyle = [
       styles.symptomName,
-      (isSymptomDisabled && styles.symptomNameDisabled),
-      (isExcluded && styles.symptomNameExcluded)
+      isSymptomDisabled && styles.symptomNameDisabled,
+      isExcluded && styles.symptomNameExcluded,
     ]
     const textStyle = [
       styles.text,
-      (isSymptomDisabled && styles.textDisabled),
-      (isExcluded && styles.textExcluded)
+      isSymptomDisabled && styles.textDisabled,
+      isExcluded && styles.textExcluded,
     ]
 
     return (
       <React.Fragment>
-        {isSymptomEdited &&
+        {isSymptomEdited && (
           <SymptomEditView
             symptom={symptom}
             symptomData={symptomData}
             onClose={this.onFinishEditing}
           />
-        }
+        )}
 
         <TouchableOpacity
           disabled={isSymptomDisabled}
@@ -93,11 +92,11 @@ class SymptomBox extends Component {
             <AppText style={symptomNameStyle}>
               {symptomTitles[symptom].toLowerCase()}
             </AppText>
-            {symptomDataToDisplay &&
+            {symptomDataToDisplay && (
               <AppText style={textStyle} numberOfLines={4}>
                 {symptomDataToDisplay}
               </AppText>
-            }
+            )}
           </View>
         </TouchableOpacity>
       </React.Fragment>
@@ -112,20 +111,20 @@ const styles = StyleSheet.create({
     borderRadius: scale(10),
     elevation: 4,
     flexDirection: 'row',
-    height: scale(120),
+    height: scale(110),
     marginBottom: Spacing.base,
     paddingHorizontal: Spacing.small,
     paddingVertical: Spacing.base,
-    width: Spacing.symptomTileWidth
+    width: Spacing.symptomTileWidth,
   },
   symptomName: {
     paddingTop: Sizes.tiny,
     color: Colors.purple,
     fontSize: Sizes.base,
-    lineHeight: Sizes.base
+    lineHeight: Sizes.base,
   },
   symptomNameDisabled: {
-    color: Colors.grey
+    color: Colors.grey,
   },
   symptomNameExcluded: {
     color: Colors.greyDark,
@@ -134,28 +133,24 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     marginLeft: Spacing.tiny,
-    maxWidth: Spacing.textWidth
+    maxWidth: Spacing.textWidth,
   },
   text: {
     fontSize: Sizes.small,
     fontStyle: 'italic',
-    lineHeight: Sizes.small
   },
   textDisabled: {
-    color: Colors.greyLight
+    color: Colors.greyLight,
   },
   textExcluded: {
     color: Colors.grey,
-  }
+  },
 })
 
 const mapStateToProps = (state) => {
-  return({
+  return {
     date: getDate(state),
-  })
+  }
 }
 
-export default connect(
-  mapStateToProps,
-  null,
-)(SymptomBox)
+export default connect(mapStateToProps, null)(SymptomBox)