Skip to content
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

Jump to bottom

Feat/mobile/appearance page #261

Merged
merged 6 commits into from
Aug 3, 2024
Merged

Feat/mobile/appearance page #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
36c90ce
appearance settings page created
KamogeloMoeketse Jul 12, 2024
cf00af8
Accent colour update
KamogeloMoeketse Jul 12, 2024
19d816e
update accent colours functionality
KamogeloMoeketse Jul 12, 2024
2210357
theme update
KamogeloMoeketse Jul 12, 2024
86ee975
theme changing update
KamogeloMoeketse Aug 3, 2024
093f032
Merge branch 'develop' into feat/mobile/appearance-page
KamogeloMoeketse Aug 3, 2024
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
1 change: 1 addition & 0 deletions frontend/occupi-mobile4/app/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }} />
Expand Down
7 changes: 7 additions & 0 deletions frontend/occupi-mobile4/app/set-appearance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Appearance from "../screens/Settings/Appearance";

export default function Home() {
return (
<Appearance />
);
}
17 changes: 13 additions & 4 deletions frontend/occupi-mobile4/screens/Booking/BookRoom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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>
)}
Expand Down Expand Up @@ -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} />
Expand Down Expand Up @@ -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} />
Expand Down
13 changes: 11 additions & 2 deletions frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect, useState, useCallback } from 'react';

Check warning on line 1 in frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx

View workflow job for this annotation

GitHub Actions / 🌸 Lint 

'useCallback' is defined but never used
import { ScrollView, useColorScheme, TouchableOpacity, RefreshControl, StyleSheet } from 'react-native';

Check warning on line 2 in frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx

View workflow job for this annotation

GitHub Actions / 🌸 Lint 

'StyleSheet' is defined but never used
import {
Icon, View, Text, Input, InputField, Image, Box, ChevronDownIcon, Toast, Stack,

Check warning on line 4 in frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx

View workflow job for this annotation

GitHub Actions / 🌸 Lint 

'Icon' is defined but never used

Check warning on line 4 in frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx

View workflow job for this annotation

GitHub Actions / 🌸 Lint 

'ChevronDownIcon' is defined but never used

Check warning on line 4 in frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx

View workflow job for this annotation

GitHub Actions / 🌸 Lint 

'Stack' is defined but never used
ToastTitle,
useToast,
} from '@gluestack-ui/themed';
Expand Down Expand Up @@ -62,6 +62,15 @@
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(() => {
Expand Down Expand Up @@ -262,11 +271,11 @@
</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>
)}
Expand Down
15 changes: 12 additions & 3 deletions frontend/occupi-mobile4/screens/Dashboard/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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 () => {
Expand Down Expand Up @@ -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} />
Expand All @@ -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>
)}
Expand Down
19 changes: 14 additions & 5 deletions frontend/occupi-mobile4/screens/Office/BookingDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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",
Expand All @@ -247,7 +256,7 @@ const BookingDetails = () => {
height: 2,
backgroundColor:
currentStep >= index + 1
? "greenyellow"
? `${accentColour}`
: isDark
? "#333"
: "#E0E0E0",
Expand Down Expand Up @@ -422,7 +431,7 @@ const BookingDetails = () => {
<TouchableOpacity
onPress={addAttendee}
style={{
backgroundColor: "greenyellow",
backgroundColor: `${accentColour}`,
width: 40,
height: 40,
borderRadius: 12,
Expand Down Expand Up @@ -488,7 +497,7 @@ const BookingDetails = () => {
<TouchableOpacity onPress={() => onSubmit()}>
<Text
style={{
color: "greenyellow",
color: `${accentColour}`,
textAlign: "center",
marginTop: 10,
}}
Expand Down
11 changes: 10 additions & 1 deletion frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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>
Expand Down
Loading
Loading