diff --git a/components/README.md b/components/README.md index bd35441..fb03ae0 100644 --- a/components/README.md +++ b/components/README.md @@ -363,7 +363,7 @@ Props: - type: one of - "body", "footnote", "title" (used for displaying text on screen) - "header" (used in the Header component) - - "primary", "secondary", "alarm", "urgent" (used in the Button component) + - "primary", "secondary", "alarm", "urgent", "snooze" (used in the Button component) - "label" (used in the IconButton component) - default: "body" diff --git a/components/Timer/Timer.js b/components/Timer/Timer.js index 5d22bf8..43a3cd8 100644 --- a/components/Timer/Timer.js +++ b/components/Timer/Timer.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import { Text, View } from "react-native"; -//import ProgressCircle from "./ProgressCircle" +import { Actions } from "react-native-router-flux"; import { connect } from 'react-redux'; import { increaseTime, decreaseTime, countdown, clearTime, resetTime } from '../../store/actions'; import ProgressCircle from 'react-native-progress-circle'; @@ -16,9 +16,9 @@ class Timer extends Component { } countdown() { - if (this.props.time.timeRemaining - 1 <= 0) { - this.props.clearTime(); + if (this.props.time.timeRemaining - 1 <= 15) { clearInterval(this.interval); + Actions.snooze(); } else { this.props.countdown(this.props.time.timeRemaining); } @@ -70,7 +70,6 @@ class Timer extends Component { render() { const { time, timeRemaining } = this.props.time; - return ( { /* Prop Types */ Button.propTypes = { - variant: PropTypes.oneOf([ "primary", "secondary", "alarm", "urgent"]), + variant: PropTypes.oneOf([ "primary", "secondary", "alarm", "urgent", "snooze"]), }; Button.defaultProps = { @@ -82,6 +82,13 @@ const buttonStyles = StyleSheet.create({ ...large, backgroundColor: theme.colors.red, }, + snooze: { + ...base, + ...large, + ...border, + backgroundColor: theme.colors.white, + borderColor: theme.colors.darkGrey, + } }); export default Button; \ No newline at end of file diff --git a/components/typography/Text.js b/components/typography/Text.js index dad974b..7100410 100644 --- a/components/typography/Text.js +++ b/components/typography/Text.js @@ -13,7 +13,7 @@ const Text = (props) => { /* Prop Types */ Text.propTypes = { - variant: PropTypes.oneOf([ "body", "footnote", "title", "header", "primary", "secondary", "alarm", "urgent", "label"]), + variant: PropTypes.oneOf([ "body", "footnote", "title", "header", "primary", "secondary", "alarm", "urgent", "label", "snooze"]), }; 0 Text.defaultProps = { @@ -69,6 +69,12 @@ const textStyles = StyleSheet.create({ fontSize: theme.fontSizes.large, color: theme.colors.white, }, + snooze: { + ...regular, + fontSize: theme.fontSizes.large, + color: theme.colors.black, + fontWeight: "bold", + }, label: { ...regular, fontSize: theme.fontSizes.xsmall, diff --git a/screens/AlarmScreen.js b/screens/AlarmScreen.js index d3b5244..1e63314 100644 --- a/screens/AlarmScreen.js +++ b/screens/AlarmScreen.js @@ -23,7 +23,6 @@ const AlarmScreen = () => { Alarm Screen + + We'll check up on your in 2 minutes + + + + + ); + } } + const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "cyan", }, - welcome: { - fontSize: 20, + textStyle: { + fontSize: 18, + fontWeight: "bold", textAlign: "center", margin: 10, color: "#ffffff", + alignItems: "center", + }, + timeStyle: { + fontSize: 72, + fontWeight: "bold", + color: "#ffffff", + textAlign: "center", + paddingTop: 60, + paddingBottom: 80, + justifyContent: "center", + alignItems: "center", }, }); -export default SnoozeScreen; \ No newline at end of file +function mapStateToProps(state) { + return { + time: state.timer + } +} + +export default connect(mapStateToProps, { increaseTime, decreaseTime, countdown, clearTime, resetTime })(SnoozeScreen); \ No newline at end of file