Skip to content

(Mobile) Styling Changes, LinkedIn Auth #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
keeryn04 merged 11 commits into from
Mar 25, 2026
Merged

(Mobile) Styling Changes, LinkedIn Auth #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1eb05d9
(Update) Changed Bingo Game for Short Questions
keeryn04 Mar 20, 2026
756907c
(Update) Fixed EventLobby Race Condition with EventId
keeryn04 Mar 20, 2026
268d40b
(Fix) NameBingo Styling Fixes
keeryn04 Mar 21, 2026
43dc845
(Update) UpdateProfile Styling
keeryn04 Mar 21, 2026
22b5c3b
(Update) Better Styling
keeryn04 Mar 21, 2026
03fcf14
LinkedIn workflow
tahaminachy43 Mar 22, 2026
d1eb384
Merge branch 'Mobile-LinkedInAuth' into mobile
tahaminachy43 Mar 22, 2026
293b137
(Update) Added Profile Pictures, Fixed In-Progress Game Loading
keeryn04 Mar 22, 2026
5acd1df
Merge branch 'mobile' of https://github.com/techstartucalgary/Network…
keeryn04 Mar 22, 2026
d546036
(Update) JoinEvent Styling
keeryn04 Mar 22, 2026
6e66136
(Fix) Hide QR Scanner Outline, Styling Changes
keeryn04 Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 41 additions & 38 deletions shatter-mobile/app/(tabs)/EventsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import AnimatedTab from "../../src/components/AnimatedTab";
import EventCard from "../../src/components/events/EventCard";
import EventIB from "../../src/interfaces/Event";
import { getUserEvents } from "../../src/services/event.service";
Expand Down Expand Up @@ -65,43 +66,45 @@ export default function EventsPage() {
};

return (
<ImageBackground
source={require("../../src/images/getStartedImage.png")}
style={styles.background}
resizeMode="cover"
>
<SafeAreaView style={styles.safe}>
<View style={styles.header}>
<Text style={styles.pageTitle}>Upcoming Events</Text>
<Text style={styles.subtitle}>
Check out your joined events below.
</Text>
</View>
<View style={styles.container}>
{loading ? (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#1e3a8a" />
<Text style={styles.loading}>Loading events...</Text>
</View>
) : events.length === 0 ? (
<View style={styles.loadingContainer}>
<Text style={styles.loading}>No events joined</Text>
</View>
) : (
<FlatList
data={events}
keyExtractor={(item) => item._id}
renderItem={({ item }) => (
<EventCard
event={item}
expanded={expandedEventId === item._id}
onPress={() => handlePress(item)}
/>
)}
/>
)}
</View>
</SafeAreaView>
</ImageBackground>
<AnimatedTab>
<ImageBackground
source={require("../../src/images/getStartedImage.png")}
style={styles.background}
resizeMode="cover"
>
<SafeAreaView style={styles.safe}>
<View style={styles.header}>
<Text style={styles.pageTitle}>Upcoming Events</Text>
<Text style={styles.subtitle}>
Check out your joined events below.
</Text>
</View>
<View style={styles.container}>
{loading ? (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#1e3a8a" />
<Text style={styles.loading}>Loading events...</Text>
</View>
) : events.length === 0 ? (
<View style={styles.loadingContainer}>
<Text style={styles.loading}>No events joined</Text>
</View>
) : (
<FlatList
data={events}
keyExtractor={(item) => item._id}
renderItem={({ item }) => (
<EventCard
event={item}
expanded={expandedEventId === item._id}
onPress={() => handlePress(item)}
/>
)}
/>
)}
</View>
</SafeAreaView>
</ImageBackground>
</AnimatedTab>
);
}
151 changes: 93 additions & 58 deletions shatter-mobile/app/(tabs)/JoinEventPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import { useJoinEvent } from "@/src/components/new-events/JoinEvent";
import { colors } from "@/src/styling/constants";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useState } from "react";
import {
ActivityIndicator,
Button,
ImageBackground,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import AnimatedTab from "../../src/components/AnimatedTab";
import { useAuth } from "../../src/components/context/AuthContext";
import QRScannerBox from "../../src/components/new-events/QRScannerBox";
import { JoinEventStyling as styles } from "../../src/styling/JoinEventPage.styles";
Expand Down Expand Up @@ -40,68 +43,100 @@ export default function JoinEventPage() {
};

return (
<ImageBackground
source={require("../../src/images/getStartedImage.png")}
style={styles.background}
resizeMode="cover"
>
<SafeAreaView style={styles.safe}>
<View style={styles.header}>
<Text style={styles.pageTitle}>Start Shattering</Text>
<Text style={styles.subtitle}>
Hey {user?.name || "there"}, Ready to Start Shattering Some
Boundaries?
</Text>
</View>
<AnimatedTab>
<ImageBackground
source={require("../../src/images/getStartedImage.png")}
style={styles.background}
resizeMode="cover"
>
<SafeAreaView style={styles.safe}>
<View style={styles.header}>
<Text style={styles.pageTitle}>Start Shattering</Text>
<Text style={styles.subtitle}>
Hey {user?.name || "there"}, Ready to Start Shattering Some
Boundaries?
</Text>
</View>

<View style={styles.container}>
{loading && (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#1e3a8a" />
<Text style={styles.loading}>Joining event...</Text>
</View>
)}
<View style={styles.container}>
{loading && (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#1e3a8a" />
<Text style={styles.loading}>Joining event...</Text>
</View>
)}

{!loading && (
<>
{!showScanner && (
<Button
title="Scan QR Code"
onPress={() => setShowScanner(true)}
/>
)}
{!loading && (
<>
{/* QR Section */}
<View style={styles.section}>
<Text style={styles.label}>Scan QR Code</Text>

{showScanner && (
<QRScannerBox onClose={() => setShowScanner(false)} />
)}
{!showScanner ? (
<TouchableOpacity
style={styles.buttonSecondary}
onPress={() => setShowScanner(true)}
>
<View style={styles.scannerButton}>
<Ionicons name="scan-outline" color={colors.white} />
<Text style={styles.buttonText}>Open Scanner</Text>
</View>
</TouchableOpacity>
) : (
<>
<QRScannerBox onClose={() => setShowScanner(false)} />
<TouchableOpacity
style={styles.buttonSecondary}
onPress={() => setShowScanner(false)}
>
<View style={styles.scannerButton}>
<Text style={styles.buttonText}>Close Scanner</Text>
</View>
</TouchableOpacity>
</>
)}
</View>

<View style={styles.codeContainer}>
<TextInput
style={styles.input}
placeholder="Enter event code"
value={eventCode}
onChangeText={(text) => {
setEventCode(text);
setErrorMessage("");
}}
autoCapitalize="characters"
autoCorrect={false}
/>
{/* Divider */}
<View style={styles.divider}>
<Text style={styles.dividerText}>OR</Text>
</View>

<Button
title="Join Event"
onPress={handleJoinEvent}
disabled={!eventCode.trim()}
/>
{/* Code Entry */}
<View>
<Text style={styles.label}>Enter Event Code</Text>

{errorMessage && (
<Text style={styles.errorText}>{errorMessage}</Text>
)}
</View>
</>
)}
</View>
</SafeAreaView>
</ImageBackground>
<TextInput
style={styles.input}
placeholder="ABC123"
value={eventCode}
onChangeText={(text) => {
setEventCode(text);
setErrorMessage("");
}}
autoCapitalize="characters"
/>

<TouchableOpacity
style={styles.button}
onPress={handleJoinEvent}
disabled={!eventCode.trim()}
>
<View style={styles.scannerButton}>
<Ionicons name="search-outline" color={colors.white} />
<Text style={styles.buttonText}>Join Event</Text>
</View>
</TouchableOpacity>

{errorMessage && (
<Text style={styles.errorText}>{errorMessage}</Text>
)}
</View>
</>
)}
</View>
</SafeAreaView>
</ImageBackground>
</AnimatedTab>
);
}
Loading
Loading