Relative units

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 (
       <ProgressCircle
         percent={(1 - timeRemaining / time) * 100}
-        radius={127.5}
+        radius={Math.round(Dimensions.get("window").width * 0.375)}
         borderWidth={8}
         color={theme.colors.lightGrey}
         shadowColor={timeRemaining < 30 ? theme.colors.red : theme.colors.green}

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();
     }
   };
 
@@ -69,7 +69,7 @@ Button.defaultProps = {
 /* Styles */
 
 const baseButtonStyles = {
-  margin: theme.layout.margin,
+  margin: theme.layout.padding,
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 1

components/buttons/IconButton.js

@@ -18,8 +18,8 @@ const IconButton = (props) => {
   const onPress = async () => {
     if (!throttle) {
       setThrottle(true);
-      await props.onPress();
       buttonTimeout.current = setTimeout(() => setThrottle(false), 300);
+      await props.onPress();
     }
   };
 
@@ -77,7 +77,7 @@ IconButton.propTypes = {
 IconButton.defaultProps = {
   variant: "counter",
   name: "md-pin",
-  size: 42,
+  size: theme.buttons.iconSize,
   color: theme.colors.green,
   counterValue: 0
 };

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) } },
   ];
 

components/forms/Input.js

@@ -40,12 +40,16 @@ const Input = React.forwardRef((props, ref) => {
     props.onChangeText(value, !result);
   });
 
+  const passwordIcon = passwordHidden? "md-eye" : "md-eye-off";
   return (
     <Fragment>
 
-      <Item floatingLabel {...itemProps} style={inputStyles.item}>
+      <Item floatingLabel={!!props.label} {...itemProps} style={inputStyles.item}>
 
-        <Label style={inputStyles.label}>{props.label}</Label>
+        {
+          props.label &&
+          <Label style={inputStyles.label}>{props.label}</Label>
+        }
 
         <NBInput
           {...{...inputProps[props.variant], ...props}}
@@ -59,12 +63,10 @@ const Input = React.forwardRef((props, ref) => {
         />
 
         {/* For password inputs, add an icon to show/hide password */}
-        {(props.variant == "password") && (
-          (passwordHidden)? 
-          <Icon active style={inputStyles.icon} name="md-eye" onPress={() => setPasswordHidden(false)} /> 
-          : 
-          <Icon active style={inputStyles.icon} name="md-eye-off" onPress={() => setPasswordHidden(true)} />
-        )}
+        {
+          (props.variant == "password") &&
+          <Icon active style={inputStyles.icon} name={passwordIcon} onPress={() => setPasswordHidden(false)} />
+        }
 
       </Item>
 
@@ -80,7 +82,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 +125,6 @@ const baseStyles = {
 const noErrorInputStyles = StyleSheet.create({
   item: {
     ...baseStyles,
-    marginTop: theme.layout.margin,
     backgroundColor: theme.colors.white    // Match the background color
   },
   label: {

components/layout/Banner.js

@@ -18,9 +18,7 @@ const bannerStyles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    height: theme.layout.bannerHeight,
-    padding: theme.layout.padding,
-    overflow: "hidden"
+    padding: theme.layout.padding
   }
 });
 

components/layout/Content.js

@@ -15,7 +15,7 @@ const Content = (props) => {
 const contentStyles = StyleSheet.create({
   content: {
     flex: 1,
-    padding: (theme.layout.padding + theme.layout.margin)
+    padding: theme.layout.margin
   }
 });
 

components/layout/Segment.js

@@ -8,7 +8,7 @@ import View from "./View";
 
 const Segment = (props) => {
   return (
-    <View style={segmentStyles.view}>
+    <View style={{...segmentStyles.view, ...props.style}}>
       <SegmentButton 
         side="left"
         text={props.leftText}
@@ -85,8 +85,8 @@ const segmentButtonProps = {
 
 const buttonStyles = {
   flex: 1,
+  flexShrink: 1,
   justifyContent: "center",
-  height: theme.layout.segmentHeight,
   padding: theme.layout.padding,
   borderWidth: 1
 };

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: {

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
   }
 });

screens/AlarmScreen.js

@@ -52,9 +52,6 @@ const AlarmScreen = props => {
       </Header>
 
       <Content>
-        <Banner />
-        <Banner />
-
         <View style={styles.timer}>
           <Timer isUsing={true} />
         </View>

screens/LocationScreen.js

@@ -135,7 +135,7 @@ const LocationScreen = (props) => {
             />
         </View>
         <Form style={styles.form}>
-            <Input label=""
+            <Input
                 variant="text"
                 onChangeText={text => setAddress(text)}
                 placeholder="Enter address"
@@ -146,7 +146,7 @@ const LocationScreen = (props) => {
                 multiline
                 onSubmitEditing={() => { notesInputRef._root.focus() }}
             />
-            <Input label=""
+            <Input
                 ref={(input) => notesInputRef = input}
                 variant="text"
                 onChangeText={text => setNote(text)}

screens/LoginScreen.js

@@ -76,7 +76,7 @@ class LoginScreen extends Component {
               />
             </View>
 
-            <View style={styles.loginButton}>
+            <View style={styles.buttons}>
               <Button
                 variant="dark"
                 size="medium"
@@ -86,9 +86,6 @@ class LoginScreen extends Component {
               >
                 login
               </Button>
-            </View>
-
-            <View style={styles.signupButton}>
               <Button variant="light" size="medium" onPress={() => Actions.signup()}>sign up</Button>
             </View>
           </Form>
@@ -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"
   }
 });
 

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 (
     <Container>
     <Header leftButton="menu" onLeftButtonPress={() => Actions.drawerOpen()}>Resources</Header>
     <Content>
-      <View>
+      <View style={styles.view}>
         <Button variant="light" size="medium" style={styles.button}>naloxone injection instructions</Button>
         <Button variant="light" size="medium" style={styles.button}>naloxone nasal spray instructions</Button>
         <Button variant="light" size="medium" style={styles.button}>call 911</Button>
-        <Button variant="light" size="medium" style={styles.button}> your rights</Button>
+        <Button variant="light" size="medium" style={styles.button}>your rights</Button>
         <Button variant="dark" size="medium" style={styles.button} onPress={() => Actions.using()}>exit</Button>
       </View>
     </Content>
@@ -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%"
   }
 });
 

screens/RespondingScreen.js

@@ -56,7 +56,9 @@ const RespondingScreen = props => {
         </Banner>
 
         <View style={styles.setAvailability}>
-          <Text>I am available with Naloxone</Text>
+          <View style={styles.availabilityText}>
+            <Text>I am available with Naloxone</Text>
+          </View>
           <Switch
             style={styles.availabilitySwitch}
             value={props.naloxoneAvailability}
@@ -99,6 +101,10 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     marginVertical: theme.layout.margin
   },
+  availabilityText: {
+    alignItems: "flex-start",
+    flexWrap: "wrap"
+  },
   availabilitySwitch: {
     marginLeft: theme.layout.margin
   },

screens/SignupScreen.js

@@ -98,10 +98,6 @@ class SignupScreen extends Component {
                 login
               </Button>
             </View>
-
-            <View style={styles.message}>
-              <Text variant="footnote">You'll receive a verification code via text.</Text>
-            </View>
           </Form>
         </Content>
       </Container>
@@ -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) => {

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%"
   }
 });