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

Fix/mobile/dimensions #132

Merged
merged 2 commits into from
Jul 2, 2024
Merged

Fix/mobile/dimensions #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6310cd5
dashboard dimensions adjusted for tests
KamogeloMoeketse Jul 2, 2024
4dd7aca
Android dimensions
KamogeloMoeketse Jul 2, 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
34 changes: 17 additions & 17 deletions frontend/occupi-mobile4/screens/Dashboard/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { StatusBar, useColorScheme } from 'react-native';
import { StatusBar, useColorScheme, Dimensions } from 'react-native';
import Navbar from '../../components/NavBar';
import {
Text,
Expand Down Expand Up @@ -71,41 +71,41 @@ const Dashboard = () => {
const cardBackgroundColor = isDarkMode ? '#2C2C2E' : '#F3F3F3';

return (
<View pt="16" px="4" flex={1} flexDirection="column" backgroundColor={backgroundColor}>
<View pt="$16" px="$4" flex={1} flexDirection="column" backgroundColor={backgroundColor}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<View flexDirection="row" justifyContent="space-between">
<View>
<Text fontSize={wp('5%')} fontWeight="light" color={textColor}>
Hi Sabrina 👋
</Text>
<Text mt="4" fontSize={wp('6%')} fontWeight="bold" color={textColor}>
<Text mt="$4" fontSize={wp('6%')} fontWeight="bold" color={textColor}>
Welcome to Occupi
</Text>
</View>
<Image
alt="logo"
p="10"
p="$10"
source={require('../../screens/Login/assets/images/Occupi/file.png')}
style={{ width: wp('8%'), height: wp('8%'), flexDirection: 'column', tintColor: isDarkMode ? 'white' : 'black' }}
/>
</View>
<Card size="lg" variant="elevated" mt="4" w="full" h={hp('15%')} backgroundColor={cardBackgroundColor} borderRadius="xl" />
<View display="flex" flexDirection="row" rowGap="4" mt="1" justifyContent="space-between">
<Card flexDirection="row" justifyContent="center" alignItems="center" variant="elevated" mt="4" style={{ width: wp('45%'), height: hp('12%') }} backgroundColor={cardBackgroundColor} borderRadius="xl" >
<Text color={textColor} fontSize="5xl">{numbers[0]}</Text>
<Card size="lg" variant="elevated" mt="$4" w="$full" h={hp('15%')} backgroundColor={cardBackgroundColor} borderRadius={10} />
<View display="flex" flexDirection="row" mt="$1" justifyContent="space-between">
<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>
</Card>
<Card size="lg" variant="elevated" mt="4" style={{ width: wp('45%'), height: hp('12%') }} backgroundColor={cardBackgroundColor} borderRadius="xl" />
<Card size="lg" variant="elevated" mt="$4" style={{ width: wp('43%'), height: hp('12%') }} backgroundColor={cardBackgroundColor} borderRadius={10} />
</View>
<View flexDirection="row" justifyContent="flex-end" mt="6" mb="4" h="8" alignItems="center">
<View flexDirection="row" justifyContent="flex-end" mt="$6" mb="$4" h="$8" alignItems="center">
{checkedIn ? (
<Button w={wp('36%')} borderRadius="md" backgroundColor="lightblue" onPress={checkIn}>
<Button w={wp('36%')} borderRadius={10} backgroundColor="lightblue" onPress={checkIn}>
<ButtonText color="dimgrey">Check out</ButtonText>
</Button>
) : (
<Button w={wp('36%')} borderRadius="md" backgroundColor="greenyellow" onPress={checkIn}>
<Button w={wp('36%')} borderRadius={10} backgroundColor="greenyellow" onPress={checkIn}>
<ButtonText color="dimgrey">Check in</ButtonText>
</Button>
)}
Expand Down Expand Up @@ -147,20 +147,20 @@ const Dashboard = () => {
}
]
}}
width={370} // from react-native
width={Dimensions.get("window").width -30} // from react-native
height={220}
// yAxisLabel=""
// yAxisSuffix="k"
yAxisInterval={1} // optional, defaults to 1
chartConfig={{
backgroundColor: "white",
// backgroundGradientFrom: "yellowgreen",
// backgroundGradientTo: "cyan",
backgroundGradientFrom: "yellowgreen",
backgroundGradientTo: "cyan",
decimalPlaces: 0, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
borderRadius: 20
},
propsForDots: {
r: "0",
Expand All @@ -171,7 +171,7 @@ const Dashboard = () => {
bezier
style={{
marginVertical: 8,
borderRadius: 20
borderRadius: 16,
}}
/>
</View>
Expand Down
2 changes: 1 addition & 1 deletion frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default function SplashScreen() {
useEffect(() => {
const timer = setTimeout(() => {
setSelectedIndex(1); // Assuming Onboarding1 is at index 1
router.replace('/login'); // Navigate to Onboarding1 screen
router.replace('/home'); // Navigate to Onboarding1 screen
}, 5000); // 8 seconds

return () => clearTimeout(timer); // Clean up timer on component unmount
Expand Down
Loading