Merge pull request #9 from TaskRatchet/Working

email/help button on login and home screen

ios/.xcode.env

@@ -1,11 +1 @@
-# This `.xcode.env` file is versioned and is used to source the environment
-# used when running script phases inside Xcode.
-# To customize your local environment, you can create an `.xcode.env.local`
-# file that is not versioned.
-
-# NODE_BINARY variable contains the PATH to the node executable.
-#
-# Customize the NODE_BINARY variable here.
-# For example, to use nvm with brew, add the following line
-# . "$(brew --prefix nvm)/nvm.sh" --no-use
-export NODE_BINARY=$(command -v node)
+export NODE_BINARY=/Users/lukearthur/.nvm/versions/node/v18.19.0/bin/node

ios/Podfile.lock

@@ -491,7 +491,7 @@ PODS:
     - React-perflogger (= 0.72.7)
   - RNCAsyncStorage (1.21.0):
     - React-Core
-  - RNGestureHandler (2.14.0):
+  - RNGestureHandler (2.14.1):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
   - RNScreens (3.29.0):
@@ -734,7 +734,7 @@ SPEC CHECKSUMS:
   React-utils: 56838edeaaf651220d1e53cd0b8934fb8ce68415
   ReactCommon: 5f704096ccf7733b390f59043b6fa9cc180ee4f6
   RNCAsyncStorage: 618d03a5f52fbccb3d7010076bc54712844c18ef
-  RNGestureHandler: 32a01c29ecc9bb0b5bf7bc0a33547f61b4dc2741
+  RNGestureHandler: fe2be3be5598dc74329b211c58c9f2d231461769
   RNScreens: 3c5b9f4a9dcde752466854b6109b79c0e205dad3
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 4c3aa327e4a6a23eeacd71f61c81df1bcdf677d5

ios/mobile.xcodeproj/xcshareddata/xcschemes/mobile.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1210"
+   LastUpgradeVersion = "1510"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

package.json

@@ -29,7 +29,7 @@
     "punycode": "^2.3.1",
     "react": "^18.2.0",
     "react-native": "0.72.7",
-    "react-native-gesture-handler": "^2.14.0",
+    "react-native-gesture-handler": "^2.14.1",
     "react-native-safe-area-context": "^4.7.4",
     "react-native-screens": "^3.27.0",
     "react-native-secure-key-store": "^2.0.10"

src/screens/HomeScreen.tsx

@@ -9,6 +9,8 @@ import {
   View,
 } from 'react-native';
 
+import helpIconBlack from '../../assets/icons/help_circle(black).png';
+import helpIconWhite from '../../assets/icons/help_circle(white).png';
 import infoIconBlack from '../../assets/icons/information_icon(black).png';
 import infoIconWhite from '../../assets/icons/information_icon(white).png';
 import userLogoBlack from '../../assets/icons/user_logo(black).png';
@@ -23,6 +25,7 @@ import {getTasks} from '../services/taskratchet/getTasks';
 import {styles} from '../styles/homeScreenStyle';
 import useIsDarkMode from '../utils/checkDarkMode';
 import checkDate from '../utils/checkDate';
+import {handleHelpButtonPress} from '../utils/handleHelpButtonPress';
 
 export default function HomeScreen({navigation}: Props): JSX.Element {
   const [taskModalVisible, setTaskModalVisible] = useState(false);
@@ -94,16 +97,28 @@ export default function HomeScreen({navigation}: Props): JSX.Element {
               User Profile
             </Text>
           </Pressable>
-          <Pressable onPress={handleInfoButtonPress}>
-            <Image
-              style={styles.infoImageStyle}
-              source={
-                isDarkMode
-                  ? (infoIconWhite as ImageSourcePropType)
-                  : (infoIconBlack as ImageSourcePropType)
-              }
-            />
-          </Pressable>
+          <View style={styles.infoHelpPair}>
+            <Pressable onPress={handleHelpButtonPress}>
+              <Image
+                style={styles.helpImageStyle}
+                source={
+                  isDarkMode
+                    ? (helpIconWhite as ImageSourcePropType)
+                    : (helpIconBlack as ImageSourcePropType)
+                }
+              />
+            </Pressable>
+            <Pressable onPress={handleInfoButtonPress}>
+              <Image
+                style={styles.infoImageStyle}
+                source={
+                  isDarkMode
+                    ? (infoIconWhite as ImageSourcePropType)
+                    : (infoIconBlack as ImageSourcePropType)
+                }
+              />
+            </Pressable>
+          </View>
         </View>
         <View style={styles.headerStylesBox}>
           <Text style={[textColorStyle, styles.screenTitle]}>TASK RATCHET</Text>

src/screens/LoginScreen.tsx

@@ -12,13 +12,16 @@ import {
   View,
 } from 'react-native';
 
+import helpIconBlack from '../../assets/icons/help_circle(black).png';
+import helpIconWhite from '../../assets/icons/help_circle(white).png';
 import logoBordered from '../../assets/images/logo_taskratchet_512_bordered.png';
 import logo from '../../assets/images/[email protected]';
 import {Props} from '../components/types';
 import themeProvider from '../providers/themeProvider';
 import {login} from '../services/taskratchet/login';
 import {styles} from '../styles/loginScreenStyle';
 import useIsDarkMode from '../utils/checkDarkMode';
+import {handleHelpButtonPress} from '../utils/handleHelpButtonPress';
 
 export default function LoginScreen({navigation}: Props): JSX.Element {
   const isDarkMode = useIsDarkMode();
@@ -58,6 +61,16 @@ export default function LoginScreen({navigation}: Props): JSX.Element {
         source={logo as ImageSourcePropType}
       />
       <SafeAreaView>
+        <Pressable style={styles.topButtonBox} onPress={handleHelpButtonPress}>
+          <Image
+            style={styles.helpImageStyle}
+            source={
+              isDarkMode
+                ? (helpIconWhite as ImageSourcePropType)
+                : (helpIconBlack as ImageSourcePropType)
+            }
+          />
+        </Pressable>
         <KeyboardAvoidingView style={styles.container}>
           <Image
             style={styles.logoBordered}
@@ -67,7 +80,6 @@ export default function LoginScreen({navigation}: Props): JSX.Element {
             <Text style={[textColorStyle, styles.title]}>TaskRatchet</Text>
             <Text style={[textColorStyle, styles.title]}>Login</Text>
           </View>
-
           <View style={styles.credentials}>
             <View style={styles.inputGroup}>
               <Text style={[textColorStyle, styles.inputTitle]}>Username</Text>

src/styles/homeScreenStyle.tsx

@@ -85,6 +85,17 @@ export const styles = StyleSheet.create({
     width: 22,
     height: 22,
   },
+  helpImageStyle: {
+    marginRight: 5,
+    marginTop: 12,
+    width: 22,
+    height: 22,
+  },
+  infoHelpPair: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
   headerStylesBox: {
     margin: 50,
     alignItems: 'center',

src/styles/loginScreenStyle.tsx

@@ -88,4 +88,15 @@ export const styles = StyleSheet.create({
     color: '#2A5364',
     textAlign: 'center',
   },
+  helpImageStyle: {
+    marginRight: 5,
+    marginTop: 12,
+    width: 22,
+    height: 22,
+  },
+  topButtonBox: {
+    position: 'absolute',
+    top: 5,
+    right: 10,
+  },
 });

src/utils/handleHelpButtonPress.tsx

@@ -0,0 +1,7 @@
+import {Linking} from 'react-native';
+
+export function handleHelpButtonPress() {
+  Linking.openURL('mailto:[email protected]').catch(err =>
+    console.error('An error occurred', err),
+  );
+}