Mobile

shatter-mobile/app/(tabs)/JoinEventPage.tsx

@@ -10,6 +10,8 @@ import {
     TextInput,
     TouchableOpacity,
     View,
+	KeyboardAvoidingView,
+	Platform,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useAuth } from "../../src/components/context/AuthContext";
@@ -50,6 +52,11 @@ export default function JoinEventPage() {
 				resizeMode="cover"
 			>
 				<SafeAreaView style={styles.safe}>
+					<KeyboardAvoidingView
+						style={{ flex: 1 }}
+						behavior={Platform.OS === "ios" ? "padding" : "height"}
+						keyboardVerticalOffset={80}
+					>
 					<View style={styles.header}>
 						<Text style={styles.pageTitle}>Start Shattering</Text>
 						<Text style={styles.subtitle}>
@@ -135,6 +142,7 @@ export default function JoinEventPage() {
 							</>
 						)}
 					</View>
+					</KeyboardAvoidingView>
 				</SafeAreaView>
 			</ImageBackground>
 		</AnimatedTab>

shatter-mobile/app/_layout.tsx

@@ -1,10 +1,12 @@
 import { getStoredAuth } from "@/src/components/context/AsyncStorage";
 import { GameProvider } from "@/src/components/context/GameContext";
 import FullPageLoader from "@/src/components/general/FullPageLoader";
+import { colors } from "@/src/styling/constants";
 import { Poppins_600SemiBold, useFonts } from "@expo-google-fonts/poppins";
 import { WorkSans_400Regular } from "@expo-google-fonts/work-sans";
 import { Asset } from "expo-asset";
 import { SplashScreen, Stack, useRouter } from "expo-router";
+import { StatusBar } from "expo-status-bar";
 import { useEffect, useRef, useState } from "react";
 import { Dimensions, Platform, View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -28,6 +30,11 @@ export default function RootLayout() {
 		"WorkSans-Regular": WorkSans_400Regular,
 	});
 
+	const webSafeAreaTop =
+		Platform.OS === "web"
+			? ("env(safe-area-inset-top)" as unknown as number)
+			: 0;
+
 	//preload background image
 	useEffect(() => {
 		Asset.loadAsync([BG_IMAGE]).finally(() => setAssetReady(true));
@@ -97,7 +104,14 @@ export default function RootLayout() {
 
 	return (
 		<SafeAreaProvider>
-			<View style={{ flex: 1 }}>
+			<View
+				style={{
+					flex: 1,
+					backgroundColor: colors.darkNavy,
+					paddingTop: webSafeAreaTop,
+				}}
+			>
+				<StatusBar style="light" />
 				<AuthProvider>
 					<GameProvider>{content}</GameProvider>
 				</AuthProvider>

shatter-mobile/app/auth/callback.tsx

@@ -1,13 +1,17 @@
 import { useAuth } from "@/src/components/context/AuthContext";
 import { User } from "@/src/interfaces/User";
-import { exchangeLinkedInCode, userFetch } from "@/src/services/user.service";
+import {
+    exchangeLinkedInCode,
+    userFetch,
+    userUpdate,
+} from "@/src/services/user.service";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { ActivityIndicator, Text, View } from "react-native";
 
 export default function AuthCallback() {
 	const { code } = useLocalSearchParams<{ code: string }>();
-	const { authenticate } = useAuth();
+	const { authenticate, authStorage } = useAuth();
 	const [error, setError] = useState("");
 
 	useEffect(() => {
@@ -35,9 +39,12 @@ export default function AuthCallback() {
 
 				// Store user + JWT in auth context
 				await authenticate(user, response.token, false);
+
+				// Update stored user with LinkedIn data
+				const token = authStorage.accessToken;
+				userUpdate(response.userId, user, token);
 				router.replace("/JoinEventPage");
 			} catch (err) {
-				console.log("Error with LinkedIn Callback: ", err);
 				setError((err as Error).message || "Authentication failed.");
 			}
 		};

shatter-mobile/src/components/general/LinkRow.tsx

@@ -1,59 +1,59 @@
 import { colors, fonts } from "@/src/styling/constants";
 import Feather from "@expo/vector-icons/build/Feather";
-import { StyleSheet, Linking, Pressable, View, Text } from "react-native";
+import { Linking, Pressable, StyleSheet, Text, View } from "react-native";
 
 type LinkRowProps = {
-    label: string;
-    url: string;
+	label: string;
+	url: string;
 };
 
 export const LinkRow = ({ label, url }: LinkRowProps) => {
-    return (
-        <Pressable
-            onPress={() => {
-                Linking.openURL(url).catch((err) =>
-                    console.log("Failed to open URL:", err),
-                );
-            }}
-            style={styles.linkRow}
-        >
-            <Text style={styles.linkLabel}>{label}</Text>
-
-            <View style={styles.linkRight}>
-                <Text style={styles.link} numberOfLines={1}>
-                    {url}
-                </Text>
-
-                <Feather name="external-link" size={16} color="#888" />
-            </View>
-        </Pressable>
-    );
+	return (
+		<Pressable
+			onPress={() => {
+				Linking.openURL(url).catch((err) =>
+					console.log("Failed to open URL:", err),
+				);
+			}}
+			style={styles.linkRow}
+		>
+			<Text style={styles.linkLabel}>{label}</Text>
+
+			<View style={styles.linkRight}>
+				<Text style={styles.link} numberOfLines={1} ellipsizeMode="tail">
+					{url.replace(/^https?:\/\//, "")}
+				</Text>
+
+				<Feather name="external-link" size={16} color="#888" />
+			</View>
+		</Pressable>
+	);
 };
 
 const styles = StyleSheet.create({
-    linkRow: {
-        marginBottom: 12,
-        paddingVertical: 8,
-    },
-
-    linkRight: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-    },
-
-    
-    linkLabel: {
-        fontFamily: fonts.title,
-        fontSize: 14,
-        color: colors.darkNavy,
-        fontWeight: "bold",
-        marginTop: 6,
-    },
-
-    link: {
-        flex: 1,
-        marginRight: 8,
-        color: "#666",
-    }
-});
+	linkRow: {
+		marginBottom: 12,
+		paddingVertical: 8,
+	},
+
+	linkRight: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		width: "70%",
+	},
+
+	linkLabel: {
+		fontFamily: fonts.title,
+		fontSize: 14,
+		color: colors.darkNavy,
+		fontWeight: "bold",
+		marginTop: 6,
+	},
+
+	link: {
+		flex: 1,
+		marginRight: 8,
+		color: "#666",
+	},
+});

shatter-mobile/src/styling/EventPage.styles.ts

@@ -19,8 +19,10 @@ export const EventPageStyling = StyleSheet.create({
 		alignItems: "center",
 	},
 	header: {
-		height: vh(7),
+		height: vh(20),
 		justifyContent: "center",
+		alignItems: "center",
+		marginTop: 5,
 	},
 	pageTitle: {
 		fontSize: vw(8),
@@ -38,7 +40,7 @@ export const EventPageStyling = StyleSheet.create({
 	},
 	container: {
 		position: "absolute",
-		top: vh(15),
+		top: vh(22),
 		width: "100%",
 		bottom: 0,
 		backgroundColor: colors.lightGrey,

shatter-mobile/src/styling/GamePage.styles.ts

@@ -15,8 +15,6 @@ export const GamePageStyling = StyleSheet.create({
 	},
 	safe: {
 		flex: 1,
-		flexDirection: "column",
-		alignItems: "center",
 	},
 	page: {
 		flex: 1,

shatter-mobile/src/styling/JoinEventPage.styles.ts

@@ -19,7 +19,7 @@ export const JoinEventStyling = StyleSheet.create({
 		alignItems: "center",
 	},
 	header: {
-		height: vh(10),
+		height: vh(20),
 		justifyContent: "center",
 		alignItems: "center",
 		marginTop: 5,
@@ -42,9 +42,9 @@ export const JoinEventStyling = StyleSheet.create({
 	},
 	container: {
 		position: "absolute",
-		top: vh(20),
+		top: vh(17),
 		width: "100%",
-		bottom: 0,
+		bottom: -50,
 		backgroundColor: colors.lightGrey,
 		borderTopLeftRadius: 12,
 		borderTopRightRadius: 12,

shatter-mobile/src/styling/PageStyles.styles.ts

@@ -4,14 +4,15 @@ export const barStyles = {
 	//bottom tab bar
 	tabBarStyle: {
 		backgroundColor: colors.darkNavy,
-		height: 80,
+		height: 50,
 		borderTopWidth: 0,
 		overflow: "hidden",
 		shadowColor: "#000",
 		shadowOffset: { width: 0, height: -4 },
 		shadowOpacity: 0.2,
 		shadowRadius: 4,
 	},
+	tabBarHideOnKeyboard: true,
 	tabBarActiveTintColor: colors.white,
 	tabBarInactiveTintColor: colors.lightNavy,
 };

shatter-mobile/src/styling/ProfilePage.styles.ts

@@ -19,9 +19,10 @@ export const ProfilePageStyling = StyleSheet.create({
 		alignItems: "center",
 	},
 	header: {
-		height: vh(7),
+		height: vh(20),
 		justifyContent: "center",
 		alignItems: "center",
+		marginTop: 5,
 	},
 	pageTitle: {
 		fontSize: vw(8),
@@ -50,14 +51,13 @@ export const ProfilePageStyling = StyleSheet.create({
 	},
 	container: {
 		position: "absolute",
-		top: vh(15),
+		top: vh(22),
 		width: "100%",
 		bottom: 0,
 		backgroundColor: colors.lightGrey,
-		borderTopLeftRadius: 12,
-		borderTopRightRadius: 12,
-		padding: 20,
-		alignItems: "center",
+		borderTopLeftRadius: 8,
+		borderTopRightRadius: 8,
+		padding: 5,
 	},
 	avatar: {
 		width: vw(25),