From 427ea376fff7c69626bbe385201c8dcd3606d14d Mon Sep 17 00:00:00 2001 From: Maxine Yee Date: Fri, 12 Jun 2020 21:38:07 -0700 Subject: [PATCH 1/8] Fix login screen layout --- components/forms/Input.js | 26 ++++++++++++++++---------- screens/LoginScreen.js | 18 ++++++------------ 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/components/forms/Input.js b/components/forms/Input.js index fd8d79b..56c6186 100644 --- a/components/forms/Input.js +++ b/components/forms/Input.js @@ -11,6 +11,7 @@ const Input = React.forwardRef((props, ref) => { const [passwordHidden, setPasswordHidden] = useState(true); const [value, setValue] = useState(""); const [error, setError] = useState(""); + const [selection, setSelection] = useState(0); const inputStyles = (!!error)? errorInputStyles : noErrorInputStyles; @@ -40,18 +41,25 @@ const Input = React.forwardRef((props, ref) => { props.onChangeText(value, !result); }); + const passwordIcon = passwordHidden? "md-eye" : "md-eye-off"; return ( - + - + { + props.label && + + } setSelection(0)} + onFocus={() => setSelection(value.length)} secureTextEntry={(props.variant == "password" && passwordHidden)} + selection={{start: selection}} style={{...inputStyles.input, ...props.style}} textAlignVertical={props.multiline? "top" : "auto"} getRef={ref} @@ -59,12 +67,10 @@ const Input = React.forwardRef((props, ref) => { /> {/* For password inputs, add an icon to show/hide password */} - {(props.variant == "password") && ( - (passwordHidden)? - setPasswordHidden(false)} /> - : - setPasswordHidden(true)} /> - )} + { + (props.variant == "password") && + setPasswordHidden(false)} /> + } @@ -80,7 +86,8 @@ const Input = React.forwardRef((props, ref) => { Input.propTypes = { variant: PropTypes.oneOf([ "text", "password", "number"]), - label: PropTypes.string.isRequired, + label: PropTypes.string, + placeholder: PropTypes.string, hasNext: PropTypes.bool, refresh: PropTypes.bool, constraints: PropTypes.object, @@ -122,7 +129,6 @@ const baseStyles = { const noErrorInputStyles = StyleSheet.create({ item: { ...baseStyles, - marginTop: theme.layout.margin, backgroundColor: theme.colors.white // Match the background color }, label: { diff --git a/screens/LoginScreen.js b/screens/LoginScreen.js index beda582..7ceef65 100644 --- a/screens/LoginScreen.js +++ b/screens/LoginScreen.js @@ -76,7 +76,7 @@ class LoginScreen extends Component { /> - + - - - @@ -103,20 +100,17 @@ const styles = StyleSheet.create({ flex: 0, }, rememberMe: { - flex: 2, + flex: 0, flexDirection: "row", - marginTop: theme.layout.margin, + marginBottom: theme.layout.margin, alignSelf: "flex-end", + justifyContent: "flex-start" }, rememberMeSwitch: { marginLeft: theme.layout.margin, }, - loginButton: { - flex: 6, - justifyContent: "flex-start", - }, - signupButton: { - flex: 3, + buttons: { + justifyContent: "space-around" } }); From 7dcf3bfbc6620fad33aa8c58d2dd8272f1fe36bf Mon Sep 17 00:00:00 2001 From: Maxine Yee Date: Sat, 13 Jun 2020 17:07:45 -0700 Subject: [PATCH 2/8] Fix Using screen --- components/Timer/Timer.js | 4 ++-- components/buttons/Button.js | 2 +- components/buttons/IconButton.js | 2 +- components/layout/Banner.js | 4 +--- components/layout/Content.js | 2 +- components/layout/Segment.js | 4 ++-- screens/UsingScreen.js | 31 ++++++++++++++++++++----------- styles/base.js | 14 ++++++++++---- 8 files changed, 38 insertions(+), 25 deletions(-) diff --git a/components/Timer/Timer.js b/components/Timer/Timer.js index 112c336..c3d376f 100644 --- a/components/Timer/Timer.js +++ b/components/Timer/Timer.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { StyleSheet } from "react-native"; +import { StyleSheet, Dimensions } from "react-native"; import { Actions } from "react-native-router-flux"; import { connect } from "react-redux"; import { increaseTime, decreaseTime, countdown, clearTime, resetTime, updateAlarmLog } from "../../store/actions"; @@ -74,7 +74,7 @@ class Timer extends Component { return ( { const contentStyles = StyleSheet.create({ content: { flex: 1, - padding: (theme.layout.padding + theme.layout.margin) + padding: theme.layout.margin } }); diff --git a/components/layout/Segment.js b/components/layout/Segment.js index 4ade659..fff42c3 100644 --- a/components/layout/Segment.js +++ b/components/layout/Segment.js @@ -8,7 +8,7 @@ import View from "./View"; const Segment = (props) => { return ( - + { - - Actions.responding()} - /> - - + Actions.responding()} + /> + { }; const styles = StyleSheet.create({ + segment: { + flex: 0 + }, + icons: { + flex: 0, + flexGrow: 1, + padding: theme.layout.padding + }, timer: { - flex: 5 + flex: 0, + flexGrow: 2 }, startButton: { - flex: 2 + flex: 3 } }); diff --git a/styles/base.js b/styles/base.js index 9fc2943..ad5dede 100644 --- a/styles/base.js +++ b/styles/base.js @@ -1,3 +1,9 @@ +import { Dimensions } from "react-native"; +const { width, height } = Dimensions.get("window"); +const vw = Math.round(width); +const vh = Math.round(height); +const isAboveBreakpoint = (vh > 600); + export const theme = { colors: { green: "#60A781", @@ -19,7 +25,7 @@ export const theme = { xsmall: 14, small: 16, medium: 18, - large: 24, + large: isAboveBreakpoint? 24 : 20, xlarge: 72, }, iconSizes: { @@ -29,13 +35,13 @@ export const theme = { layout: { padding: 4, margin: 16, - headerHeight: 90, - bannerHeight: 64, + headerHeight: isAboveBreakpoint? 90 : 70, segmentHeight: 40, errorTextHeight: 26, }, buttons: { - buttonPressOpacity: 0.5 + buttonPressOpacity: 0.5, + iconSize: isAboveBreakpoint? 42 : 32, }, animation: { fast: 300, From 4a01602ac4ae880e5219203018b7079140c248fe Mon Sep 17 00:00:00 2001 From: Maxine Yee Date: Sat, 13 Jun 2020 17:09:21 -0700 Subject: [PATCH 3/8] Layout fixes --- components/popups/Modal.js | 4 ++-- screens/AlarmScreen.js | 3 --- screens/LocationScreen.js | 4 ++-- screens/ResourceScreen.js | 16 +++++++++------- screens/RespondingScreen.js | 8 +++++++- screens/SignupScreen.js | 16 ++++------------ screens/SnoozeScreen.js | 4 +++- 7 files changed, 27 insertions(+), 28 deletions(-) diff --git a/components/popups/Modal.js b/components/popups/Modal.js index 94c3657..e457473 100644 --- a/components/popups/Modal.js +++ b/components/popups/Modal.js @@ -1,5 +1,5 @@ import React from 'react'; -import { StyleSheet, Dimensions, TouchableWithoutFeedback, Modal as RNModal } from 'react-native'; +import { StyleSheet, TouchableWithoutFeedback, Modal as RNModal } from 'react-native'; import PropTypes from "prop-types"; import theme from "../../styles/base"; import { View } from "../layout"; @@ -77,7 +77,7 @@ const styles = StyleSheet.create({ }, body: { flex: 0, - padding: theme.layout.padding, + marginBottom: theme.layout.margin, alignSelf: "stretch" }, footer: { diff --git a/screens/AlarmScreen.js b/screens/AlarmScreen.js index a8bb5b1..02dcda0 100644 --- a/screens/AlarmScreen.js +++ b/screens/AlarmScreen.js @@ -52,9 +52,6 @@ const AlarmScreen = props => { - - - diff --git a/screens/LocationScreen.js b/screens/LocationScreen.js index 8fdf343..755076d 100644 --- a/screens/LocationScreen.js +++ b/screens/LocationScreen.js @@ -135,7 +135,7 @@ const LocationScreen = (props) => { />
- setAddress(text)} placeholder="Enter address" @@ -146,7 +146,7 @@ const LocationScreen = (props) => { multiline onSubmitEditing={() => { notesInputRef._root.focus() }} /> - notesInputRef = input} variant="text" onChangeText={text => setNote(text)} diff --git a/screens/ResourceScreen.js b/screens/ResourceScreen.js index 9f135c5..9c9a722 100644 --- a/screens/ResourceScreen.js +++ b/screens/ResourceScreen.js @@ -1,21 +1,20 @@ import React from "react"; -import { - StyleSheet -} from "react-native"; +import { StyleSheet } from "react-native"; import { Button } from "../components/buttons"; import { Actions } from "react-native-router-flux"; import { Container, Content, Header, View } from "../components/layout"; +import theme from "../styles/base"; const ResourceScreen = () => { return (
Actions.drawerOpen()}>Resources
- + - + @@ -24,9 +23,12 @@ const ResourceScreen = () => { } const styles = StyleSheet.create({ + view: { + paddingVertical: theme.layout.margin, + justifyContent: "space-around" + }, button: { - width: "100%", - height: "12%" + width: "100%" } }); diff --git a/screens/RespondingScreen.js b/screens/RespondingScreen.js index c1c4d4d..59c6764 100644 --- a/screens/RespondingScreen.js +++ b/screens/RespondingScreen.js @@ -56,7 +56,9 @@ const RespondingScreen = props => { - I am available with Naloxone + + I am available with Naloxone + - - - You'll receive a verification code via text. -
@@ -112,18 +108,14 @@ class SignupScreen extends Component { const styles = StyleSheet.create({ title: { - flex: 0, + flex: 0 }, loginInfo: { - flex: 0, + flex: 0 }, signupButton: { - flex: 1, - }, - message: { - flex: 0, - justifyContent: "flex-start", - }, + flex: 1 + } }); const mapStateToProps = (state) => { diff --git a/screens/SnoozeScreen.js b/screens/SnoozeScreen.js index f67fd7b..ca152d7 100644 --- a/screens/SnoozeScreen.js +++ b/screens/SnoozeScreen.js @@ -104,10 +104,12 @@ class SnoozeScreen extends Component { const styles = StyleSheet.create({ text: { color: theme.colors.white, + paddingVertical: theme.layout.margin, + textAlign: "center" }, numeral: { color: theme.colors.white, - paddingVertical: 80 + paddingVertical: "10%" } }); From 18ad8b191e099be060ad0ec74edbc27d97ed8083 Mon Sep 17 00:00:00 2001 From: Maxine Yee Date: Sat, 13 Jun 2020 17:10:09 -0700 Subject: [PATCH 4/8] Clean up --- components/drawer/DrawerContent.js | 2 +- components/typography/Text.js | 2 +- services/notification-token.service.js | 9 +++++++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/components/drawer/DrawerContent.js b/components/drawer/DrawerContent.js index 268eece..5dc8ff9 100644 --- a/components/drawer/DrawerContent.js +++ b/components/drawer/DrawerContent.js @@ -50,7 +50,7 @@ const DrawerContent = (props) => { { name: "Using", function: Actions.using }, { name: "Responding", function: Actions.responding }, { name: "User Profile", function: Actions.profile }, - { name: "Resource", function: Actions.resource }, + { name: "Resources", function: Actions.resource }, { name: "Logout", function: () => { Actions.modal(modalParams) } }, ]; diff --git a/components/typography/Text.js b/components/typography/Text.js index bb2300e..b4b80a8 100644 --- a/components/typography/Text.js +++ b/components/typography/Text.js @@ -57,7 +57,7 @@ const textStyles = StyleSheet.create({ }, numeral: { fontFamily: theme.fonts.numeral, - fontSize: 72, + fontSize: theme.fontSizes.xlarge, color: theme.colors.darkGrey } }); diff --git a/services/notification-token.service.js b/services/notification-token.service.js index 67501b5..25048e7 100644 --- a/services/notification-token.service.js +++ b/services/notification-token.service.js @@ -11,8 +11,13 @@ const sendNotificationToken = async userId => { return; } - let token = await Notifications.getExpoPushTokenAsync(); - console.log("push token: ", token); + let token = ""; + try { + token = await Notifications.getExpoPushTokenAsync(); + console.log("push token: ", token); + } catch (err) { + console.log("no push token received"); + } return axios .post(SERVER_ROOT + "/users/" + userId + "/notification-token", { From eb466e0e5dc883740bd7297e12bf9291f40b86e8 Mon Sep 17 00:00:00 2001 From: Maxine Yee Date: Sat, 13 Jun 2020 17:26:48 -0700 Subject: [PATCH 5/8] Fix Button throttle --- components/buttons/Button.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/buttons/Button.js b/components/buttons/Button.js index cdc056d..ed1d2eb 100644 --- a/components/buttons/Button.js +++ b/components/buttons/Button.js @@ -16,8 +16,8 @@ const Button = (props) => { const onPress = async () => { if (!throttle) { setThrottle(true); - await props.onPress(); - buttonTimeout.current = setTimeout(() => setThrottle(false), 300); + await props.onPress() + if (!!buttonTimeout.current) setThrottle(false); } }; From 47cab638d7fb53e20860c581172ab881f1cfdeea Mon Sep 17 00:00:00 2001 From: Maxine Yee Date: Sat, 13 Jun 2020 17:55:04 -0700 Subject: [PATCH 6/8] Help request modal layout --- screens/modals/ResponderHelpRequestModal.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/screens/modals/ResponderHelpRequestModal.js b/screens/modals/ResponderHelpRequestModal.js index dcc2256..7c3f215 100644 --- a/screens/modals/ResponderHelpRequestModal.js +++ b/screens/modals/ResponderHelpRequestModal.js @@ -65,12 +65,13 @@ const ResponderHelpRequestModal = (props) => { {address || "Location not specified."}