Merge pull request #872 from andrew-bierman/add-save-and-back-feature

Add back feature to trip and profile settings
andrew-bierman · Apr 28, 2024 · 8183d40 · 8183d40
2 parents 4216e79 + a9d72e8
commit 8183d40
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 5 deletions.
diff --git a/packages/app/components/card/TripCardHeader/TripCardHeader.tsx b/packages/app/components/card/TripCardHeader/TripCardHeader.tsx
@@ -1,12 +1,43 @@
 import React from 'react';
-
+import {Text} from "react-native";
+import { useRouter } from 'app/hooks/router';
+import useTheme from 'app/hooks/useTheme';
 import { CustomCardHeader } from '../CustomCardHeader';
+import { RIconButton, RStack } from '@packrat/ui';
+import { AntDesign } from '@expo/vector-icons';
 
 export const TripCardHeader = ({ data, title, link }) => {
+
+  const { currentTheme } = useTheme();
+  const router = useRouter();
+
   return (
     <CustomCardHeader
       data={data}
-      title={title}
+      title={<RStack
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'row',
+        }}
+      >
+        <RIconButton
+          backgroundColor="transparent"
+          icon={
+            <AntDesign
+              name="arrowleft"
+              size={24}
+              color={currentTheme.colors.black}
+            />
+          }
+          onPress={()=>{
+            router.back();
+            }}
+        />
+        <Text>
+          {title}
+        </Text>
+      </RStack>}
       link={link}
       actionsComponent={undefined}
     />

diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Ionicons } from '@expo/vector-icons';
+import { AntDesign, Ionicons } from '@expo/vector-icons';
 import {
   RInput,
   RSeparator,
@@ -15,9 +15,12 @@ import {
   FormInput,
   FormSelect,
   SubmitButton,
+  RIconButton,
 } from '@packrat/ui';
 import Avatar from 'app/components/Avatar/Avatar';
 import { useProfileSettings } from 'app/hooks/user';
+import { useRouter } from 'app/hooks/router';
+import useTheme from 'app/hooks/useTheme';
 import { userSettingsSchema, passwordChangeSchema } from '@packrat/validations';
 
 const weatherOptions = ['celsius', 'fahrenheit'].map((key) => ({
@@ -34,6 +37,9 @@ export default function Settings() {
   const { user, handleEditUser, handlePasswordsChange, handleUpdatePassword } =
     useProfileSettings();
 
+    const { currentTheme } = useTheme();
+  const router = useRouter();
+
   return user ? (
     <RScrollView>
       <RStack
@@ -44,9 +50,28 @@ export default function Settings() {
         paddingHorizontal={8}
         marginHorizontal="auto"
       >
-        <RStack>
+        <RStack
+         style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'row',
+        }}
+        >
+        <RIconButton
+            backgroundColor="transparent"
+            icon={
+              <AntDesign
+                name="arrowleft"
+                size={24}
+                color={currentTheme.colors.black}
+              />
+            }
+            onPress={()=>{
+              router.back();
+              }}
+          />
           <RH2>Profile</RH2>
-          <RSeparator marginVertical={8} />
+
         </RStack>
         <Form
           validationSchema={userSettingsSchema}