minor changes

src/navigation/tab-navigator.tsx

@@ -2,9 +2,9 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { Image } from "react-native";
 import CameraScreen from "../component/video/camera";
+import Profile from "../screens/profile";
 import Session from "../screens/session";
 import RecordScreen from "../screens/video-stack/record";
-import Profile from "../screens/profile";
 import { tabIconColors } from "../styles";
 
 // TODO: add ts support for assets folder to use imports
@@ -49,8 +49,6 @@ export default function Tabs(): React.JSX.Element {
 				},
 			})}
 		>
-
-			
 			<Tab.Screen
 				name="Session"
 				component={Session}

src/screens/profile.tsx

@@ -3,24 +3,43 @@ import { StyleSheet, Text, View } from "react-native";
 import SignOutButton from "../component/buttons/sign-out";
 import { useAuth } from "../context";
 
-// Session Mock - can be used for session summary screen using a query handler component
-// BarGraph component using mocked data currently
+// Profile Mock - can be used for session summary screen using a query handler component
+// Sign out button only functional when NOT using dev env
 export default function ProfileScreen() {
 	const { user } = useAuth();
 
-
 	return (
-		<View style={StyleSheet.absoluteFill}>
-
+		<View style={styles.container}>
 			{user && (
 				<>
-					<Text style={{ marginTop: 10 }}>
+					<View style={styles.userInfo}>
+						<Text>
 							Display name: {user?.displayName}
 						</Text>
-					<Text>Phone number: {user?.phoneNumber}</Text>
+						<Text>
+							Phone number: {user?.phoneNumber}
+						</Text>
+					</View>
+					<View style={styles.signOutButton}>
+						<SignOutButton />
+					</View>
 				</>
 			)}
-			<SignOutButton />
 		</View>
 	);
 }
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		justifyContent: "space-between",
+	},
+	userInfo: {
+		marginTop: 10,
+		paddingHorizontal: 10,
+	},
+	signOutButton: {
+		paddingBottom: "5%",
+    paddingHorizontal: "25%"
+	},
+});

src/styles.ts

@@ -13,9 +13,9 @@ export const colors = {
 };
 
 export const tabIconColors = {
-	default: '#1D1B20',
-	selected: '#598EBB',
-}
+	default: "#1D1B20",
+	selected: "#598EBB",
+};
 
 export const shadows = {
 	standard: {