Merge branch 'Chore/Release-v1.2311.14-versionCode25' into 'release'

Release: v1.2311.14

See merge request bloodyhealth/drip!629

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to this project will be documented in this file.
 
-## v1.2311.10
+## v1.2311.14
 
 ### Changes
 

android/app/build.gradle

@@ -134,8 +134,8 @@ android {
         applicationId "com.drip"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 21
+        versionCode 25
-        versionName "1.2310.31"
+        versionName "1.2311.14"
         ndk {
             abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
         }

components/chart/chart-legend.js

@@ -4,15 +4,19 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { Typography } from '../../styles'
+import { Sizes, Typography } from '../../styles'
 import { CHART_YAXIS_WIDTH } from '../../config'
 import { shared as labels } from '../../i18n/en/labels'
 
 const ChartLegend = ({ height }) => {
   return (
     <View style={[styles.container, { height }]}>
-      <AppText style={styles.textBold}>#</AppText>
+      <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
-      <AppText style={styles.text}>{labels.date}</AppText>
+        <AppText style={styles.textBold}>#</AppText>
+      </View>
+      <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
+        <AppText style={styles.text}>{labels.date}</AppText>
+      </View>
     </View>
   )
 }
@@ -27,8 +31,13 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     width: CHART_YAXIS_WIDTH,
   },
+  singleLabelContainer: {
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
   text: {
     ...Typography.label,
+    fontSize: Sizes.footnote,
   },
   textBold: {
     ...Typography.labelBold,

components/chart/cycle-day-label.js

@@ -19,11 +19,20 @@ const CycleDayLabel = ({ height, date }) => {
 
   return (
     <View style={[styles.container, { height }]}>
-      <AppText style={styles.textBold}>{cycleDayLabel}</AppText>
+      <View style={{ ...styles.labelRow, height: height / 2 }}>
-      <View style={styles.dateLabel}>
+        <AppText style={styles.textBold}>{cycleDayLabel}</AppText>
-        <AppText style={styles.text}>
+      </View>
-          {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth}
+
-        </AppText>
+      <View style={{ ...styles.labelRow, height: height / 2 }}>
+        {isFirstDayOfMonth && (
+          <AppText style={styles.textFootnote}>
+            {momentDate.format('MMM')}
+          </AppText>
+        )}
+
+        {!isFirstDayOfMonth && (
+          <AppText style={styles.textSmall}>{dayOfMonth}</AppText>
+        )}
         {!isFirstDayOfMonth && (
           <AppText style={styles.textLight}>
             {getOrdinalSuffix(dayOfMonth)}
@@ -45,17 +54,21 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     left: 4,
   },
-  text: {
+  textSmall: {
     ...Typography.label,
     fontSize: Sizes.small,
   },
+  textFootnote: {
+    ...Typography.label,
+    fontSize: Sizes.footnote,
+  },
   textBold: {
     ...Typography.labelBold,
   },
   textLight: {
     ...Typography.labelLight,
   },
-  dateLabel: {
+  labelRow: {
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',

components/chart/day-column.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
+import moment from 'moment'
 
 import { getCycleDay } from '../../db'
 
@@ -26,6 +27,8 @@ const DayColumn = ({
   symptomRowSymptoms,
   xAxisHeight,
 }) => {
+  const momentDate = moment(dateString)
+  const isWeekend = momentDate.day() == 0 || momentDate.day() == 6
   const cycleDayData = getCycleDay(dateString)
   let data = {}
 
@@ -73,6 +76,7 @@ const DayColumn = ({
           isVerticalLine={fhmAndLtl.drawFhmLine}
           data={data && data.temperature}
           columnHeight={columnHeight}
+          isWeekend={isWeekend}
         />
       )}
 
@@ -92,6 +96,7 @@ const DayColumn = ({
             isSymptomDataComplete={
               hasSymptomData && isSymptomDataComplete(symptom, dateString)
             }
+            isWeekend={isWeekend}
             height={symptomHeight}
           />
         )

components/chart/symptom-cell.js

@@ -15,14 +15,31 @@ const SymptomCell = ({
   symptom,
   symptomValue,
   isSymptomDataComplete,
+  isWeekend,
 }) => {
   const shouldDrawDot = symptomValue !== false
+  // Determine the background color based on isWeekend prop
+  const backgroundColor = isWeekend ? Colors.greyVeryLight : 'white'
   const styleCell =
     index !== 0
-      ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
+      ? [
-      : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
+          styles.cell,
+          {
+            height,
+            width: CHART_COLUMN_WIDTH,
+            backgroundColor: backgroundColor,
+          },
+        ]
+      : [
+          styles.cell,
+          {
+            height,
+            width: CHART_COLUMN_WIDTH,
+            backgroundColor: backgroundColor,
+          },
+          styles.topBorder,
+        ]
   let styleDot
-
   if (shouldDrawDot) {
     const styleSymptom = Colors.iconColors[symptom]
     const symptomColor = styleSymptom.shades[symptomValue]
@@ -47,11 +64,11 @@ SymptomCell.propTypes = {
   symptom: PropTypes.string,
   symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   isSymptomDataComplete: PropTypes.bool,
+  isWeekend: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
   cell: {
-    backgroundColor: 'white',
     borderBottomColor: Colors.grey,
     borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
     borderLeftColor: Colors.grey,

components/chart/temperature-column.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet } from 'react-native'
+import { Colors } from '../../styles'
 
 import { Surface, Path } from '@react-native-community/art'
 
@@ -14,14 +14,16 @@ const TemperatureColumn = ({
   isVerticalLine,
   data,
   columnHeight,
+  isWeekend,
 }) => {
   const x = CHART_STROKE_WIDTH / 2
 
+  const backgroundColor = isWeekend ? Colors.greyVeryLight : 'white'
   return (
     <Surface
       width={CHART_COLUMN_WIDTH}
       height={columnHeight}
-      style={styles.container}
+      style={{ backgroundColor: backgroundColor }}
     >
       <ChartLine path={new Path().lineTo(0, columnHeight)} />
 
@@ -63,12 +65,7 @@ TemperatureColumn.propTypes = {
   isVerticalLine: PropTypes.bool,
   data: PropTypes.object,
   columnHeight: PropTypes.number,
+  isWeekend: PropTypes.bool,
 }
 
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-  },
-})
-
 export default TemperatureColumn

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drip.",
-  "version": "1.2310.31",
+  "version": "1.2311.14",
   "contributors": [
     "Julia Friesel <julia.friesel@gmail.com>",
     "Marie Kochsiek",

styles/colors.js

@@ -1,7 +1,14 @@
 const redColor = '#c3000d'
 export const shadesOfRed = ['#e7999e', '#db666d', '#cf323d', '#c3000d'] // light to dark
 const violetColor = '#6a7b98'
-const shadesOfViolet = ['#e3e7ed', '#c8cfdc', '#acb8cb', '#91a0ba', '#7689a9', violetColor] // light to dark
+const shadesOfViolet = [
+  '#e3e7ed',
+  '#c8cfdc',
+  '#acb8cb',
+  '#91a0ba',
+  '#7689a9',
+  violetColor,
+] // light to dark
 const yellowColor = '#dbb40c'
 const shadesOfYellow = ['#f0e19d', '#e9d26d', '#e2c33c', yellowColor] // light to dark
 const magentaColor = '#6f2565'
@@ -16,6 +23,7 @@ export default {
   greyDark: '#555',
   grey: '#888',
   greyLight: '#CCC',
+  greyVeryLight: '#F4F4F4',
   orange: '#F38337',
   purple: '#3A2671',
   purpleLight: '#938EB2',
@@ -23,35 +31,35 @@ export default {
   turquoise: '#CFECEA',
   turquoiseLight: '#E9F2ED',
   iconColors: {
-    'bleeding': {
+    bleeding: {
       color: redColor,
       shades: shadesOfRed,
     },
-    'mucus': {
+    mucus: {
       color: violetColor,
       shades: shadesOfViolet,
     },
-    'cervix': {
+    cervix: {
       color: yellowColor,
       shades: shadesOfYellow,
     },
-    'sex': {
+    sex: {
       color: magentaColor,
       shades: shadesOfMagenta,
     },
-    'desire': {
+    desire: {
       color: pinkColor,
       shades: shadesOfPink,
     },
-    'pain': {
+    pain: {
       color: lightGreenColor,
       shades: [lightGreenColor],
     },
-    'mood': {
+    mood: {
       color: orangeColor,
       shades: [orangeColor],
     },
-    'note': {
+    note: {
       color: mintColor,
       shades: [mintColor],
     },