diff --git a/frontend/iQMA-Skills-Builder/app/(tabs)/_layout.tsx b/frontend/iQMA-Skills-Builder/app/(tabs)/_layout.tsx index 30042464..bfe5f015 100644 --- a/frontend/iQMA-Skills-Builder/app/(tabs)/_layout.tsx +++ b/frontend/iQMA-Skills-Builder/app/(tabs)/_layout.tsx @@ -5,6 +5,7 @@ import {useEffect, useState} from 'react'; import {AuthProvider} from '@/context/AuthContext'; import ChatbotDrawer from '@/components/ChatbotDrawer'; +import {Colors} from '@/constants/Colors'; import HomeScreen from '../screens/Home'; import {Ionicons} from '@expo/vector-icons'; import {MaterialIcons} from '@expo/vector-icons'; @@ -22,11 +23,11 @@ export default function AppTabs() { ({ headerTitleAlign: 'center', - headerStyle: {backgroundColor: '#B199FF'}, - tabBarActiveTintColor: '#FFFFFF', + headerStyle: {backgroundColor: Colors.default.purple100}, + tabBarActiveTintColor: Colors.light.background, tabBarInactiveTintColor: '#BBBBBB', tabBarStyle: { - backgroundColor: '#7654F2', + backgroundColor: Colors.default.purple500, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 80, @@ -69,7 +70,7 @@ export default function AppTabs() { tabBarIcon: ({color, size}) => ( ), - headerTintColor: '#fff' + headerTintColor: '#fff', }} /> ( ), - headerTintColor: '#fff' + headerTintColor: '#fff', }} /> diff --git a/frontend/iQMA-Skills-Builder/app/Assessment.tsx b/frontend/iQMA-Skills-Builder/app/Assessment.tsx index ec28c2a9..ef0e6da1 100644 --- a/frontend/iQMA-Skills-Builder/app/Assessment.tsx +++ b/frontend/iQMA-Skills-Builder/app/Assessment.tsx @@ -1,21 +1,24 @@ -import AsyncStorage from '@react-native-async-storage/async-storage'; -import {ScrollView, StyleSheet, Text, Image, View} from 'react-native'; -import SectionCard from '@/components/SectionCard'; +import * as quizEndpoints from '@/helpers/quizEndpoints'; +import * as resultEndpoints from '@/helpers/resultEndpoints'; +import * as sectionEndpoints from '@/helpers/sectionEndpoints'; +import * as unitEndpoints from '@/helpers/unitEndpoints'; + +import {Image, ScrollView, StyleSheet, Text, View} from 'react-native'; import React, {useContext, useEffect, useLayoutEffect, useState} from 'react'; -import {useNavigation} from '@react-navigation/native'; -import ProgressBar from '@/components/ProgressBar'; -import {QuizCard} from '@/components/QuizCard'; import {router, useLocalSearchParams} from 'expo-router'; + +import AsyncStorage from '@react-native-async-storage/async-storage'; +import {AuthContext} from '@/context/AuthContext'; +import {Colors} from '@/constants/Colors'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; +import {OverviewCard} from '@/components/OverviewCard'; +import ProgressBar from '@/components/ProgressBar'; import {Question} from '@/constants/Quiz'; -import * as unitEndpoints from '@/helpers/unitEndpoints'; -import * as sectionEndpoints from '@/helpers/sectionEndpoints'; -import * as quizEndpoints from '@/helpers/quizEndpoints'; -import {formatUnit} from '@/helpers/formatUnitID'; +import {QuizCard} from '@/components/QuizCard'; +import SectionCard from '@/components/SectionCard'; import {formatSection} from '@/helpers/formatSectionID'; -import {OverviewCard} from '@/components/OverviewCard'; -import { LoadingIndicator } from '@/components/LoadingIndicator'; -import * as resultEndpoints from '@/helpers/resultEndpoints'; -import {AuthContext} from '@/context/AuthContext'; +import {formatUnit} from '@/helpers/formatUnitID'; +import {useNavigation} from '@react-navigation/native'; export default function Assessment() { const navigation = useNavigation(); @@ -28,10 +31,18 @@ export default function Assessment() { const [sectionName, setSectionName] = useState(''); const [unitScenario, setUnitScenario] = useState(''); const [loading, setIsLoading] = useState(true); - const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams(); + const { + sectionID, + unitID, + currentUnit, + totalUnits, + isFinal, + currentProgress, + totalProgress, + } = useLocalSearchParams(); const [finalScenario, setFinalScenario] = useState(''); const [checkFinal, setCheckFinal] = useState(false); - + // Hardcoded for now until routing confirmed // const isFinal: boolean = false; // const sectionID = 'SEC0001'; @@ -91,8 +102,10 @@ export default function Assessment() { }, [sectionID, unitID, checkFinal]); useLayoutEffect(() => { - - let progress = checkFinal ? 1 : parseInt(currentProgress as string) / parseInt(totalProgress as string); + let progress = checkFinal + ? 1 + : parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -107,7 +120,6 @@ export default function Assessment() { await AsyncStorage.setItem('currentQnsIdx', newIdx.toString()); setCurrentQnsIdx(newIdx); } else { - if (checkFinal) { // final assessment don't have self-reflection try { @@ -140,7 +152,7 @@ export default function Assessment() { isFinal, currentProgress, totalProgress, - } + }, }); } } @@ -167,7 +179,7 @@ export default function Assessment() { @@ -210,7 +222,7 @@ export default function Assessment() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, diff --git a/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx b/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx index 4b34399e..3588586f 100644 --- a/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx +++ b/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx @@ -6,7 +6,9 @@ import React, {useEffect, useLayoutEffect, useRef, useState} from 'react'; import {router, useLocalSearchParams, useRouter} from 'expo-router'; import AsyncStorage from '@react-native-async-storage/async-storage'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; import {OverviewCard} from '@/components/OverviewCard'; import ProgressBar from '@/components/ProgressBar'; import SectionCard from '@/components/SectionCard'; @@ -14,7 +16,6 @@ import axios from 'axios'; import {formatSection} from '@/helpers/formatSectionID'; import {formatUnit} from '@/helpers/formatUnitID'; import {useNavigation} from '@react-navigation/native'; -import {LoadingIndicator} from '@/components/LoadingIndicator'; export default function AssessmentIntroduction() { const navigation = useNavigation(); @@ -24,7 +25,15 @@ export default function AssessmentIntroduction() { // const unitID = 'UNIT0001'; // const currentUnit = "1"; // const totalUnits = "1" - const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams(); + const { + sectionID, + unitID, + currentUnit, + totalUnits, + isFinal, + currentProgress, + totalProgress, + } = useLocalSearchParams(); const [sectionNumber, setSectionNumber] = useState(''); const [unitNumber, setUnitNumber] = useState(''); const [seconds, setSeconds] = useState(0); @@ -60,8 +69,9 @@ export default function AssessmentIntroduction() { }, []); useLayoutEffect(() => { - - const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string); + const progress = + parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -121,8 +131,10 @@ export default function AssessmentIntroduction() { currentUnit, totalUnits, isFinal, - currentProgress: (parseInt(currentProgress as string) + 1).toString(), - totalProgress + currentProgress: ( + parseInt(currentProgress as string) + 1 + ).toString(), + totalProgress, }, }); stopTimer(); @@ -165,7 +177,7 @@ export default function AssessmentIntroduction() { style={{ fontSize: 14, fontWeight: 'bold', - color: '#4143A3', + color: Colors.header.color, marginBottom: 20, marginHorizontal: 10, }} @@ -227,7 +239,7 @@ export default function AssessmentIntroduction() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, diff --git a/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx b/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx index 8c00e407..106485fe 100644 --- a/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx +++ b/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx @@ -1,13 +1,16 @@ -import {ScrollView, StyleSheet, Text, View, SafeAreaView} from 'react-native'; -import React, {useState, useLayoutEffect, useEffect} from 'react'; -import {CustomButton} from '@/components/CustomButton'; +import * as lessonEndpoints from '@/helpers/lessonEndpoints'; + +import React, {useEffect, useLayoutEffect, useState} from 'react'; +import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native'; import {router, useLocalSearchParams} from 'expo-router'; -import {useNavigation} from '@react-navigation/native'; -import ProgressBar from '@/components/ProgressBar'; + +import {Colors} from '@/constants/Colors'; +import {CustomButton} from '@/components/CustomButton'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; import {OverviewCard} from '@/components/OverviewCard'; -import * as lessonEndpoints from '@/helpers/lessonEndpoints'; +import ProgressBar from '@/components/ProgressBar'; import {formatUnit} from '@/helpers/formatUnitID'; -import {LoadingIndicator} from '@/components/LoadingIndicator'; +import {useNavigation} from '@react-navigation/native'; const formatCheatSheet = (cheatsheet: any) => { if (Array.isArray(cheatsheet)) { @@ -45,14 +48,23 @@ const formatCheatSheet = (cheatsheet: any) => { // where things show up export default function CheatSheet() { const navigation = useNavigation(); - const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams(); + const { + sectionID, + unitID, + currentUnit, + totalUnits, + isFinal, + currentProgress, + totalProgress, + } = useLocalSearchParams(); const [lessons, setLessons] = useState([]); const [unitNumber, setUnitNumber] = useState(''); const [isLoading, setIsLoading] = useState(true); useLayoutEffect(() => { - - const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string); + const progress = + parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -102,8 +114,10 @@ export default function CheatSheet() { currentUnit, totalUnits, isFinal, - currentProgress: (parseInt(currentProgress as string) + 1).toString(), - totalProgress + currentProgress: ( + parseInt(currentProgress as string) + 1 + ).toString(), + totalProgress, }, }); }; @@ -152,13 +166,13 @@ export default function CheatSheet() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, }, title: { fontSize: 14, fontWeight: 'bold', - color: '#4143A3', + color: Colors.header.color, marginBottom: 20, }, buttonContainer: { @@ -172,7 +186,7 @@ const styles = StyleSheet.create({ borderWidth: 2, padding: 10, marginBottom: 20, - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, // shadow properties shadowColor: '#000', shadowOffset: {width: 0, height: 4}, diff --git a/frontend/iQMA-Skills-Builder/app/CreateProfile.tsx b/frontend/iQMA-Skills-Builder/app/CreateProfile.tsx index 126eb968..321d4ac5 100644 --- a/frontend/iQMA-Skills-Builder/app/CreateProfile.tsx +++ b/frontend/iQMA-Skills-Builder/app/CreateProfile.tsx @@ -1,22 +1,24 @@ import { - Text, - View, - Image, - TextInput, + ActivityIndicator, Button, - StyleSheet, + Image, Pressable, - ActivityIndicator, + StyleSheet, + Text, + TextInput, + View, } from 'react-native'; + +import {AuthContext} from '@/context/AuthContext'; +import {Colors} from '@/constants/Colors'; +import {CustomButton} from '@/components/CustomButton'; import {LoginButton} from '@/components/LoginButton'; import {LogoVisual} from '@/components/LogoVisual'; -import {Profile} from '@/components/Profile'; -import {CustomButton} from '@/components/CustomButton'; -import {useState} from 'react'; import {Picker} from '@react-native-picker/picker'; -import {AuthContext} from '@/context/AuthContext'; -import {useContext} from 'react'; +import {Profile} from '@/components/Profile'; import {router} from 'expo-router'; +import {useContext} from 'react'; +import {useState} from 'react'; export default function CreateProfile() { const {currentUser, isLoading} = useContext(AuthContext); @@ -109,7 +111,7 @@ export default function CreateProfile() { flex: 1, // justifyContent: "center", alignItems: 'center', - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, // backgroundColor: "#ff4500", padding: 20, gap: 20, @@ -123,8 +125,10 @@ export default function CreateProfile() { borderWidth: 1, // borderColor: '#E5E5E5', borderColor: - !isContinue && !firstName ? '#ff4c4c' : '#E5E5E5', - backgroundColor: '#F7F7F7', + !isContinue && !firstName + ? Colors.border.wrongColor + : '#E5E5E5', + backgroundColor: Colors.profile.inputColor, borderRadius: 10, padding: 10, width: '100%', @@ -151,8 +155,10 @@ export default function CreateProfile() { borderWidth: 1, // borderColor: '#E5E5E5', borderColor: - !isContinue && !lastName ? '#ff4c4c' : '#E5E5E5', - backgroundColor: '#F7F7F7', + !isContinue && !lastName + ? Colors.border.wrongColor + : '#E5E5E5', + backgroundColor: Colors.profile.inputColor, borderRadius: 10, padding: 10, width: '100%', @@ -178,8 +184,11 @@ export default function CreateProfile() { style={{ borderWidth: 1, // borderColor: '#E5E5E5', - borderColor: !isContinue && !email ? '#ff4c4c' : '#E5E5E5', - backgroundColor: '#F7F7F7', + borderColor: + !isContinue && !email + ? Colors.border.wrongColor + : '#E5E5E5', + backgroundColor: Colors.profile.inputColor, borderRadius: 10, padding: 10, width: '100%', @@ -220,8 +229,10 @@ export default function CreateProfile() { borderRadius: 10, // borderColor: '#E5E5E5', borderColor: - !isContinue && !selectedAge ? '#ff4c4c' : '#E5E5E5', - backgroundColor: '#F7F7F7', + !isContinue && !selectedAge + ? Colors.border.wrongColor + : '#E5E5E5', + backgroundColor: Colors.profile.inputColor, }} > (''); + const [lastName, setLastName] = useState(''); + const [loading, setLoading] = useState(true); + + const fetchUserData = async () => { + try { + const url = `${process.env.EXPO_PUBLIC_LOCALHOST_URL}/accounts/getaccountbyid/${currentUser.sub}`; + const response = await axios.get(url); + const userData = response.data; + setFirstName(userData.firstName); + setLastName(userData.lastName); + } catch (error) { + console.error('Failed to fetch user data:', error); + } finally { + setLoading(false); // Ensure loading state is reset + } + }; + + const handleSave = async () => { + const url = `${process.env.EXPO_PUBLIC_LOCALHOST_URL}/accounts/updateaccount`; + try { + await axios.patch( + url, + { + "userID": `${currentUser.sub}`, + "firstName": `${firstName}`, + "lastName": `${lastName}` + }, + ); + Alert.alert('Success', 'Profile updated successfully.'); + } catch (error) { + console.error('Failed to update profile:', error); + Alert.alert('Error', 'Failed to update profile. Please try again.'); + } + }; + + useEffect(() => { + if (currentUser) { + fetchUserData(); + } + }, [currentUser]); + + if (isLoading || loading) { + return ( + + + + ); + } + + return ( + + + Edit Profile + + + FIRST NAME + setFirstName(text)} + /> + LAST NAME + setLastName(text)} + /> + + SAVE + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#ffffff', + }, + header: { + backgroundColor: '#c1a5ff', + paddingVertical: 15, + justifyContent: 'center', + alignItems: 'center', + }, + headerTitle: { + color: '#ffffff', + fontSize: 18, + fontWeight: 'bold', + }, + form: { + padding: 20, + }, + label: { + color: '#6a51b2', + fontSize: 12, + fontWeight: 'bold', + marginBottom: 5, + }, + input: { + height: 40, + borderWidth: 1, + borderColor: '#d4d4d4', + borderRadius: 5, + paddingHorizontal: 10, + marginBottom: 20, + }, + button: { + backgroundColor: '#ffffff', + borderRadius: 10, + borderColor: '#6a51b2', + borderWidth: 1, + paddingVertical: 10, + justifyContent: 'center', + alignItems: 'center', + }, + buttonText: { + color: '#6a51b2', + fontSize: 16, + fontWeight: 'bold', + }, +}); diff --git a/frontend/iQMA-Skills-Builder/app/IntroductionMascot.tsx b/frontend/iQMA-Skills-Builder/app/IntroductionMascot.tsx index 5b6cde7e..e4ffabc4 100644 --- a/frontend/iQMA-Skills-Builder/app/IntroductionMascot.tsx +++ b/frontend/iQMA-Skills-Builder/app/IntroductionMascot.tsx @@ -1,6 +1,7 @@ -import {StyleSheet, Image, View} from 'react-native'; +import {Image, StyleSheet, View} from 'react-native'; import {ChatBubble} from '@/components/ChatBubble'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; import {router} from 'expo-router'; @@ -31,7 +32,7 @@ export default function LearnerAssessment() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, diff --git a/frontend/iQMA-Skills-Builder/app/IntroductionSegment.tsx b/frontend/iQMA-Skills-Builder/app/IntroductionSegment.tsx index f7ad88a4..9713fa83 100644 --- a/frontend/iQMA-Skills-Builder/app/IntroductionSegment.tsx +++ b/frontend/iQMA-Skills-Builder/app/IntroductionSegment.tsx @@ -1,6 +1,7 @@ -import {StyleSheet, Image, Text, View} from 'react-native'; +import {Image, StyleSheet, Text, View} from 'react-native'; import {ChatBubble} from '@/components/ChatBubble'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; import {router} from 'expo-router'; @@ -33,7 +34,7 @@ export default function IntroductionSegment() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, diff --git a/frontend/iQMA-Skills-Builder/app/KeyTakeaway.tsx b/frontend/iQMA-Skills-Builder/app/KeyTakeaway.tsx index 25369877..3e880ccd 100644 --- a/frontend/iQMA-Skills-Builder/app/KeyTakeaway.tsx +++ b/frontend/iQMA-Skills-Builder/app/KeyTakeaway.tsx @@ -1,26 +1,28 @@ import * as lessonEndpoints from '@/helpers/lessonEndpoints'; import * as unitEndpoints from '@/helpers/unitEndpoints'; -import {ScrollView, Image, StyleSheet, Text, View} from 'react-native'; +import {Image, ScrollView, StyleSheet, Text, View} from 'react-native'; import React, {useEffect, useLayoutEffect, useState} from 'react'; import {router, useLocalSearchParams, useRouter} from 'expo-router'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; import {OverviewCard} from '@/components/OverviewCard'; import ProgressBar from '@/components/ProgressBar'; import SectionCard from '@/components/SectionCard'; import {formatSection} from '@/helpers/formatSectionID'; import {formatUnit} from '@/helpers/formatUnitID'; import {useNavigation} from '@react-navigation/native'; -import {LoadingIndicator} from '@/components/LoadingIndicator'; export default function KeyTakeaway() { const navigation = useNavigation(); const [isLoading, setIsLoading] = useState(true); useLayoutEffect(() => { - - const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string); + const progress = + parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -30,7 +32,6 @@ export default function KeyTakeaway() { }, [navigation]); const handlePress = () => { - let nextLessonIdx = parseInt(currentLessonIdx as string) + 1; let pathName = 'Lesson'; @@ -55,7 +56,9 @@ export default function KeyTakeaway() { currentUnit, totalUnits, isFinal: 'false', - currentProgress: (parseInt(currentProgress as string) + 1).toString(), + currentProgress: ( + parseInt(currentProgress as string) + 1 + ).toString(), totalProgress, }, }); @@ -68,7 +71,17 @@ export default function KeyTakeaway() { // const totalLesson = '3'; // const currentUnit = '3'; // const totalUnits = '3'; - const {sectionID, unitID, lessonID, currentLessonIdx, totalLesson, currentUnit, totalUnits, currentProgress, totalProgress} = useLocalSearchParams(); + const { + sectionID, + unitID, + lessonID, + currentLessonIdx, + totalLesson, + currentUnit, + totalUnits, + currentProgress, + totalProgress, + } = useLocalSearchParams(); const [sectionNumber, setSectionNumber] = useState(''); const [unitNumber, setUnitNumber] = useState(''); const [unitName, setUnitName] = useState(''); @@ -77,7 +90,13 @@ export default function KeyTakeaway() { const [nextLessonID, setnextLessonID] = useState(''); useEffect(() => { - if (sectionID && unitID && lessonID && currentLessonIdx && totalLesson) { + if ( + sectionID && + unitID && + lessonID && + currentLessonIdx && + totalLesson + ) { (async () => { try { const unitDetails = await unitEndpoints.getUnitDetails( @@ -98,13 +117,14 @@ export default function KeyTakeaway() { ); let nxtLessonIdx = parseInt(currentLessonIdx as string) + 1; - + if (nxtLessonIdx === parseInt(totalLesson as string)) { nxtLessonIdx = 0; } - if (lessonID.includes(".")) { - lessonDetails.lessonName = lessonDetails.lessonName.replace(/\.\d+/, ''); + if (lessonID.includes('.')) { + lessonDetails.lessonName = + lessonDetails.lessonName.replace(/\.\d+/, ''); } setnextLessonID(getAllLessons[nxtLessonIdx].lessonID); @@ -183,30 +203,30 @@ export default function KeyTakeaway() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, screenTitle: { - fontSize: 14, + fontSize: Colors.lessonName.fontSize, fontWeight: 'bold', - color: '#4143A3', + color: Colors.header.color, marginBottom: 20, marginHorizontal: 10, }, takeawayHeader: { marginBottom: 10, marginLeft: 15, - color: '#4143A3', + color: Colors.header.color, fontWeight: 'bold', - fontSize: 14, + fontSize: Colors.header.fontSize, }, takeawayText: { marginLeft: 15, - fontSize: 12, - lineHeight: 25, - color: '#4143A3', - marginBottom: 15, + fontSize: Colors.text.fontSize, + lineHeight: 22, + color: Colors.header.color, + marginBottom: 25, }, buttonContainer: { alignItems: 'center', diff --git a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentCognitive.tsx b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentCognitive.tsx index ef1f9f68..0b2a3bb5 100644 --- a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentCognitive.tsx +++ b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentCognitive.tsx @@ -3,6 +3,7 @@ import React, {useState} from 'react'; import AsyncStorage from '@react-native-async-storage/async-storage'; import {ChatBubble} from '@/components/ChatBubble'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; import {Picker} from '@react-native-picker/picker'; import {router} from 'expo-router'; @@ -329,7 +330,7 @@ export default function LearnerAssessmentCognitive() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, @@ -350,22 +351,22 @@ const styles = StyleSheet.create({ marginTop: 12, }, correctBorder: { - borderColor: '#9CA3AF', + borderColor: Colors.border.correctColor, }, wrongBorder: { - borderColor: '#ff4c4c', + borderColor: Colors.border.wrongColor, }, text: { textTransform: 'uppercase', fontWeight: 'bold', - color: '#7654F2', - lineHeight: 20, + color: Colors.default.purple500, + lineHeight: Colors.learnerAssessment.lineHeight, }, defaultOptionText: { - color: '#5C5776', - fontSize: 14, + color: Colors.default.optionText, + fontSize: Colors.default.optionFontSize, }, errorText: { - color: '#ff4c4c', + color: Colors.border.wrongColor, }, }); diff --git a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentComplete.tsx b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentComplete.tsx index a35929fb..319cd9f1 100644 --- a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentComplete.tsx +++ b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentComplete.tsx @@ -1,7 +1,8 @@ -import {StyleSheet, Image, View} from 'react-native'; +import {Image, StyleSheet, View} from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; import {ChatBubble} from '@/components/ChatBubble'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; import axios from 'axios'; import {router} from 'expo-router'; @@ -135,7 +136,7 @@ export default function LearnerAssessmentComplete() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, diff --git a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentDemographics.tsx b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentDemographics.tsx index cf4e0ebf..f281dea4 100644 --- a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentDemographics.tsx +++ b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentDemographics.tsx @@ -10,6 +10,7 @@ import React, {useState} from 'react'; import AsyncStorage from '@react-native-async-storage/async-storage'; import {ChatBubble} from '@/components/ChatBubble'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; import {Picker} from '@react-native-picker/picker'; import {router} from 'expo-router'; @@ -370,7 +371,7 @@ export default function LearnerAssessmentDemographics() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, @@ -391,10 +392,10 @@ const styles = StyleSheet.create({ marginTop: 12, }, correctBorder: { - borderColor: '#9CA3AF', + borderColor: Colors.border.correctColor, }, wrongBorder: { - borderColor: '#ff4c4c', + borderColor: Colors.border.wrongColor, }, textInputStyle: { flex: 2.3, @@ -406,14 +407,14 @@ const styles = StyleSheet.create({ text: { textTransform: 'uppercase', fontWeight: 'bold', - color: '#7654F2', - lineHeight: 20, + color: Colors.default.purple500, + lineHeight: Colors.learnerAssessment.lineHeight, }, defaultOptionText: { - color: '#5C5776', + color: Colors.default.optionText, fontSize: 14, }, errorText: { - color: '#ff4c4c', + color: Colors.border.wrongColor, }, }); diff --git a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentDynamics.tsx b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentDynamics.tsx index 380f1ad3..3863bfbe 100644 --- a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentDynamics.tsx +++ b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentDynamics.tsx @@ -3,6 +3,7 @@ import React, {useState} from 'react'; import AsyncStorage from '@react-native-async-storage/async-storage'; import {ChatBubble} from '@/components/ChatBubble'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; import {Picker} from '@react-native-picker/picker'; import {router} from 'expo-router'; @@ -273,7 +274,7 @@ export default function LearnerAssessmentDynamics() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, @@ -294,10 +295,10 @@ const styles = StyleSheet.create({ marginTop: 12, }, correctBorder: { - borderColor: '#9CA3AF', + borderColor: Colors.border.correctColor, }, wrongBorder: { - borderColor: '#ff4c4c', + borderColor: Colors.border.wrongColor, }, textInputStyle: { flex: 2.3, @@ -309,14 +310,14 @@ const styles = StyleSheet.create({ text: { textTransform: 'uppercase', fontWeight: 'bold', - color: '#7654F2', - lineHeight: 20, + color: Colors.default.purple500, + lineHeight: Colors.learnerAssessment.lineHeight, }, defaultOptionText: { - color: '#5C5776', - fontSize: 14, + color: Colors.default.optionText, + fontSize: Colors.default.optionFontSize, }, errorText: { - color: '#ff4c4c', + color: Colors.border.wrongColor, }, }); diff --git a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentExperience.tsx b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentExperience.tsx index affd2261..152f1bbb 100644 --- a/frontend/iQMA-Skills-Builder/app/LearnerAssessmentExperience.tsx +++ b/frontend/iQMA-Skills-Builder/app/LearnerAssessmentExperience.tsx @@ -3,6 +3,7 @@ import React, {useState} from 'react'; import AsyncStorage from '@react-native-async-storage/async-storage'; import {ChatBubble} from '@/components/ChatBubble'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; import {Picker} from '@react-native-picker/picker'; import {router} from 'expo-router'; @@ -354,7 +355,7 @@ export default function LearnerAssessmentExperience() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, @@ -375,10 +376,10 @@ const styles = StyleSheet.create({ marginTop: 12, }, correctBorder: { - borderColor: '#9CA3AF', + borderColor: Colors.border.correctColor, }, wrongBorder: { - borderColor: '#ff4c4c', + borderColor: Colors.border.wrongColor, }, textInputStyle: { flex: 2.3, @@ -390,12 +391,12 @@ const styles = StyleSheet.create({ text: { textTransform: 'uppercase', fontWeight: 'bold', - color: '#7654F2', - lineHeight: 20, + color: Colors.default.purple500, + lineHeight: Colors.learnerAssessment.lineHeight, }, defaultOptionText: { - color: '#5C5776', - fontSize: 14, + color: Colors.default.optionText, + fontSize: Colors.default.optionFontSize, }, checkboxContainer: { flexDirection: 'row', @@ -412,13 +413,13 @@ const styles = StyleSheet.create({ marginRight: 10, }, checkedCheckbox: { - backgroundColor: '#7654F2', + backgroundColor: Colors.default.purple500, textAlign: 'center', }, checkmark: { color: 'white', }, errorText: { - color: '#ff4c4c', + color: Colors.border.wrongColor, }, }); diff --git a/frontend/iQMA-Skills-Builder/app/Lesson.tsx b/frontend/iQMA-Skills-Builder/app/Lesson.tsx index cc46d5f1..1ff1403b 100644 --- a/frontend/iQMA-Skills-Builder/app/Lesson.tsx +++ b/frontend/iQMA-Skills-Builder/app/Lesson.tsx @@ -1,22 +1,34 @@ +import * as lessonEndpoints from '@/helpers/lessonEndpoints'; +import * as unitEndpoints from '@/helpers/unitEndpoints'; + +import React, {useEffect, useLayoutEffect, useState} from 'react'; import {StyleSheet, Text, View, ScrollView} from 'react-native'; -import SectionCard from '@/components/SectionCard'; -import React, {useState, useLayoutEffect, useEffect} from 'react'; +import {router, useLocalSearchParams} from 'expo-router'; + +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; -import ProgressBar from '@/components/ProgressBar'; -import {useNavigation} from '@react-navigation/native'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; import {OverviewCard} from '@/components/OverviewCard'; +import ProgressBar from '@/components/ProgressBar'; +import SectionCard from '@/components/SectionCard'; import {formatSection} from '@/helpers/formatSectionID'; import {formatUnit} from '@/helpers/formatUnitID'; -import {router, useLocalSearchParams} from 'expo-router'; -import * as unitEndpoints from '@/helpers/unitEndpoints'; -import * as lessonEndpoints from '@/helpers/lessonEndpoints'; -import { LoadingIndicator } from '@/components/LoadingIndicator'; +import {useNavigation} from '@react-navigation/native'; import VideoPlayer from '@/components/VideoPlayer'; - // where things show up export default function Lesson() { const navigation = useNavigation(); - const {sectionID, unitID, lessonID, currentLessonIdx, totalLesson, currentUnit, totalUnits, currentProgress, totalProgress} = useLocalSearchParams(); + const { + sectionID, + unitID, + lessonID, + currentLessonIdx, + totalLesson, + currentUnit, + totalUnits, + currentProgress, + totalProgress, + } = useLocalSearchParams(); const [sectionNumber, setSectionNumber] = useState(''); const [unitNumber, setUnitNumber] = useState(''); const [unitName, setUnitName] = useState(''); @@ -27,8 +39,9 @@ export default function Lesson() { const [isLoading, setIsLoading] = useState(true); useLayoutEffect(() => { - - const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string); + const progress = + parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -49,7 +62,9 @@ export default function Lesson() { totalLesson, currentUnit, totalUnits, - currentProgress: (parseInt(currentProgress as string) + 1).toString(), + currentProgress: ( + parseInt(currentProgress as string) + 1 + ).toString(), totalProgress, }, }); @@ -200,14 +215,14 @@ export default function Lesson() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, screenTitle: { - fontSize: 14, + fontSize: Colors.lessonName.fontSize, fontWeight: 'bold', - color: '#4143A3', + color: Colors.header.color, marginBottom: 20, marginHorizontal: 10, }, diff --git a/frontend/iQMA-Skills-Builder/app/RealityCheck.tsx b/frontend/iQMA-Skills-Builder/app/RealityCheck.tsx index 8b02958e..d0029da7 100644 --- a/frontend/iQMA-Skills-Builder/app/RealityCheck.tsx +++ b/frontend/iQMA-Skills-Builder/app/RealityCheck.tsx @@ -1,22 +1,33 @@ +import * as unitEndpoints from '@/helpers/unitEndpoints'; + import {Image, StyleSheet, Text, View} from 'react-native'; -import SectionCard from '@/components/SectionCard'; -import React, {useState, useLayoutEffect, useEffect, useRef} from 'react'; -import {CustomButton} from '@/components/CustomButton'; +import React, {useEffect, useLayoutEffect, useRef, useState} from 'react'; import {router, useLocalSearchParams, useRouter} from 'expo-router'; -import {useNavigation} from '@react-navigation/native'; -import ProgressBar from '@/components/ProgressBar'; + +import {Colors} from '@/constants/Colors'; +import {CustomButton} from '@/components/CustomButton'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; import {OverviewCard} from '@/components/OverviewCard'; +import ProgressBar from '@/components/ProgressBar'; +import SectionCard from '@/components/SectionCard'; import {formatSection} from '@/helpers/formatSectionID'; import {formatUnit} from '@/helpers/formatUnitID'; -import * as unitEndpoints from '@/helpers/unitEndpoints'; -import {LoadingIndicator} from '@/components/LoadingIndicator'; +import {useNavigation} from '@react-navigation/native'; // where things show up export default function RealityCheck() { const navigation = useNavigation(); // Use this for Routing - const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams(); + const { + sectionID, + unitID, + currentUnit, + totalUnits, + isFinal, + currentProgress, + totalProgress, + } = useLocalSearchParams(); const [sectionNumber, setSectionNumber] = useState(''); const [unitNumber, setUnitNumber] = useState(''); const [unitName, setUnitName] = useState(''); @@ -28,8 +39,9 @@ export default function RealityCheck() { useEffect(() => {}, []); useLayoutEffect(() => { - - const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string); + const progress = + parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -72,8 +84,10 @@ export default function RealityCheck() { currentUnit, totalUnits, isFinal, - currentProgress: (parseInt(currentProgress as string) + 1).toString(), - totalProgress + currentProgress: ( + parseInt(currentProgress as string) + 1 + ).toString(), + totalProgress, }, }); }; @@ -135,14 +149,14 @@ export default function RealityCheck() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, screenTitle: { - fontSize: 14, + fontSize: Colors.lessonName.fontSize, fontWeight: 'bold', - color: '#4143A3', + color: Colors.header.color, marginBottom: 20, marginHorizontal: 10, }, diff --git a/frontend/iQMA-Skills-Builder/app/SectionIntroduction.tsx b/frontend/iQMA-Skills-Builder/app/SectionIntroduction.tsx index eb8449b7..ca57d50a 100644 --- a/frontend/iQMA-Skills-Builder/app/SectionIntroduction.tsx +++ b/frontend/iQMA-Skills-Builder/app/SectionIntroduction.tsx @@ -1,22 +1,34 @@ +import React, {useEffect, useLayoutEffect, useState} from 'react'; import {StyleSheet, Text, View, ScrollView} from 'react-native'; -import SectionCard from '@/components/SectionCard'; -import React, {useState, useLayoutEffect, useEffect} from 'react'; -import YoutubePlayer from 'react-native-youtube-iframe'; -import {CustomButton} from '@/components/CustomButton'; import {router, useLocalSearchParams} from 'expo-router'; -import {useNavigation} from '@react-navigation/native'; + +import {Colors} from '@/constants/Colors'; +import {CustomButton} from '@/components/CustomButton'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; +import {OverviewCard} from '@/components/OverviewCard'; import ProgressBar from '@/components/ProgressBar'; +import SectionCard from '@/components/SectionCard'; +import YoutubePlayer from 'react-native-youtube-iframe'; import {formatSection} from '@/helpers/formatSectionID'; -import {OverviewCard} from '@/components/OverviewCard'; +import {useNavigation} from '@react-navigation/native'; import * as sectionEndpoints from '@/helpers/sectionEndpoints'; -import { LoadingIndicator } from '@/components/LoadingIndicator'; import VideoPlayer from '@/components/VideoPlayer'; // where things show up export default function SectionIntroduction() { const navigation = useNavigation(); - const {sectionID, unitID, lessonID, currentLessonIdx, totalLesson, currentUnit, totalUnits, currentProgress, totalProgress} = useLocalSearchParams(); + const { + sectionID, + unitID, + lessonID, + currentLessonIdx, + totalLesson, + currentUnit, + totalUnits, + currentProgress, + totalProgress, + } = useLocalSearchParams(); // const sectionID = 'SEC0001'; // to be removed const [sectionNumber, setSectionNumber] = useState(''); const [sectionName, setSectionName] = useState(''); @@ -25,8 +37,9 @@ export default function SectionIntroduction() { const [isLoading, setIsLoading] = useState(true); useLayoutEffect(() => { - - const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string); + const progress = + parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -69,7 +82,9 @@ export default function SectionIntroduction() { totalLesson, currentUnit, totalUnits, - currentProgress: (parseInt(currentProgress as string) + 1).toString(), + currentProgress: ( + parseInt(currentProgress as string) + 1 + ).toString(), totalProgress, }, }); @@ -129,14 +144,14 @@ export default function SectionIntroduction() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, // flex: 1, }, screenTitle: { - fontSize: 14, + fontSize: Colors.lessonName.fontSize, fontWeight: 'bold', - color: '#4143A3', + color: Colors.header.color, marginBottom: 20, marginHorizontal: 10, }, diff --git a/frontend/iQMA-Skills-Builder/app/SelfReflection.tsx b/frontend/iQMA-Skills-Builder/app/SelfReflection.tsx index 5904d03a..b8591806 100644 --- a/frontend/iQMA-Skills-Builder/app/SelfReflection.tsx +++ b/frontend/iQMA-Skills-Builder/app/SelfReflection.tsx @@ -1,24 +1,33 @@ +import * as resultEndpoints from '@/helpers/resultEndpoints'; +import * as unitEndpoints from '@/helpers/unitEndpoints'; import React, {useContext, useEffect, useLayoutEffect, useState} from 'react'; import {ScrollView, StyleSheet, Text, View} from 'react-native'; import {router, useLocalSearchParams} from 'expo-router'; +import {AuthContext} from '@/context/AuthContext'; +import {Colors} from '@/constants/Colors'; import {CustomButton} from '@/components/CustomButton'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; import MiniChatbot from '@/components/MiniChatbot'; import ProgressBar from '@/components/ProgressBar'; import SectionCard from '@/components/SectionCard'; import {formatSection} from '@/helpers/formatSectionID'; import {formatUnit} from '@/helpers/formatUnitID'; import {useNavigation} from '@react-navigation/native'; -import { LoadingIndicator } from '@/components/LoadingIndicator'; -import { AuthContext } from '@/context/AuthContext'; -import * as unitEndpoints from '@/helpers/unitEndpoints'; -import * as resultEndpoints from '@/helpers/resultEndpoints'; export default function SelfReflection() { const navigation = useNavigation(); const {currentUser} = useContext(AuthContext); - const {sectionID, unitID, currentUnit, totalUnits, quizID, currentProgress, totalProgress} = useLocalSearchParams(); + const { + sectionID, + unitID, + currentUnit, + totalUnits, + quizID, + currentProgress, + totalProgress, + } = useLocalSearchParams(); const [sectionNumber, setSectionNumber] = useState(''); const [unitName, setUnitName] = useState(''); @@ -29,8 +38,9 @@ export default function SelfReflection() { }; const [isLoading, setIsLoading] = useState(true); useLayoutEffect(() => { - - const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string); + const progress = + parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -64,7 +74,6 @@ export default function SelfReflection() { }, [sectionID, unitID]); const handlePress = async () => { - // (async () => { try { const ifCompleted = await resultEndpoints.checkIfCompletedQuiz( @@ -79,11 +88,16 @@ export default function SelfReflection() { ); } } catch (error) { - console.error('Error in Submitting Unit Assessment (Self-Reflection Page):', error); + console.error( + 'Error in Submitting Unit Assessment (Self-Reflection Page):', + error + ); } // })(); - if (parseInt(currentUnit as string) === parseInt(totalUnits as string)) { + if ( + parseInt(currentUnit as string) === parseInt(totalUnits as string) + ) { // if last unit, go back to Assessment Intro for Final Assessment (AssessmentIntroduction.tsx) router.push({ pathname: 'AssessmentIntroduction', @@ -93,16 +107,16 @@ export default function SelfReflection() { currentUnit, totalUnits, isFinal: 'true', - currentProgress: (parseInt(currentProgress as string) + 1).toString(), - totalProgress + currentProgress: ( + parseInt(currentProgress as string) + 1 + ).toString(), + totalProgress, }, }); } else { // after self-reflection navigate back to home for next unit router.replace('Home'); } - - }; return ( @@ -123,7 +137,7 @@ export default function SelfReflection() { (''); const [unitNumber, setUnitNumber] = useState(''); const [unitName, setUnitName] = useState(''); @@ -53,8 +66,9 @@ export default function UnitIntroduction() { }, []); useLayoutEffect(() => { - - const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string); + const progress = + parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -98,7 +112,9 @@ export default function UnitIntroduction() { totalLesson, currentUnit, totalUnits, - currentProgress: (parseInt(currentProgress as string) + 1).toString(), + currentProgress: ( + parseInt(currentProgress as string) + 1 + ).toString(), totalProgress, }, }); @@ -176,14 +192,14 @@ export default function UnitIntroduction() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, screenTitle: { - fontSize: 14, + fontSize: Colors.lessonName.fontSize, fontWeight: 'bold', - color: '#4143A3', + color: Colors.header.color, marginBottom: 20, marginHorizontal: 10, }, diff --git a/frontend/iQMA-Skills-Builder/app/VideoQuiz.tsx b/frontend/iQMA-Skills-Builder/app/VideoQuiz.tsx index 2f0585a5..4871b458 100644 --- a/frontend/iQMA-Skills-Builder/app/VideoQuiz.tsx +++ b/frontend/iQMA-Skills-Builder/app/VideoQuiz.tsx @@ -1,26 +1,39 @@ -import AsyncStorage from '@react-native-async-storage/async-storage'; -import {ScrollView, StyleSheet, Text, Image, View} from 'react-native'; -import SectionCard from '@/components/SectionCard'; +import * as lessonEndpoints from '@/helpers/lessonEndpoints'; +import * as quizEndpoints from '@/helpers/quizEndpoints'; +import * as resultEndpoints from '@/helpers/resultEndpoints'; +import * as unitEndpoints from '@/helpers/unitEndpoints'; + +import {Image, ScrollView, StyleSheet, Text, View} from 'react-native'; import React, {useContext, useEffect, useLayoutEffect, useState} from 'react'; -import {useNavigation} from '@react-navigation/native'; +import {router, useLocalSearchParams} from 'expo-router'; + +import AsyncStorage from '@react-native-async-storage/async-storage'; +import {AuthContext} from '@/context/AuthContext'; +import {Colors} from '@/constants/Colors'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; import ProgressBar from '@/components/ProgressBar'; +import {Question} from '@/constants/Quiz'; import {QuizCard} from '@/components/QuizCard'; +import SectionCard from '@/components/SectionCard'; import axios from 'axios'; -import {router, useLocalSearchParams} from 'expo-router'; -import {Question} from '@/constants/Quiz'; import {formatSection} from '@/helpers/formatSectionID'; import {formatUnit} from '@/helpers/formatUnitID'; -import * as unitEndpoints from '@/helpers/unitEndpoints'; -import * as lessonEndpoints from '@/helpers/lessonEndpoints'; -import * as quizEndpoints from '@/helpers/quizEndpoints'; -import * as resultEndpoints from '@/helpers/resultEndpoints'; -import { AuthContext } from '@/context/AuthContext'; -import {LoadingIndicator} from '@/components/LoadingIndicator'; +import {useNavigation} from '@react-navigation/native'; export default function VideoQuiz() { const navigation = useNavigation(); const {currentUser, isLoading} = useContext(AuthContext); - const {sectionID, unitID, lessonID, currentLessonIdx, totalLesson, currentUnit, totalUnits, currentProgress, totalProgress} = useLocalSearchParams(); + const { + sectionID, + unitID, + lessonID, + currentLessonIdx, + totalLesson, + currentUnit, + totalUnits, + currentProgress, + totalProgress, + } = useLocalSearchParams(); const [currentQnsIdx, setCurrentQnsIdx] = useState(0); const [sectionNumber, setSectionNumber] = useState(''); const [unitNumber, setUnitNumber] = useState(''); @@ -44,11 +57,12 @@ export default function VideoQuiz() { unitID as string ); - const lessonDetails = await lessonEndpoints.getLessonDetails( - sectionID as string, - unitID as string, - lessonID as string - ); + const lessonDetails = + await lessonEndpoints.getLessonDetails( + sectionID as string, + unitID as string, + lessonID as string + ); const getAllLessons = await lessonEndpoints.getAllLesson( sectionID as string, @@ -84,8 +98,9 @@ export default function VideoQuiz() { }, [sectionID, unitID, lessonID, nextLessonID]); useLayoutEffect(() => { - - const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string); + const progress = + parseInt(currentProgress as string) / + parseInt(totalProgress as string); navigation.setOptions({ headerTitle: () => ( @@ -101,7 +116,10 @@ export default function VideoQuiz() { setCurrentQnsIdx(newIdx); } else { try { - const ifCompleted = await resultEndpoints.checkIfCompletedQuiz(currentUser.sub, questions[currentQnsIdx].quizID); + const ifCompleted = await resultEndpoints.checkIfCompletedQuiz( + currentUser.sub, + questions[currentQnsIdx].quizID + ); if (!ifCompleted) { await resultEndpoints.createResult( @@ -115,7 +133,7 @@ export default function VideoQuiz() { let currLessonIdx = parseInt(currentLessonIdx as string); console.log('nextLessonID:', nextLessonID); - + // if nextlessonID have "." then route back to Lesson page if (nextLessonID.includes('.')) { pathName = 'Lesson'; @@ -133,7 +151,9 @@ export default function VideoQuiz() { totalLesson, currentUnit, totalUnits, - currentProgress: (parseInt(currentProgress as string) + 1).toString(), + currentProgress: ( + parseInt(currentProgress as string) + 1 + ).toString(), totalProgress, }, }); @@ -161,7 +181,7 @@ export default function VideoQuiz() { style={{ fontSize: 14, fontWeight: 'bold', - color: '#4143A3', + color: Colors.header.color, }} > {lessonName} @@ -169,7 +189,7 @@ export default function VideoQuiz() { @@ -197,7 +217,7 @@ export default function VideoQuiz() { const styles = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, padding: 20, flex: 1, }, diff --git a/frontend/iQMA-Skills-Builder/app/_layout.tsx b/frontend/iQMA-Skills-Builder/app/_layout.tsx index 04bb1ff6..f372c948 100644 --- a/frontend/iQMA-Skills-Builder/app/_layout.tsx +++ b/frontend/iQMA-Skills-Builder/app/_layout.tsx @@ -8,16 +8,17 @@ import {useEffect, useState} from 'react'; import {AuthProvider} from '@/context/AuthContext'; import ChatbotDrawer from '../components/ChatbotDrawer'; +import {Colors} from '@/constants/Colors'; import HomeScreen from './screens/Home'; import {Ionicons} from '@expo/vector-icons'; import {MaterialIcons} from '@expo/vector-icons'; import ProfilePage from './screens/ProfilePage'; +import ProgressBar from '@/components/ProgressBar'; import {Stack} from 'expo-router'; import config from '../config/auth0-configuration'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import useColorScheme from '@/hooks/useColorScheme'; import {useDrawerStatus} from '@react-navigation/drawer'; -import ProgressBar from '@/components/ProgressBar'; const Tab = createBottomTabNavigator(); @@ -25,10 +26,10 @@ const Tab = createBottomTabNavigator(); const AppTabs: React.FC = () => { const colorScheme = useColorScheme(); const tabBarOptions = { - activeTintColor: '#FFFFFF', + activeTintColor: Colors.light.background, inactiveTintColor: '#BBBBBB', style: { - backgroundColor: '#7654F2', + backgroundColor: Colors.default.purple500, }, }; @@ -37,7 +38,7 @@ const AppTabs: React.FC = () => { ({ headerTitleAlign: 'center', - headerStyle: {backgroundColor: '#B199FF'}, + headerStyle: {backgroundColor: Colors.default.purple100}, tabBarActiveTintColor: tabBarOptions.activeTintColor, tabBarInactiveTintColor: tabBarOptions.inactiveTintColor, tabBarStyle: tabBarOptions.style, diff --git a/frontend/iQMA-Skills-Builder/app/index.tsx b/frontend/iQMA-Skills-Builder/app/index.tsx index f6ce83f4..f6efc6c2 100644 --- a/frontend/iQMA-Skills-Builder/app/index.tsx +++ b/frontend/iQMA-Skills-Builder/app/index.tsx @@ -1,13 +1,14 @@ import {ActivityIndicator, Image, Text, View} from 'react-native'; +import {useContext, useEffect, useState} from 'react'; +import AsyncStorage from '@react-native-async-storage/async-storage'; import {AuthContext} from '@/context/AuthContext'; +import {Colors} from '@/constants/Colors'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; import {LoginButton} from '@/components/LoginButton'; import {LogoVisual} from '@/components/LogoVisual'; import {LogoutButton} from '@/components/LogoutButton'; import {Profile} from '@/components/Profile'; -import {useContext, useEffect, useState} from 'react'; -import AsyncStorage from '@react-native-async-storage/async-storage'; -import {LoadingIndicator} from '@/components/LoadingIndicator'; // where things show upp export default function Index() { @@ -38,7 +39,7 @@ export default function Index() { flex: 1, justifyContent: 'center', alignItems: 'center', - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, }} > @@ -54,7 +55,7 @@ export default function Index() { flex: 1, justifyContent: 'center', alignItems: 'center', - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, }} > ) : ( diff --git a/frontend/iQMA-Skills-Builder/app/screens/Chatbot.tsx b/frontend/iQMA-Skills-Builder/app/screens/Chatbot.tsx index fb5e5ceb..55149595 100644 --- a/frontend/iQMA-Skills-Builder/app/screens/Chatbot.tsx +++ b/frontend/iQMA-Skills-Builder/app/screens/Chatbot.tsx @@ -17,6 +17,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; import {AuthContext} from '@/context/AuthContext'; import {ChatBubble} from '@/components/ChatBubble'; import {ChatDrawerParamList} from '@/components/ChatbotDrawer'; +import {Colors} from '@/constants/Colors'; import {DrawerScreenProps} from '@react-navigation/drawer'; import {Feather} from '@expo/vector-icons'; import {TextInput} from 'react-native-gesture-handler'; @@ -102,7 +103,7 @@ const ChatbotScreen: React.FC = ({route, navigation}) => { navigation.getParent()?.setOptions({ tabBarStyle: { display: isDrawerOpen ? 'none' : 'flex', - backgroundColor: '#7654F2', + backgroundColor: Colors.default.purple500, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 80, @@ -209,7 +210,11 @@ const ChatbotScreen: React.FC = ({route, navigation}) => { = ({route, navigation}) => { const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, }, chatContainer: { padding: 10, @@ -256,7 +261,7 @@ const styles = StyleSheet.create({ inputContainer: { flexDirection: 'row', padding: 10, - backgroundColor: '#FFFFFF', + backgroundColor: Colors.light.background, }, input: { flex: 1, @@ -267,7 +272,7 @@ const styles = StyleSheet.create({ paddingVertical: 5, marginRight: 10, paddingLeft: 30, - backgroundColor: '#D1D5DB', + backgroundColor: Colors.chatbot.inputColor, }, button: { justifyContent: 'center', @@ -284,7 +289,7 @@ const styles = StyleSheet.create({ sendButtonCircle: { width: 40, height: 40, - backgroundColor: '#B199FF', + backgroundColor: Colors.default.purple100, borderRadius: 20, justifyContent: 'center', alignItems: 'center', diff --git a/frontend/iQMA-Skills-Builder/app/screens/Home.tsx b/frontend/iQMA-Skills-Builder/app/screens/Home.tsx index 691ea98e..955d7543 100644 --- a/frontend/iQMA-Skills-Builder/app/screens/Home.tsx +++ b/frontend/iQMA-Skills-Builder/app/screens/Home.tsx @@ -19,6 +19,7 @@ import React, {useEffect, useRef, useState} from 'react'; import AsyncStorage from '@react-native-async-storage/async-storage'; import {AuthContext} from '@/context/AuthContext'; +import {Colors} from '@/constants/Colors'; import {Ionicons} from '@expo/vector-icons'; import {LoadingIndicator} from '@/components/LoadingIndicator'; import {SafeAreaView} from 'react-native-safe-area-context'; @@ -194,8 +195,6 @@ const HomeScreen: React.FC = () => { sectionID: string, circularProgress: number, completedUnits: number, - totalLesson: number, - completedLessons: number, isLastUnit: boolean ) => { const iconTypes = ['Trophy', 'staro', 'key', 'book']; @@ -218,6 +217,21 @@ const HomeScreen: React.FC = () => { const unitID = `UNIT${(i + 1).toString().padStart(4, '0')}`; // console.log('Unit ID:', unitID); + const completedLessons = + await resultEndpoints.numberOfCompletedLessonsPerUnit( + currentUser.sub, + sectionID, + unitID + ); + const totalLesson = await lessonEndpoints.getNumofLessonsPerUnit( + sectionID, + unitID + ); + + // console.log("sectionID", sectionID) + // console.log("unitID", unitID) + // console.log("totalLesson", totalLesson) + let getAllLessons: any[] = []; try { getAllLessons = await lessonEndpoints.getAllLesson( @@ -339,17 +353,6 @@ const HomeScreen: React.FC = () => { const unitID = `UNIT${lightedUnit.toString().padStart(4, '0')}`; - const completedLessons = - await resultEndpoints.numberOfCompletedLessonsPerUnit( - currentUser.sub, - sectionID, - unitID - ); - const totalLesson = await lessonEndpoints.getNumofLessonsPerUnit( - sectionID, - unitID - ); - // circular progress is set inside here loadUnitCircularProgress( currentUser.sub, @@ -362,8 +365,6 @@ const HomeScreen: React.FC = () => { sectionID, circularProgress, completedUnits, - totalLesson, - completedLessons, isLastUnit ); @@ -535,11 +536,7 @@ const styles = StyleSheet.create({ backgroundColor: '#CCC', marginVertical: 10, }, - sectionLabel: { - textAlign: 'center', - color: '#666', - marginBottom: 20, - }, + dividerContainer: { flexDirection: 'row', alignItems: 'center', @@ -559,7 +556,7 @@ const styles = StyleSheet.create({ position: 'absolute', bottom: 20, right: 20, - backgroundColor: '#B199FF', + backgroundColor: Colors.default.purple100, borderRadius: 10, width: 50, height: 50, diff --git a/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx b/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx index d9d6f53f..af254362 100644 --- a/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx +++ b/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx @@ -1,13 +1,15 @@ -import { StyleSheet, Text, View } from 'react-native'; +import { StyleSheet, Text, View ,Button,Alert} from 'react-native'; import React, { useContext, useEffect, useState } from 'react'; import CustomSwitch from '@/components/CustomSwitch'; import { CustomButton } from '@/components/CustomButton'; import { AuthContext } from '@/context/AuthContext'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { LoadingIndicator } from '@/components/LoadingIndicator'; +import { router } from 'expo-router'; +import { Colors } from '@/constants/Colors'; export default function Settings() { - const { logOut } = useContext(AuthContext); + const {logOut} = useContext(AuthContext); const [isSoundEffectsEnabled, setIsSoundEffectsEnabled] = useState(false); const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(false); @@ -70,14 +72,24 @@ export default function Settings() { GENERAL Sound Effects - + NOTIFICATIONS All Notifications - + +