Add globalstyles for container to keep app background colour consistent

FYP-2024-IQMA · Oct 21, 2024 · 2c9e733 · 2c9e733
1 parent b157bcf
commit 2c9e733
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 49 deletions.
diff --git a/frontend/iQMA-Skills-Builder/app/Courses.tsx b/frontend/iQMA-Skills-Builder/app/Courses.tsx
@@ -15,6 +15,7 @@ import * as sectionEndpoints from '@/helpers/sectionEndpoints';
 import {Colors} from '@/constants/Colors';
 import { formatSection } from '@/helpers/formatSectionID';
 import SectionProfile from '@/components/SectionProfile';
+import { globalStyles } from '@/constants/styles';
 
 export default function Courses() {
     const {currentUser} = useContext(AuthContext);
@@ -63,9 +64,8 @@ export default function Courses() {
     }
 
     return (
-        <ScrollView style={styles.container}>
-            <View>
-                    <>
+        <ScrollView style={globalStyles.container}>
+            <View style={styles.container}>
                         <View style={styles.sectionContainer}>
                         {courses.length > 0 ? (
                             courses
@@ -91,7 +91,6 @@ export default function Courses() {
                             <Text>No courses available</Text>
                         )}
                         </View>
-                    </>
             </View>
         </ScrollView>
     );

diff --git a/frontend/iQMA-Skills-Builder/app/EditProfile.tsx b/frontend/iQMA-Skills-Builder/app/EditProfile.tsx
@@ -12,7 +12,7 @@ import {AuthContext} from '@/context/AuthContext';
 import * as accountEndpoints from '@/helpers/accountEndpoints';
 import {LoadingIndicator} from '@/components/LoadingIndicator';
 import { router } from 'expo-router';
-// import { ScrollView } from 'react-native-gesture-handler';
+import { globalStyles } from '@/constants/styles';
 
 export default function EditProfile() {
     const {currentUser, isLoading} = useContext(AuthContext);
@@ -59,7 +59,7 @@ export default function EditProfile() {
 
     return (
         <ScrollView
-            style={styles.container}
+            style={globalStyles.container}
         >
             <View style={styles.form}>
                 <Text style={styles.label}>FIRST NAME</Text>
@@ -83,10 +83,6 @@ export default function EditProfile() {
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#FFF',
-    },
     form: {
         padding: 20,
     },

diff --git a/frontend/iQMA-Skills-Builder/app/screens/Home.tsx b/frontend/iQMA-Skills-Builder/app/screens/Home.tsx
@@ -28,6 +28,7 @@ import SectionCard from '@/components/SectionCard';
 import TopStats from '@/components/TopStats';
 import {router} from 'expo-router';
 import {useContext} from 'react';
+import { globalStyles } from '@/constants/styles';
 
 
 const HomeScreen: React.FC = () => {
@@ -417,7 +418,7 @@ const HomeScreen: React.FC = () => {
     }
 
     return (
-        <SafeAreaView style={styles.outerContainer}>
+        <SafeAreaView style={globalStyles.container}>
             <ScrollView
                 contentContainerStyle={styles.container}
                 onScroll={onScroll}
@@ -457,12 +458,12 @@ const HomeScreen: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
-    outerContainer: {
-        flex: 1,
-    },
+    // outerContainer: {
+    //     flex: 1,
+    // },
     container: {
         padding: 20,
-        backgroundColor: '#F5F5F5',
+        // backgroundColor: '#F5F5F5',
     },
     lineSeparator: {
         height: 1,

diff --git a/frontend/iQMA-Skills-Builder/app/screens/ProfilePage.tsx b/frontend/iQMA-Skills-Builder/app/screens/ProfilePage.tsx
@@ -25,6 +25,7 @@ import {router, useFocusEffect} from 'expo-router';
 import {useContext} from 'react';
 import {Achievements} from '@/components/Achievement';
 import CertificationsList from '@/components/Certification';
+import { globalStyles } from '@/constants/styles';
 
 const ProfilePage: React.FC = () => {
     const {currentUser, isLoading} = useContext(AuthContext);
@@ -95,7 +96,7 @@ const ProfilePage: React.FC = () => {
 
     return (
         <ScrollView contentContainerStyle={styles.scrollView}>
-            <View style={styles.container}>
+            <View style={globalStyles.container}>
                 <ProfileCard userDetails={userDetails} />
 
                 <Achievements achievements={badges} />

diff --git a/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx b/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx
@@ -1,12 +1,13 @@
-import { StyleSheet, Text, View ,Button,Alert} from 'react-native';
-import React, { useContext, useEffect, useState } from 'react';
+import {StyleSheet, Text, View, Button, Alert, ScrollView} 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 {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';
+import {LoadingIndicator} from '@/components/LoadingIndicator';
+import {router} from 'expo-router';
+import {Colors} from '@/constants/Colors';
+import {globalStyles} from '@/constants/styles';
 
 export default function Settings() {
     const {logOut} = useContext(AuthContext);
@@ -68,35 +69,37 @@ export default function Settings() {
     }
 
     return (
-        <View style={styles.container}>
-            <Text style={styles.textHeading}>GENERAL</Text>
-            <View style={styles.switchContainer}>
-                <Text style={styles.label}>Sound Effects</Text>
-                <CustomSwitch
-                    isEnabled={isSoundEffectsEnabled}
-                    onToggle={toggleSoundEffects}
+        <ScrollView style={globalStyles.container}>
+            <View style={styles.container}>
+                <Text style={styles.textHeading}>GENERAL</Text>
+                <View style={styles.switchContainer}>
+                    <Text style={styles.label}>Sound Effects</Text>
+                    <CustomSwitch
+                        isEnabled={isSoundEffectsEnabled}
+                        onToggle={toggleSoundEffects}
+                    />
+                </View>
+
+                <Text style={styles.textHeading}>NOTIFICATIONS</Text>
+                <View style={styles.switchContainer}>
+                    <Text style={styles.label}>All Notifications</Text>
+                    <CustomSwitch
+                        isEnabled={isNotificationsEnabled}
+                        onToggle={toggleNotifications}
+                    />
+                </View>
+                <Button
+                    title="Press Me"
+                    onPress={() => router.push('EditProfile')}
                 />
-            </View>
 
-            <Text style={styles.textHeading}>NOTIFICATIONS</Text>
-            <View style={styles.switchContainer}>
-                <Text style={styles.label}>All Notifications</Text>
-                <CustomSwitch
-                    isEnabled={isNotificationsEnabled}
-                    onToggle={toggleNotifications}
+                <CustomButton
+                    label="Log out"
+                    backgroundColor="white"
+                    onPressHandler={logOut}
                 />
             </View>
-            <Button
-        title="Press Me"
-        onPress={() => router.push('EditProfile')}
-      />
-
-            <CustomButton
-                label="Log out"
-                backgroundColor="white"
-                onPressHandler={logOut}
-            />
-        </View>
+        </ScrollView>
     );
 }
 

diff --git a/frontend/iQMA-Skills-Builder/components/Achievement.tsx b/frontend/iQMA-Skills-Builder/components/Achievement.tsx
@@ -85,7 +85,6 @@ const styles = StyleSheet.create({
         borderColor: '#5C5776',
         borderRadius: 10,
         marginTop: 10,
-        backgroundColor: "#FFFF"
     },
     achievementImageContainer: {
         flex: 1,

diff --git a/frontend/iQMA-Skills-Builder/constants/styles.ts b/frontend/iQMA-Skills-Builder/constants/styles.ts
@@ -0,0 +1,10 @@
+// styles.js
+import { StyleSheet } from 'react-native';
+import { Colors } from './Colors';
+
+export const globalStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.light.background,
+  },
+});