lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change font color of marked calendar days

Browse Source
This commit is contained in:
Lisa
2020-12-30 15:07:03 +00:00
committed by Sofiya Tepikin
parent ab1acf21ba
commit af5c24c466
9 changed files with 47 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/calendar.js
+10 -13
View File
@@ -14,13 +14,13 @@ import {
calendarTheme,
predictionToCalFormat,
toCalFormat,
todayToCalFormat
todayToCalFormat,
} from './helpers/calendar'
class CalendarView extends Component {
static propTypes = {
setDate: PropTypes.func.isRequired,
navigate: PropTypes.func.isRequired
navigate: PropTypes.func.isRequired,
}
constructor(props) {
@@ -30,7 +30,7 @@ class CalendarView extends Component {
this.state = {
bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
todayInCalFormat: todayToCalFormat()
todayInCalFormat: todayToCalFormat(),
}
this.bleedingDays.addListener(this.setStateWithCalFormattedDays)
@@ -42,7 +42,7 @@ class CalendarView extends Component {
this.setState({
bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
todayInCalFormat: todayToCalFormat()
todayInCalFormat: todayToCalFormat(),
})
}
@@ -59,7 +59,7 @@ class CalendarView extends Component {
const {
todayInCalFormat,
bleedingDaysInCalFormat,
predictedBleedingDaysInCalFormat
predictedBleedingDaysInCalFormat,
} = this.state
const markedDates = Object.assign(
{},
@@ -75,7 +75,7 @@ class CalendarView extends Component {
firstDay={1}
onDayPress={this.passDateToDayView.bind(this)}
markedDates={markedDates}
markingType={'custom'}
markingType='custom'
theme={calendarTheme}
// Max amount of months allowed to scroll to the past.
pastScrollRange={120}
@@ -86,17 +86,14 @@ class CalendarView extends Component {
}
const styles = StyleSheet.create({
container: { flex: 1 }
container: { flex: 1 },
})
const mapDispatchToProps = (dispatch) => {
return({
return {
setDate: (date) => dispatch(setDate(date)),
navigate: (page) => dispatch(navigate(page)),
})
}
}
export default connect(
null,
mapDispatchToProps,
)(CalendarView)
export default connect(null, mapDispatchToProps)(CalendarView)
components/chart/chart.js
+1 -1
View File
@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
},
loadingContainer: {
height: '100%',
backgroundColor: Colors.tourquiseLight,
backgroundColor: Colors.turquoiseLight,
justifyContent: 'center'
},
page: {
components/chart/dot-and-line.js
+3 -3
View File
@@ -54,11 +54,11 @@ export default class DotAndLine extends Component {
const dot = new Path().moveTo(CHART_COLUMN_MIDDLE , y - CHART_DOT_RADIUS)
.arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
.arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
const dotColor = exclude ? Colors.tourquise : Colors.tourquiseDark
const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
const lineColorLeft = excludeLeftLine ?
Colors.tourquise : Colors.tourquiseDark
Colors.turquoise : Colors.turquoiseDark
const lineColorRight = excludeRightLine ?
Colors.tourquise : Colors.tourquiseDark
Colors.turquoise : Colors.turquoiseDark
return(
<React.Fragment>
components/common/app-page.js
+2 -2
View File
@@ -36,11 +36,11 @@ AppPage.propTypes = {
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.tourquiseLight,
backgroundColor: Colors.turquoiseLight,
flex: 1
},
scrollView: {
backgroundColor: Colors.tourquiseLight,
backgroundColor: Colors.turquoiseLight,
flexGrow: 1
},
title: {
components/header/logo.js
+1 -1
View File
@@ -23,7 +23,7 @@ Logo.propTypes = {
const styles = StyleSheet.create({
logo: {
color: Colors.tourquiseDark,
color: Colors.turquoiseDark,
fontFamily: Fonts.bold,
fontSize: Sizes.title
}
components/helpers/calendar.js
+18 -17
View File
@@ -12,11 +12,13 @@ export const toCalFormat = (bleedingDaysSortedByDate) => {
customStyles: {
container: {
backgroundColor: shades[day.bleeding.value],
}
}
}
if (day.date === todayDateString) {
acc[day.date].customStyles.text = styles.calendarToday
paddingTop: 2,
},
text: {
color: Colors.turquoiseLight,
...(day.date === todayDateString && styles.calendarToday),
},
},
}
return acc
}, {})
@@ -31,12 +33,11 @@ export const predictionToCalFormat = (predictedDays) => {
accSet[day] = {
customStyles: {
container: {
borderColor: (i === middleIndex) ? shades[3] : shades[0],
borderStyle: (i === middleIndex) ? 'solid' : 'dashed',
borderColor: i === middleIndex ? shades[3] : shades[0],
borderStyle: i === middleIndex ? 'solid' : 'dashed',
borderWidth: 1,
},
}
},
}
if (day === todayDateString) {
accSet[day].customStyles.text = styles.calendarToday
@@ -50,24 +51,24 @@ export const predictionToCalFormat = (predictedDays) => {
export const todayToCalFormat = () => {
const todayDateString = LocalDate.now().toString()
const todayFormated = {}
todayFormated[todayDateString] = {
customStyles: {
text: styles.calendarToday
}
return {
[todayDateString]: {
customStyles: {
text: styles.calendarToday,
},
},
}
return todayFormated
}
const styles = {
calendarToday: {
fontFamily: Fonts.bold,
color: Colors.purple
color: Colors.purple,
},
}
export const calendarTheme = {
calendarBackground: Colors.tourquiseLight,
calendarBackground: Colors.turquoiseLight,
dayTextColor: Colors.greyDark,
monthTextColor: Colors.purple,
textDayFontFamily: Fonts.main,
components/home.js
+6 -6
View File
@@ -77,21 +77,21 @@ class Home extends Component {
{cycleDayNumber &&
<View style={styles.line}>
<AppText style={styles.whiteSubtitle}>{cycleDayText}</AppText>
<AppText style={styles.tourquiseText}>{labels.cycleDay}</AppText>
<AppText style={styles.turquoiseText}>{labels.cycleDay}</AppText>
</View>
}
{phase &&
<View style={styles.line}>
<AppText style={styles.whiteSubtitle}>{phaseText}</AppText>
<AppText style={styles.tourquiseText}>
<AppText style={styles.turquoiseText}>
{labels.cyclePhase}
</AppText>
<AppText style={styles.tourquiseText}>{status}</AppText>
<AppText style={styles.turquoiseText}>{status}</AppText>
<Asterisk />
</View>
}
<View style={styles.line}>
<AppText style={styles.tourquiseText}>{prediction}</AppText>
<AppText style={styles.turquoiseText}>{prediction}</AppText>
</View>
<Button isCTA isSmall={false} onPress={this.navigateToCycleDayView}>
{labels.addData}
@@ -137,8 +137,8 @@ const styles = StyleSheet.create({
fontSize: Sizes.huge,
marginVertical: Spacing.base,
},
tourquiseText: {
color: Colors.tourquise,
turquoiseText: {
color: Colors.turquoise,
fontSize: Sizes.subtitle,
},
whiteSubtitle: {
components/settings/nfp-settings/temperature-slider.js
+3 -3
View File
@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
paddingTop: Sizes.base
},
marker: {
backgroundColor: Colors.tourquiseDark,
backgroundColor: Colors.turquoiseDark,
borderRadius: 50,
elevation: 4,
height: Sizes.subtitle,
@@ -72,9 +72,9 @@ const styles = StyleSheet.create({
height: Sizes.small
},
sliderAccentBackground: {
backgroundColor: Colors.tourquiseDark
backgroundColor: Colors.turquoiseDark
},
sliderBackground: {
backgroundColor: Colors.tourquise
backgroundColor: Colors.turquoise
},
})
styles/colors.js
+3 -3
View File
@@ -19,9 +19,9 @@ export default {
orange: '#F38337',
purple: '#3A2671',
purpleLight: '#938EB2',
tourquiseDark: '#69CBC1',
tourquise: '#CFECEA',
tourquiseLight: '#E9F2ED',
turquoiseDark: '#69CBC1',
turquoise: '#CFECEA',
turquoiseLight: '#E9F2ED',
iconColors: {
'bleeding': {
color: redColor,