Skip to content

Commit

Permalink
d
Browse files Browse the repository at this point in the history
  • Loading branch information
jasmineguru committed Dec 17, 2023
1 parent 6407d00 commit 03b93a8
Show file tree
Hide file tree
Showing 9 changed files with 282 additions and 96 deletions.
4 changes: 2 additions & 2 deletions frontend/src/components/appNavigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ const AppNavigation = (): JSX.Element => {
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false, gestureEnabled: false }} />
<Stack.Screen name="LogIn" component={LogInScreen} options={{ headerShown: false, gestureEnabled: false }} />
<Stack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false, gestureEnabled: false }}/>
<Stack.Screen name="LogIn" component={LogInScreen} options={{ headerShown: false }} />
<Stack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false }}/>
<Stack.Screen name="Settings" component={SettingsScreen} />
<Stack.Screen name="MainApp" component={MainAppTabs} options={{ headerShown: false, gestureEnabled: false }} />
<Stack.Screen name="Forum" component={Forum} />
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/expProgressBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ const ExpProgressBar: React.FC<ExpProgressBarProps> = ({ thisUser }) => {

const styles = StyleSheet.create({
container: {
width: 250,
top: 10,
width: 300,
marginVertical: 4,
},
progressBar: {
Expand Down
85 changes: 85 additions & 0 deletions frontend/src/components/modalInfo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React from 'react';
import { View, Text, Modal, Pressable, StyleSheet, Linking } from 'react-native';
import Colors from '../../assets/colorConstants';
import { MaterialCommunityIcons } from '@expo/vector-icons';


interface ModalInfoProps {
modalVisible: boolean;
hideModal: () => void;
}
const handleOpenURL = ():void => {
Linking.openURL('https://www.canada.ca/en/environment-climate-change/services/environmental-indicators/global-greenhouse-gas-emissions.html')
.catch(error => console.error('Failed to open URL', error));
};

const ModalInfo: React.FC<ModalInfoProps> = ({ modalVisible, hideModal }) => {
return (
<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={hideModal}>
<View style={styles.modalContainer}>
<View style={styles.modalContent}>
<Text style={styles.heading}> 💡Fact: </Text>
<Text style={styles.modalText}>
Government of Canada (2020) reports the average Canadian carbon footprint is 17.8t t CO₂ per year,
(~343.2 kg CO₂/week).
</Text>
<Text style={styles.modalText}>
Keep in mind Canadians have the SECOND HIGHEST ‼️ carbon footpirnt in the world.
</Text>
<Text style={styles.modalText}> How do you compare? </Text>
<Text onPress={handleOpenURL} style={styles.link}>
Read More
<MaterialCommunityIcons name="open-in-new" size={14} color={Colors.LIGHTGREENBACK} />
</Text>
<Pressable style={styles.closeButton} onPress={hideModal}>
<Text style={styles.closeButtonText}>Close</Text>
</Pressable>
</View>
</View>
</Modal>
);
};

const styles = StyleSheet.create({
modalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalContent: {
backgroundColor: Colors.TRANSGREENLOGOUT,
padding: 20,
borderRadius: 10,
width: '80%',
},
modalText: {
color: Colors.WHITE,
fontSize: 14,
marginBottom: 10,
fontWeight: '500'
},
closeButton: {
backgroundColor: Colors.DARKGREEN,
padding: 10,
borderRadius: 5,
alignSelf: 'flex-end',
},
closeButtonText: {
color: Colors.WHITE,
},
heading:{
fontSize: 24,
color: Colors.WHITE,
marginBottom: 15,
fontWeight: '700'
},
link:{
color: Colors.LIGHTGREENBACK,
fontSize: 14,
marginBottom: 10,
fontWeight: '500',
marginTop: 10,
}
});

export default ModalInfo;
20 changes: 14 additions & 6 deletions frontend/src/screens/communityHub.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export default function DashBoardScreen(): JSX.Element {
nestedScrollEnabled
/>
</ScrollView>

<View style={styles.leaderBoardBottom}>
<Text style={[styles.item, styles.rankItem]}>{userRankMonthly.rank}</Text>
<Text ellipsizeMode="tail" numberOfLines={1} style={[styles.item, styles.nameItem]}>
Expand Down Expand Up @@ -213,7 +214,7 @@ export default function DashBoardScreen(): JSX.Element {
</View>
<View style={styles.leaderBoardWidgetContainer}>
<View style={styles.headerContainer}>
<Text style={styles.header}>Leaderboard</Text>
<Text style={styles.header2}>Leaderboard</Text>

<View style={styles.tabs}>
<TouchableOpacity
Expand Down Expand Up @@ -243,7 +244,7 @@ export default function DashBoardScreen(): JSX.Element {

<View style={styles.leaderBoardWidgetContainer}>
<View style={styles.headerContainer}>
<Text style={styles.header}>All Challenges:</Text>
<Text style={styles.header2}>All Challenges</Text>
<ScrollView style={styles.scrollChallengesContainer} horizontal>
<FlatList
data={data}
Expand Down Expand Up @@ -279,11 +280,17 @@ const styles = StyleSheet.create({
resizeMode: 'cover',
justifyContent: 'center',
},
header: {
header:{
fontSize: 36,
color: Colors.WHITE,
fontWeight: '700',
},
header2: {
fontSize: 24,
marginBottom: 20,
color: Colors.WHITE,
fontWeight: '700',
},
discription: {
paddingTop: 15,
fontSize: 16,
Expand All @@ -302,9 +309,9 @@ const styles = StyleSheet.create({
leaderBoardWidgetContainer: {
backgroundColor: Colors.DARKGREEN,
margin: 15,
borderRadius: 10,
borderRadius: 15,
height: 400,
width: 325,
width: 350,
alignSelf: 'center',
marginTop: 25,
// ios shadow
Expand All @@ -324,13 +331,14 @@ const styles = StyleSheet.create({
borderColor: Colors.LIGHTFGREEN,
},
leaderBoardBottom: {
flexDirection: 'row',
borderTopWidth: 1.5,
paddingBottom: 5,
marginBottom: 10,
marginTop: 10,
paddingTop: 5,
borderColor: Colors.TRANSGREENLOGOUT,
flexDirection: 'row',
justifyContent: 'space-between',
},
headerItem: {
flex: 1,
Expand Down
12 changes: 1 addition & 11 deletions frontend/src/screens/dashboard.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { ScrollView, View, StyleSheet, TouchableOpacity } from 'react-native';
import { ScrollView, View, StyleSheet } from 'react-native';
import { useFonts } from 'expo-font';
import Colors from '../../assets/colorConstants';

Expand All @@ -9,7 +9,6 @@ import ChallengesWidget from '../widgets/challengesWidgetBox';

import type { RootStackParamList } from '../components/types';
import type { StackNavigationProp } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';

import { type User } from '../models/User';
import { UsersAPI } from '../APIs/UsersAPI';
Expand All @@ -28,9 +27,6 @@ export default function DashBoardScreen(): JSX.Element {
const [foodEntry, setFoodEntry] = useState<FoodEntry>();
const [energyEntry, setEnergyEntry] = useState<EnergyEntry>();


const navigation = useNavigation<StackNavigation>();

const [loaded] = useFonts({
Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'),
Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'),
Expand Down Expand Up @@ -72,13 +68,7 @@ export default function DashBoardScreen(): JSX.Element {
/>
</View>
<View style={styles.widgetBoarder}>
<TouchableOpacity
onPress={() => {
navigation.navigate('FootprintDecomp');
}}
>
<CarbonWidgetBox carbonUser={user} />
</TouchableOpacity>
</View>
<View style={styles.profileWidgetContainer}>
<ChallengesWidget challenges={sampleChallenges}/>
Expand Down
85 changes: 41 additions & 44 deletions frontend/src/screens/footpringDecomp.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { useEffect, useState } from 'react';
import { ScrollView, View, StyleSheet, TouchableOpacity } from 'react-native';
import { ScrollView, View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { useFonts } from 'expo-font';
import Colors from '../../assets/colorConstants';
import WidgetBox from '../widgets/widgetBox';
import type { RootStackParamList } from '../components/types';
import type { StackNavigationProp } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
Expand All @@ -14,6 +13,7 @@ import { type FoodEntry } from '../models/Food';
import { type EnergyEntry } from '../models/Energy';
import { FoodAPI } from '../APIs/FoodAPI';
import { EnergyAPI } from '../APIs/EnergyAPI';
import { AntDesign, MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons';
export type StackNavigation = StackNavigationProp<RootStackParamList>;

export default function FootprintDecomp(): JSX.Element {
Expand Down Expand Up @@ -64,44 +64,24 @@ export default function FootprintDecomp(): JSX.Element {

return (
<ScrollView style={styles.container}>
<View style={styles.widgetContainer}>
<View style={styles.widgetBoarder}>
<TouchableOpacity
onPress={() => {
navigation.navigate('TransportationHistory');
}}
>
<WidgetBox
title="Transportatin"
content={Math.round(transportationEntry.carbon_emissions).toString()}
/>
</TouchableOpacity>
</View>
<View style={styles.buttonsContainer}>
<TouchableOpacity style={styles.buttons} onPress={() => {navigation.navigate('TransportationHistory');}}>
<AntDesign name="car" size={24} color={Colors.DARKDARKGREEN} style={styles.icon} />
<Text style={styles.labels}> Transportation </Text>
<AntDesign name="arrowright" size={24} color={Colors.DARKDARKGREEN} style={styles.nextButton}/>
</TouchableOpacity>

<View style={styles.widgetBoarder}>
<TouchableOpacity
onPress={() => {
navigation.navigate('FoodHistory');
}}
>
<WidgetBox title="Food" content={Math.round(foodEntry.carbon_emissions).toString()} />
</TouchableOpacity>
</View>
</View>
<TouchableOpacity style={styles.buttons} onPress={() => {navigation.navigate('FoodHistory');}}>
<MaterialCommunityIcons name="food-apple-outline" size={24} color={Colors.DARKDARKGREEN} style={styles.icon} />
<Text style={styles.labels}> Food </Text>
<AntDesign name="arrowright" size={24} color={Colors.DARKDARKGREEN} style={styles.nextButton}/>
</TouchableOpacity>

<View style={styles.widgetContainer}>
<View style={styles.widgetBoarder}>
<TouchableOpacity
onPress={() => {
navigation.navigate('EnergyHistory');
}}
>
<WidgetBox
title="Energy"
content={Math.round(energyEntry.carbon_emissions).toString()}
/>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.buttons} onPress={() => {navigation.navigate('EnergyHistory');}}>
<SimpleLineIcons name="energy" size={24} color={Colors.DARKDARKGREEN} style={styles.icon} />
<Text style={styles.labels}> Energy </Text>
<AntDesign name="arrowright" size={24} color={Colors.DARKDARKGREEN} style={styles.nextButton}/>
</TouchableOpacity>
</View>
</ScrollView>
);
Expand All @@ -112,12 +92,29 @@ const styles = StyleSheet.create({
backgroundColor: Colors.LIGHTFGREEN,
flexGrow: 1,
},
widgetContainer: {
flexDirection: 'row',
alignContent: 'center',
justifyContent: 'center',
buttonsContainer:{
alignItems: 'center',
},
widgetBoarder: {
padding: 10,
buttons:{
width: '85%',
height: 56,
borderRadius: 15,
backgroundColor: Colors.TRANSLIGHTGREEN2,
marginVertical: 10,
justifyContent: 'center',
},
labels:{
fontWeight: '600',
color: Colors.DARKDARKGREEN,
fontSize: 18,
marginLeft: '14%',
},
nextButton:{
position: 'absolute',
left: '85%',
},
icon:{
position: 'absolute',
left: '5%',
}
});
Loading

0 comments on commit 03b93a8

Please sign in to comment.