diff --git a/CHANGELOG.md b/CHANGELOG.md
index e966aff..5d8e546 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 33a1159..aaecb89 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -134,8 +134,8 @@ android {
applicationId "com.drip"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
- versionCode 21
- versionName "1.2310.31"
+ versionCode 25
+ versionName "1.2311.14"
ndk {
abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
}
diff --git a/components/chart/chart-legend.js b/components/chart/chart-legend.js
index 76d8014..9c59875 100644
--- a/components/chart/chart-legend.js
+++ b/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 (
- #
- {labels.date}
+
+ #
+
+
+ {labels.date}
+
)
}
@@ -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,
diff --git a/components/chart/cycle-day-label.js b/components/chart/cycle-day-label.js
index 45e0f2a..09c59ca 100644
--- a/components/chart/cycle-day-label.js
+++ b/components/chart/cycle-day-label.js
@@ -19,11 +19,20 @@ const CycleDayLabel = ({ height, date }) => {
return (
- {cycleDayLabel}
-
-
- {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth}
-
+
+ {cycleDayLabel}
+
+
+
+ {isFirstDayOfMonth && (
+
+ {momentDate.format('MMM')}
+
+ )}
+
+ {!isFirstDayOfMonth && (
+ {dayOfMonth}
+ )}
{!isFirstDayOfMonth && (
{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',
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 7d9e0a0..b662d5e 100644
--- a/components/chart/day-column.js
+++ b/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}
/>
)
diff --git a/components/chart/symptom-cell.js b/components/chart/symptom-cell.js
index 809478a..c04a128 100644
--- a/components/chart/symptom-cell.js
+++ b/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,
diff --git a/components/chart/temperature-column.js b/components/chart/temperature-column.js
index e971a44..5fc92b6 100644
--- a/components/chart/temperature-column.js
+++ b/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 (
@@ -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
diff --git a/package.json b/package.json
index 1e44e38..ab3810e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "drip.",
- "version": "1.2310.31",
+ "version": "1.2311.14",
"contributors": [
"Julia Friesel ",
"Marie Kochsiek",
diff --git a/styles/colors.js b/styles/colors.js
index 047a60f..f091d02 100644
--- a/styles/colors.js
+++ b/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,37 +31,37 @@ 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],
},
},
-}
\ No newline at end of file
+}