diff --git a/components/home.js b/components/home.js index 5e64814..ad4edb5 100644 --- a/components/home.js +++ b/components/home.js @@ -1,14 +1,12 @@ import { ChronoUnit, LocalDate } from 'js-joda' import React, { Component } from 'react' -import { Dimensions, ScrollView, TouchableHighlight, View } from 'react-native' -import Icon from 'react-native-vector-icons/Entypo' +import { ScrollView, View } from 'react-native' import DripHomeIcon from '../assets/drip-home-icons' import { getCycleDay } from '../db' import { bleedingPrediction as predictLabels, - home as labels, - shared, + home as labels } from '../i18n/en/labels' import links from '../i18n/en/links' import cycleModule from '../lib/cycle' @@ -18,25 +16,6 @@ import AppText from './app-text' import Button from './button' import { formatDateForShortText } from './helpers/format-date' -const ShowMoreToggler = ({ isShowingMore, onToggle }) => { - const {height, width} = Dimensions.get('window') - const leftPosition = isShowingMore ? 10 : width - 40 - const style = isShowingMore ? styles.showLess : styles.showMore - const topPosition = height / 2 - styles.header.height - 30 - - return ( - - - {isShowingMore ? shared.less : shared.more} - - - - ) -} - const IconText = ({ children, wrapperStyles }) => { return ( @@ -51,15 +30,22 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => { return ( - { children } - + + {children[0]} + {children[1]} + + + + {children[2]} + + ) } @@ -75,7 +61,6 @@ export default class Home extends Component { const fertilityStatus = getFertilityStatusForDay(this.todayDateString) this.state = { - isShowingMore: false, cycleDayNumber: this.getCycleDayNumber(this.todayDateString), predictionText: determinePredictionText(prediction), bleedingPredictionRange: getBleedingPredictionRange(prediction), @@ -91,12 +76,8 @@ export default class Home extends Component { }) } - toggleShowingMore = () => { - this.setState({ isShowingMore: !this.state.isShowingMore }) - } - render() { - const { isShowingMore, cycleDayNumber, phase, status } = this.state + const { cycleDayNumber, phase, status } = this.state const { navigate } = this.props const cycleDayMoreText = cycleDayNumber ? labels.cycleDayKnown(cycleDayNumber) : @@ -117,13 +98,11 @@ export default class Home extends Component { - + {cycleDayNumber || labels.unknown} - { isShowingMore && - {cycleDayMoreText} - } + {cycleDayMoreText} - - - + - + {this.state.bleedingPredictionRange} - { isShowingMore && - - {this.state.predictionText} - - } + + {this.state.predictionText} + - + { phase ? phase.toString() : labels.unknown } { phase && - {`${labels.phase(phase)} (${status})`} - } - { isShowingMore && - - - { `${statusText} ${links.wiki.url}.` } - - + + {`${labels.phase(phase)} (${status})`} + } + + + { `${statusText} ${links.wiki.url}.` } + + - ) } diff --git a/i18n/en/labels.js b/i18n/en/labels.js index ddae047..df5d2ce 100644 --- a/i18n/en/labels.js +++ b/i18n/en/labels.js @@ -15,8 +15,6 @@ export const shared = { date: 'Date', cycleDayWithLinebreak: 'Cycle\nday', loading: 'Loading ...', - more: 'more', - less: 'less', enter: 'Enter' } diff --git a/styles/index.js b/styles/index.js index 2b5d0f0..5fba45a 100644 --- a/styles/index.js +++ b/styles/index.js @@ -104,9 +104,6 @@ export default StyleSheet.create({ marginLeft: 10, marginTop: 6 }, - homeView: { - marginHorizontal: 50, - }, button: { paddingVertical: 10, paddingHorizontal: 20, @@ -120,29 +117,26 @@ export default StyleSheet.create({ homeButtonText: { color: fontOnPrimaryColor }, - homeIconElement: { - alignItems: 'center', - marginTop: 15 + homeView: { + margin: 40, + }, + homeDescriptionText: { + width: 200, + marginBottom: defaultBottomMargin, + }, + homeElement: { + marginBottom: 40, + flexDirection: 'row', }, homeIconTextWrapper: { alignItems: 'center', justifyContent: 'center', - marginBottom: 10, }, - wrapperCycle: { + homeIconAndText: { + justifyContent: 'center' + }, + wrapperIcon: { width: 80, - height: 77, - position: 'absolute' - }, - wrapperDrop: { - width: 81, - height: 85, - marginTop: 20, - position: 'absolute' - }, - wrapperCircle: { - width: 80, - height: 80, position: 'absolute' }, homeCircle: { @@ -157,14 +151,6 @@ export default StyleSheet.create({ iconText: { fontSize: 25 }, - showMore: { - transform: [{rotate: '90deg'}], - position: 'absolute', - }, - showLess: { - transform: [{rotate: '270deg'}], - position: 'absolute' - }, cycleDayNumber: { fontSize: 15, color: fontOnPrimaryColor,