Merge branch '542-bug-styling' into 'master'

Resolve "Bug: Styling"

Closes #542

See merge request bloodyhealth/drip!391

components/chart/cycle-day-label.js

@@ -7,7 +7,7 @@ import AppText from '../common/app-text'
 
 import cycleModule from '../../lib/cycle'
 import { getOrdinalSuffix } from '../helpers/home'
-import { Containers, Typography, Sizes } from '../../styles'
+import { Typography, Sizes } from '../../styles'
 
 const CycleDayLabel = ({ height, date }) => {
   const cycleDayNumber = cycleModule().getCycleDayNumber(date)
@@ -24,11 +24,11 @@ const CycleDayLabel = ({ height, date }) => {
         <AppText style={styles.text}>
           {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth}
         </AppText>
-        {!isFirstDayOfMonth &&
+        {!isFirstDayOfMonth && (
           <AppText style={styles.textLight}>
             {getOrdinalSuffix(dayOfMonth)}
           </AppText>
-        }
+        )}
       </View>
     </View>
   )
@@ -45,15 +45,12 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     left: 4,
   },
-  containerRow: {
-    ...Containers.rowContainer
-  },
   text: {
     ...Typography.label,
     fontSize: Sizes.small,
   },
   textBold: {
-    ...Typography.labelBold
+    ...Typography.labelBold,
   },
   textLight: {
     ...Typography.labelLight,
@@ -62,7 +59,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',
-  }
+  },
 })
 
 export default CycleDayLabel

components/common/table.js

@@ -57,10 +57,11 @@ const styles = StyleSheet.create({
   accentOrange: {
     ...Typography.accentOrange,
     fontSize: Sizes.small,
+    margin: Sizes.tiny,
   },
   accentPurpleBig: {
     ...Typography.accentPurpleBig,
-    marginRight: Spacing.small,
+    marginRight: Spacing.tiny
   },
   cellLeft: {
     alignItems: 'flex-end',
@@ -68,12 +69,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   cellRight: {
-    flex: 6,
+    flex: 5,
     justifyContent: 'center',
   },
   row: {
     flexDirection: 'row',
     marginBottom: Spacing.tiny,
+    marginLeft: Spacing.tiny
   }
 })
 

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 &&
-              <AppText style={textStyle} numberOfLines={4} >
+            {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)

components/helpers/cycle-day.js

@@ -353,7 +353,7 @@ const label = {
       })
       .join(', ')
 
-    if (isNumber(mucus.value)) label += `\n => ${labels.mucusNFP[mucus.value]}`
+    if (isNumber(mucus.value)) label += ` => ${labels.mucusNFP[mucus.value]}`
     if (mucus.exclude) label = `(${label})`
 
     return label

components/settings/nfp-settings/index.js

@@ -5,7 +5,7 @@ import AppIcon from '../../common/app-icon'
 import AppPage from '../../common/app-page'
 import AppSwitch from '../../common/app-switch'
 import AppText from '../../common/app-text'
-import TemperatureSlider from './temperature-slider'
+// import TemperatureSlider from './temperature-slider'
 import Segment from '../../common/segment'
 
 import { useCervixObservable, saveUseCervix } from '../../../local-storage'
@@ -40,10 +40,11 @@ export default class Settings extends Component {
             value={shouldUseCervix}
           />
         </Segment>
-        <Segment title={labels.tempScale.segmentTitle}>
+        {/* disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */}
+        {/* <Segment title={labels.tempScale.segmentTitle}>
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TemperatureSlider />
-        </Segment>
+        </Segment> */}
         <Segment last>
           <View style={styles.line}>
             <AppIcon

components/stats.js

@@ -91,11 +91,11 @@ const styles = ScaledSheet.create({
   },
   columnLeft: {
     ...column,
-    flex: 4,
+    flex: 2,
   },
   columnRight: {
     ...column,
-    flex: 5,
+    flex: 3,
     paddingTop: Spacing.small,
   },
   image: {

i18n/en/cycle-day.js

@@ -113,7 +113,9 @@ export const mood = {
 }
 
 export const temperature = {
-  outOfRangeWarning: 'This temperature value is out of the current range for the temperature chart. You can change the range in the settings.',
+  // disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */}
+  // outOfRangeWarning: 'This temperature value is out of the current range for the temperature chart. You can change the range in the settings.',
+  outOfRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.',
   outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.',
   saveAnyway: 'Save anyway',
   temperature: {