Skip to content

Commit c2f2008

Browse files
jasminegurujasmineguru
authored
Merge pull request #54 from utmgdsc/feature/80/uitweaks
Feature/80/uitweaks
2 parents 1641949 + f919e97 commit c2f2008

20 files changed

Lines changed: 656 additions & 324 deletions

‎frontend/src/APIs/FLASK_API.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import axios from 'axios';
22
import firebaseService from '../utilities/firebase';
3-
const FLASK_LOCAL_ADDRESS: string = 'http://10.0.0.95:6050';
3+
const FLASK_LOCAL_ADDRESS: string = 'http://192.168.2.12:6050';
44

55
// Function to get the Firebase authentication token
66
const getFirebaseAuthToken = async (): Promise<string | null> => {

‎frontend/src/components/appNavigation.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ const AppNavigation = (): JSX.Element => {
4444
<NavigationContainer>
4545
<Stack.Navigator>
4646
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false, gestureEnabled: false }} />
47-
<Stack.Screen name="LogIn" component={LogInScreen} options={{ headerShown: false, gestureEnabled: false }} />
48-
<Stack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false, gestureEnabled: false }}/>
47+
<Stack.Screen name="LogIn" component={LogInScreen} options={{ headerShown: false }} />
48+
<Stack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false }}/>
4949
<Stack.Screen name="Settings" component={SettingsScreen} />
5050
<Stack.Screen name="MainApp" component={MainAppTabs} options={{ headerShown: false, gestureEnabled: false }} />
5151
<Stack.Screen name="Forum" component={Forum} />

‎frontend/src/components/expProgressBar.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ const ExpProgressBar: React.FC<ExpProgressBarProps> = ({ thisUser }) => {
3434

3535
const styles = StyleSheet.create({
3636
container: {
37-
width: 250,
37+
top: 10,
38+
width: 300,
3839
marginVertical: 4,
3940
},
4041
progressBar: {

‎frontend/src/components/modalInfo.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React from 'react';
2+
import { View, Text, Modal, Pressable, StyleSheet, Linking } from 'react-native';
3+
import Colors from '../../assets/colorConstants';
4+
import { MaterialCommunityIcons } from '@expo/vector-icons';
5+
6+
7+
interface ModalInfoProps {
8+
modalVisible: boolean;
9+
hideModal: () => void;
10+
}
11+
const handleOpenURL = ():void => {
12+
Linking.openURL('https://www.canada.ca/en/environment-climate-change/services/environmental-indicators/global-greenhouse-gas-emissions.html')
13+
.catch(error => console.error('Failed to open URL', error));
14+
};
15+
16+
const ModalInfo: React.FC<ModalInfoProps> = ({ modalVisible, hideModal }) => {
17+
return (
18+
<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={hideModal}>
19+
<View style={styles.modalContainer}>
20+
<View style={styles.modalContent}>
21+
<Text style={styles.heading}> 💡Fact: </Text>
22+
<Text style={styles.modalText}>
23+
Government of Canada (2020) reports the average Canadian carbon footprint is 17.8t t CO₂ per year,
24+
(~343.2 kg CO₂/week).
25+
</Text>
26+
<Text style={styles.modalText}>
27+
Keep in mind Canadians have the SECOND HIGHEST ‼️ carbon footpirnt in the world.
28+
</Text>
29+
<Text style={styles.modalText}> How do you compare? </Text>
30+
<Text onPress={handleOpenURL} style={styles.link}>
31+
Read More
32+
<MaterialCommunityIcons name="open-in-new" size={14} color={Colors.LIGHTGREENBACK} />
33+
</Text>
34+
<Pressable style={styles.closeButton} onPress={hideModal}>
35+
<Text style={styles.closeButtonText}>Close</Text>
36+
</Pressable>
37+
</View>
38+
</View>
39+
</Modal>
40+
);
41+
};
42+
43+
const styles = StyleSheet.create({
44+
modalContainer: {
45+
flex: 1,
46+
justifyContent: 'center',
47+
alignItems: 'center',
48+
},
49+
modalContent: {
50+
backgroundColor: Colors.TRANSGREENLOGOUT,
51+
padding: 20,
52+
borderRadius: 10,
53+
width: '80%',
54+
},
55+
modalText: {
56+
color: Colors.WHITE,
57+
fontSize: 14,
58+
marginBottom: 10,
59+
fontWeight: '500'
60+
},
61+
closeButton: {
62+
backgroundColor: Colors.DARKGREEN,
63+
padding: 10,
64+
borderRadius: 5,
65+
alignSelf: 'flex-end',
66+
},
67+
closeButtonText: {
68+
color: Colors.WHITE,
69+
},
70+
heading:{
71+
fontSize: 24,
72+
color: Colors.WHITE,
73+
marginBottom: 15,
74+
fontWeight: '700'
75+
},
76+
link:{
77+
color: Colors.LIGHTGREENBACK,
78+
fontSize: 14,
79+
marginBottom: 10,
80+
fontWeight: '500',
81+
marginTop: 10,
82+
}
83+
});
84+
85+
export default ModalInfo;

‎frontend/src/screens/Energy/energyEntryEdit.tsx‎

Lines changed: 84 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, TextInput } from 'react-native';
1+
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, TextInput,KeyboardAvoidingView, Platform } from 'react-native';
22
import * as React from 'react';
33
import { useEffect, useState } from 'react';
44
import { type StackNavigationProp } from '@react-navigation/stack';
@@ -11,6 +11,8 @@ import { EnergyAPI } from '../../APIs/EnergyAPI';
1111
import { type EnergyEntry } from '../../models/Energy';
1212
import { UsersAPI } from '../../APIs/UsersAPI';
1313
import { type User } from '../../models/User';
14+
import Ionicons from '@expo/vector-icons/Ionicons';
15+
1416

1517
export type StackNavigation = StackNavigationProp<RootStackParamList>;
1618

@@ -68,55 +70,67 @@ export default function EnergyEntryEdit(): JSX.Element {
6870
}
6971

7072
return (
71-
<SafeAreaView style={styles.container}>
72-
<ScrollView style={styles.scrollContainer}>
73-
<Text style={styles.header}>Calculate your emissions from energy:</Text>
74-
75-
<View style={styles.questionContainer}>
76-
<Text style={styles.question}>What is your monthly electricity consumption, in kWh:</Text>
77-
<TextInput
78-
style={styles.input}
79-
keyboardType="numeric"
80-
placeholder={String(energyEntry?.electricity)}
81-
onChangeText={(text) => {
82-
setElectricityUsage(Number(text));
83-
}}
84-
/>
85-
</View>
86-
87-
<View style={styles.questionContainer}>
88-
<Text style={styles.question}>
89-
What is your monthly natural gas consumption, in {'m\u00B3'}:
90-
</Text>
91-
<TextInput
92-
style={styles.input}
93-
keyboardType="numeric"
94-
placeholder={String(energyEntry?.natural_gas)}
95-
onChangeText={(text) => {
96-
setNaturalGasUsage(Number(text));
97-
}}
98-
/>
99-
</View>
100-
101-
<View style={styles.questionContainer}>
102-
<Text style={styles.question}>
103-
What is your monthly heating oil consumption, in litres:
104-
</Text>
105-
<TextInput
106-
style={styles.input}
107-
keyboardType="numeric"
108-
placeholder={String(energyEntry?.heating_oil)}
109-
onChangeText={(text) => {
110-
setHeatingOilUsage(Number(text));
111-
}}
112-
/>
113-
</View>
114-
115-
<TouchableOpacity style={styles.buttoning} onPress={handleSurveySubmit}>
116-
<Text style={styles.buttoningText}>Save</Text>
117-
</TouchableOpacity>
118-
</ScrollView>
119-
</SafeAreaView>
73+
<KeyboardAvoidingView
74+
behavior={Platform.OS === "ios" ? "padding" : "height"}
75+
style={styles.container}
76+
>
77+
<SafeAreaView style={styles.container}>
78+
<ScrollView style={styles.scrollContainer}>
79+
<View style={styles.headerContainer}>
80+
<TouchableOpacity style={styles.backButton} onPress={() => navigation.goBack()}>
81+
<Ionicons name="arrow-back" size={30} color={Colors.DARKDARKGREEN} />
82+
<Text style={styles.buttonText}> Your Forms </Text>
83+
</TouchableOpacity>
84+
<Text style={styles.header}>Calculate Your Energy Emissions!</Text>
85+
<Text style={styles.note}>Tip💡: Check your monthly bill to find your usage or email your landlord, they should have the information you need. </Text>
86+
</View>
87+
88+
<View style={styles.questionContainer}>
89+
<Text style={styles.question}>What is your monthly electricity consumption, in kWh:</Text>
90+
<TextInput
91+
style={styles.input}
92+
keyboardType="numeric"
93+
placeholder={String(energyEntry?.electricity)}
94+
onChangeText={(text) => {
95+
setElectricityUsage(Number(text));
96+
}}
97+
/>
98+
</View>
99+
100+
<View style={styles.questionContainer}>
101+
<Text style={styles.question}>
102+
What is your monthly natural gas consumption, in {'m\u00B3'}:
103+
</Text>
104+
<TextInput
105+
style={styles.input}
106+
keyboardType="numeric"
107+
placeholder={String(energyEntry?.natural_gas)}
108+
onChangeText={(text) => {
109+
setNaturalGasUsage(Number(text));
110+
}}
111+
/>
112+
</View>
113+
114+
<View style={styles.questionContainer}>
115+
<Text style={styles.question}>
116+
What is your monthly heating oil consumption, in litres:
117+
</Text>
118+
<TextInput
119+
style={styles.input}
120+
keyboardType="numeric"
121+
placeholder={String(energyEntry?.heating_oil)}
122+
onChangeText={(text) => {
123+
setHeatingOilUsage(Number(text));
124+
}}
125+
/>
126+
</View>
127+
128+
<TouchableOpacity style={styles.buttoning} onPress={handleSurveySubmit}>
129+
<Text style={styles.buttoningText}>Save</Text>
130+
</TouchableOpacity>
131+
</ScrollView>
132+
</SafeAreaView>
133+
</KeyboardAvoidingView>
120134
);
121135
}
122136

@@ -134,10 +148,8 @@ const styles = StyleSheet.create({
134148
},
135149
header: {
136150
color: Colors.DARKGREEN,
137-
fontFamily: 'Montserrat',
138-
fontSize: 25,
151+
fontSize: 36,
139152
fontWeight: '700',
140-
marginBottom: 50,
141153
},
142154
input: {
143155
borderWidth: 1,
@@ -148,7 +160,6 @@ const styles = StyleSheet.create({
148160
backgroundColor: Colors.WHITE,
149161
},
150162
question: {
151-
fontFamily: 'Montserrat',
152163
fontSize: 20,
153164
fontWeight: '700',
154165
color: Colors.DARKGREEN,
@@ -169,4 +180,23 @@ const styles = StyleSheet.create({
169180
questionContainer: {
170181
paddingBottom: 30,
171182
},
183+
headerContainer:{
184+
top: 20,
185+
marginBottom: 40
186+
},
187+
backButton: {
188+
alignItems: 'center',
189+
flexDirection: 'row',
190+
},
191+
buttonText: {
192+
color: Colors.DARKDARKGREEN,
193+
fontSize: 16,
194+
fontWeight: '700',
195+
},
196+
note:{
197+
fontSize: 16,
198+
fontWeight: '500',
199+
marginTop: 10,
200+
color: Colors.LIGHTBLACK
201+
},
172202
});

0 commit comments

Comments
 (0)