diff --git a/shatter-mobile/app/(tabs)/JoinEventPage.tsx b/shatter-mobile/app/(tabs)/JoinEventPage.tsx index 11eb4e4..2cb269d 100644 --- a/shatter-mobile/app/(tabs)/JoinEventPage.tsx +++ b/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" > + Start Shattering @@ -135,6 +142,7 @@ export default function JoinEventPage() { )} + diff --git a/shatter-mobile/app/_layout.tsx b/shatter-mobile/app/_layout.tsx index d9eb1eb..75e09ac 100644 --- a/shatter-mobile/app/_layout.tsx +++ b/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 ( - + + {content} diff --git a/shatter-mobile/app/auth/callback.tsx b/shatter-mobile/app/auth/callback.tsx index 0844afd..bcfd73f 100644 --- a/shatter-mobile/app/auth/callback.tsx +++ b/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."); } }; diff --git a/shatter-mobile/src/components/general/LinkRow.tsx b/shatter-mobile/src/components/general/LinkRow.tsx index bdb4a2b..b162abf 100644 --- a/shatter-mobile/src/components/general/LinkRow.tsx +++ b/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 ( - { - Linking.openURL(url).catch((err) => - console.log("Failed to open URL:", err), - ); - }} - style={styles.linkRow} - > - {label} - - - - {url} - - - - - - ); + return ( + { + Linking.openURL(url).catch((err) => + console.log("Failed to open URL:", err), + ); + }} + style={styles.linkRow} + > + {label} + + + + {url.replace(/^https?:\/\//, "")} + + + + + + ); }; 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", - } -}); \ No newline at end of file + 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", + }, +}); diff --git a/shatter-mobile/src/styling/EventPage.styles.ts b/shatter-mobile/src/styling/EventPage.styles.ts index c5e6a10..7a86a28 100644 --- a/shatter-mobile/src/styling/EventPage.styles.ts +++ b/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, diff --git a/shatter-mobile/src/styling/GamePage.styles.ts b/shatter-mobile/src/styling/GamePage.styles.ts index 52c93de..f4d2d3b 100644 --- a/shatter-mobile/src/styling/GamePage.styles.ts +++ b/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, diff --git a/shatter-mobile/src/styling/JoinEventPage.styles.ts b/shatter-mobile/src/styling/JoinEventPage.styles.ts index dec183f..9764695 100644 --- a/shatter-mobile/src/styling/JoinEventPage.styles.ts +++ b/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, diff --git a/shatter-mobile/src/styling/PageStyles.styles.ts b/shatter-mobile/src/styling/PageStyles.styles.ts index 4229194..d6da674 100644 --- a/shatter-mobile/src/styling/PageStyles.styles.ts +++ b/shatter-mobile/src/styling/PageStyles.styles.ts @@ -4,7 +4,7 @@ export const barStyles = { //bottom tab bar tabBarStyle: { backgroundColor: colors.darkNavy, - height: 80, + height: 50, borderTopWidth: 0, overflow: "hidden", shadowColor: "#000", @@ -12,6 +12,7 @@ export const barStyles = { shadowOpacity: 0.2, shadowRadius: 4, }, + tabBarHideOnKeyboard: true, tabBarActiveTintColor: colors.white, tabBarInactiveTintColor: colors.lightNavy, }; diff --git a/shatter-mobile/src/styling/ProfilePage.styles.ts b/shatter-mobile/src/styling/ProfilePage.styles.ts index c94877d..e205326 100644 --- a/shatter-mobile/src/styling/ProfilePage.styles.ts +++ b/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),