Merge pull request #261 from COS301-SE-2024/feat/mobile/appearance-page

Feat/mobile/appearance page
COS301-SE-2024 · Aug 3, 2024 · 2026141 · 2026141
2 parents d97dc75 + e223494
commit 2026141
Show file tree

Hide file tree

Showing 16 changed files with 636 additions and 27 deletions.
diff --git a/frontend/occupi-mobile4/app/_layout.tsx b/frontend/occupi-mobile4/app/_layout.tsx
@@ -56,6 +56,7 @@ export default function RootLayout() {
         <Stack.Screen name="faqpage" options={{ headerShown: false }} />
         <Stack.Screen name="set-notifications" options={{ headerShown: false }} />
         <Stack.Screen name="set-security" options={{ headerShown: false }} />
+        <Stack.Screen name="set-appearance" options={{ headerShown: false }} />
         <Stack.Screen name="notiftester" options={{ headerShown: false }} />
         <Stack.Screen name="changepassword" options={{ headerShown: false }} />
         <Stack.Screen name="set-details" options={{ headerShown: false }} />

diff --git a/frontend/occupi-mobile4/app/set-appearance.tsx b/frontend/occupi-mobile4/app/set-appearance.tsx
@@ -0,0 +1,7 @@
+import Appearance from "../screens/Settings/Appearance";
+
+export default function Home() {
+  return (
+    <Appearance />
+  );
+}
diff --git a/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx b/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx
@@ -47,6 +47,15 @@ const BookRoom = () => {
   };
   const apiUrl = process.env.EXPO_PUBLIC_DEVELOP_API_URL;
   const viewroomsendpoint = process.env.EXPO_PUBLIC_VIEW_ROOMS;
+  const [accentColour, setAccentColour] = useState<string>('greenyellow');
+
+  useEffect(() => {
+    const getAccentColour = async () => {
+      let accentcolour = await SecureStore.getItemAsync('accentColour');
+      setAccentColour(accentcolour);
+    };
+    getAccentColour();
+  }, []);
 
   useEffect(() => {
     const fetchAllRooms = async () => {
@@ -125,11 +134,11 @@ const BookRoom = () => {
             <Text style={{ fontWeight: 'bold', fontSize: 18, color: textColor }}>Rooms</Text>
             <TouchableOpacity onPress={toggleLayout}>
               {layout === "row" ? (
-                <View style={{ backgroundColor: '#ADFF2F', alignSelf: 'center', padding: 8, borderRadius: 12 }}>
+                <View style={{ backgroundColor: `${accentColour}`, alignSelf: 'center', padding: 8, borderRadius: 12 }}>
                   <Ionicons name="grid-outline" size={22} color="#2C2C2E" />
                 </View>
               ) : (
-                <View style={{ backgroundColor: '#ADFF2F', alignSelf: 'center', padding: 8, borderRadius: 12 }}>
+                <View style={{ backgroundColor: `${accentColour}`, alignSelf: 'center', padding: 8, borderRadius: 12 }}>
                   <Octicons name="rows" size={22} color="#2C2C2E" />
                 </View>
               )}
@@ -169,7 +178,7 @@ const BookRoom = () => {
                         </View>
                       </View>
                       <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                        <TouchableOpacity style={{ bottom: 0, width: wp('27%'), height: hp('4%'), justifyContent: 'center', alignItems: 'center', borderRadius: 12, backgroundColor: 'greenyellow' }}>
+                        <TouchableOpacity style={{ bottom: 0, width: wp('27%'), height: hp('4%'), justifyContent: 'center', alignItems: 'center', borderRadius: 12, backgroundColor: `${accentColour}` }}>
                           <Text style={{ color: 'dimgrey', fontSize: 13 }}>Available: now</Text>
                         </TouchableOpacity>
                         <Ionicons name="chevron-forward-outline" size={30} color={textColor} />
@@ -198,7 +207,7 @@ const BookRoom = () => {
                     </View>
                   </View>
                   <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                    <TouchableOpacity style={{ width: wp('27%'), height: hp('4%'), justifyContent: 'center', alignItems: 'center', borderRadius: 12, backgroundColor: 'greenyellow' }}>
+                    <TouchableOpacity style={{ width: wp('27%'), height: hp('4%'), justifyContent: 'center', alignItems: 'center', borderRadius: 12, backgroundColor: `${accentColour}` }}>
                       <Text style={{ bottom: 0, color: 'dimgrey', fontSize: 13 }}>Available: now</Text>
                     </TouchableOpacity>
                     <Ionicons name="chevron-forward-outline" size={30} color={textColor} />

diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx
@@ -62,6 +62,15 @@ const ViewBookings = () => {
     const [refreshing, setRefreshing] = useState(false);
     const apiUrl = process.env.EXPO_PUBLIC_DEVELOP_API_URL;
     const viewbookingsendpoint = process.env.EXPO_PUBLIC_VIEW_BOOKINGS;
+    const [accentColour, setAccentColour] = useState<string>('greenyellow');
+
+    useEffect(() => {
+        const getAccentColour = async () => {
+            let accentcolour = await SecureStore.getItemAsync('accentColour');
+            setAccentColour(accentcolour);
+        };
+        getAccentColour();
+    }, []);
 
 
     const onRefresh = React.useCallback(() => {
@@ -262,11 +271,11 @@ const ViewBookings = () => {
                     </View>
                     <TouchableOpacity onPress={toggleLayout}>
                         {layout === "row" ? (
-                            <Box backgroundColor="$#ADFF2F" alignSelf="center" p="$2" borderRadius="$lg">
+                            <Box backgroundColor={`${accentColour}`} alignSelf="center" p="$2" borderRadius="$lg">
                                 <Ionicons name="grid-outline" size={22} color="#2C2C2E" />
                             </Box>
                         ) : (
-                            <Box backgroundColor="$#ADFF2F" alignSelf="center" p="$2" borderRadius="$lg">
+                            <Box backgroundColor={`${accentColour}`} alignSelf="center" p="$2" borderRadius="$lg">
                                 <Octicons name="rows" size={22} color="#2C2C2E" />
                             </Box>
                         )}

diff --git a/frontend/occupi-mobile4/screens/Dashboard/Dashboard.tsx b/frontend/occupi-mobile4/screens/Dashboard/Dashboard.tsx
@@ -32,6 +32,15 @@ const Dashboard = () => {
   const [checkedIn, setCheckedIn] = useState(false);
   const [name, setName] = useState("User");
   const toast = useToast()
+  const [accentColour, setAccentColour] = useState<string>('greenyellow');
+
+  useEffect(() => {
+    const getAccentColour = async () => {
+      let accentcolour = await SecureStore.getItemAsync('accentColour');
+      setAccentColour(accentcolour);
+    };
+    getAccentColour();
+  }, []);
   useEffect(() => {
     const intervalId = setInterval(() => {
       setNumbers(prevNumbers => {
@@ -49,7 +58,7 @@ const Dashboard = () => {
       console.log(result);
       if (result !== undefined) {
         let jsonresult = JSON.parse(result);
-        setName(String(jsonresult?.data?.details?.name)); 
+        setName(String(jsonresult?.data?.details?.name));
       }
     };
     const getUserSettings = async () => {
@@ -214,7 +223,7 @@ const Dashboard = () => {
         <Card flexDirection="row" justifyContent="center" alignItems="center" variant="elevated" mt="$4" style={{ width: wp('43%'), height: hp('12%') }} backgroundColor={cardBackgroundColor} borderRadius={10} >
           <Text color={textColor} fontSize={40}>{numbers[0]}</Text>
           <View flexDirection="column">
-            <View flexDirection="row" alignItems="center"><FontAwesome6 name="arrow-trend-up" size={24} color="yellowgreen" /><Text color="yellowgreen"> {numbers[0] / 10 + 5}%</Text></View>
+            <View flexDirection="row" alignItems="center"><FontAwesome6 name="arrow-trend-up" size={24} color={accentColour} /><Text color={accentColour}> {numbers[0] / 10 + 5}%</Text></View>
           </View>
         </Card>
         <Card size="lg" variant="elevated" mt="$4" style={{ width: wp('43%'), height: hp('12%') }} backgroundColor={cardBackgroundColor} borderRadius={10} />
@@ -225,7 +234,7 @@ const Dashboard = () => {
             <ButtonText color="dimgrey">Check out</ButtonText>
           </Button>
         ) : (
-          <Button w={wp('36%')} borderRadius={10} backgroundColor="greenyellow" onPress={checkIn}>
+          <Button w={wp('36%')} borderRadius={10} backgroundColor={accentColour} onPress={checkIn}>
             <ButtonText color="dimgrey">Check in</ButtonText>
           </Button>
         )}

diff --git a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx
@@ -52,6 +52,15 @@ const BookingDetails = () => {
   const steps = ["Booking details", "Invite attendees", "Receipt"];
   const apiUrl = process.env.EXPO_PUBLIC_DEVELOP_API_URL;
   const bookroomendpoint = process.env.EXPO_PUBLIC_BOOK_ROOM;
+  const [accentColour, setAccentColour] = useState<string>('greenyellow');
+
+  useEffect(() => {
+    const getAccentColour = async () => {
+      let accentcolour = await SecureStore.getItemAsync('accentColour');
+      setAccentColour(accentcolour);
+    };
+    getAccentColour();
+  }, []);
 
   useEffect(() => {
     const getbookingInfo = async () => {
@@ -221,15 +230,15 @@ const BookingDetails = () => {
                 width: 20,
                 height: 20,
                 borderRadius: 10,
-                backgroundColor: index <= currentStep ? "greenyellow" : (isDark ? "#333" : "#E0E0E0"),
+                backgroundColor: index <= currentStep ? `${accentColour}` : (isDark ? "#333" : "#E0E0E0"),
               }}
             >
             </View>
             <Text
               style={{
                 color:
                   currentStep === index
-                    ? "greenyellow"
+                    ? `${accentColour}`
                     : isDark
                       ? "#fff"
                       : "#000",
@@ -247,7 +256,7 @@ const BookingDetails = () => {
                 height: 2,
                 backgroundColor:
                   currentStep >= index + 1
-                    ? "greenyellow"
+                    ? `${accentColour}`
                     : isDark
                       ? "#333"
                       : "#E0E0E0",
@@ -422,7 +431,7 @@ const BookingDetails = () => {
             <TouchableOpacity
               onPress={addAttendee}
               style={{
-                backgroundColor: "greenyellow",
+                backgroundColor: `${accentColour}`,
                 width: 40,
                 height: 40,
                 borderRadius: 12,
@@ -488,7 +497,7 @@ const BookingDetails = () => {
           <TouchableOpacity onPress={() => onSubmit()}>
             <Text
               style={{
-                color: "greenyellow",
+                color: `${accentColour}`,
                 textAlign: "center",
                 marginTop: 10,
               }}

diff --git a/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx b/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx
@@ -78,6 +78,15 @@ const OfficeDetails = () => {
     return dates;
   };
   const upcomingDates = getUpcomingDates();
+  const [accentColour, setAccentColour] = useState<string>('greenyellow');
+
+  useEffect(() => {
+    const getAccentColour = async () => {
+      let accentcolour = await SecureStore.getItemAsync('accentColour');
+      setAccentColour(accentcolour);
+    };
+    getAccentColour();
+  }, []);
 
   useEffect(() => {
     const getCurrentRoom = async () => {
@@ -175,7 +184,7 @@ const OfficeDetails = () => {
               ))}
             </Animated.ScrollView>
             <View style={styles.pageIndicator}>
-              <PageIndicator count={pages.length} color={"yellowgreen"} current={animatedCurrent} />
+              <PageIndicator count={pages.length} color={accentColour} current={animatedCurrent} />
             </View>
           </View>
         </View>