sketch out profile screen so we have a logout, minor clean up

src/navigation/tab-navigator.tsx

@@ -4,6 +4,8 @@ import { Image } from "react-native";
 import CameraScreen from "../component/video/camera";
 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
 const Icon = require("../assets/favicon.png");
@@ -15,6 +17,7 @@ const RecordStack = createNativeStackNavigator();
 const tabIcons = {
 	Session: <Image source={Icon} style={{ width: 20, height: 20 }} />,
 	VideoStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
+	Profile: <Image source={Icon} style={{ width: 20, height: 20 }} />,
 };
 
 function VideoTabStack() {
@@ -39,13 +42,15 @@ export default function Tabs(): React.JSX.Element {
 		<Tab.Navigator
 			screenOptions={({ route }) => ({
 				headerShown: false,
-				tabBarActiveTintColor: "tomato",
-				tabBarInactiveTintColor: "gray",
+				tabBarActiveTintColor: tabIconColors.selected,
+				tabBarInactiveTintColor: tabIconColors.default,
 				tabBarIcon: () => {
 					return tabIcons[route.name];
 				},
 			})}
 		>
+
+			
 			<Tab.Screen
 				name="Session"
 				component={Session}
@@ -56,6 +61,11 @@ export default function Tabs(): React.JSX.Element {
 				component={VideoTabStack}
 				options={{ tabBarLabel: "Record" }}
 			/>
+			<Tab.Screen
+				name="Profile"
+				component={Profile}
+				options={{ tabBarLabel: "Profile" }}
+			/>
 		</Tab.Navigator>
 	);
 }

src/screens/profile.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+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
+export default function ProfileScreen() {
+	const { user } = useAuth();
+	
+
+	return (
+		<View style={StyleSheet.absoluteFill}>
+
+			{user && (
+				<>
+					<Text style={{ marginTop: 10 }}>
+						Display name: {user?.displayName}
+					</Text>
+					<Text>Phone number: {user?.phoneNumber}</Text>
+				</>
+			)}
+			<SignOutButton />
+		</View>
+	);
+}

src/screens/session.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
 import { graph_data_two_measures } from "../../test/mock/charts/mock-data";
-import SignOutButton from "../component/buttons/sign-out";
 import BarGraph from "../component/charts/bar-graph/bar-graph";
 
 // Session Mock - can be used for session summary screen using a query handler component
@@ -10,7 +9,6 @@ export default function SessionScreen() {
 	return (
 		<View style={StyleSheet.absoluteFill}>
 			<BarGraph data={graph_data_two_measures} />
-			<SignOutButton />
 		</View>
 	);
 }

src/styles.ts

@@ -12,6 +12,11 @@ export const colors = {
 	textWhite: "#ffffff",
 };
 
+export const tabIconColors = {
+	default: '#1D1B20',
+	selected: '#598EBB',
+}
+
 export const shadows = {
 	standard: {
 		shadowColor: "#000000",