Skip to content

updated progressscreen #7

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

Open
wants to merge 10 commits into
base: dev
Choose a base branch
from
Open

updated progressscreen #7

Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a8bcda1
updated progressscreen
Abhiriat Oct 9, 2024
4896247
updated progress-screen
Abhiriat Oct 15, 2024
49c56f9
updated progress-screen
Abhiriat Oct 15, 2024
523a876
updated progress-screen
Abhiriat Oct 15, 2024
8386e5c
Merge branch 'dev' into progress-screen
simarjot0032 Oct 19, 2024
61084ee
updated progress-screen
Abhiriat Oct 26, 2024
708acd8
updated progress-screen
Abhiriat Oct 26, 2024
6f2cf19
updated progress-screen
Abhiriat Oct 26, 2024
735f406
updated progress-screen
Abhiriat Oct 27, 2024
8a63357
updated progress-screen
Abhiriat Oct 27, 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
181 changes: 83 additions & 98 deletions App/screen/Progress-screen.js
View file
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Get data from props
  • Font size
  • Line height
  • The padding of the content container is not right
  • color for the skreak label is not proper
  • gradient of a button is not proper
  • The drop shadow for the continue button is missing

Original file line number Diff line number Diff line change
@@ -1,122 +1,110 @@
import React,{useState,useEffect} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ImageBackground, Image } from 'react-native';
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ImageBackground, Image, Platform } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import * as Font from 'expo-font';



const Progressscreen = () => {
const Progressscreen = ({
currentAng,
completionPercentage,
daysElapsed,
averageAngPerDay,
estimatedCompletionDate,
streaks
}) => {
const [isFontLoaded, setIsFontLoaded] = useState(false);

useEffect(() => {
async function loadFont() {
await Font.loadAsync({
'BalooPaaji2-Bold': require('../assets/fonts/BalooPaaji2-Bold.ttf'),
'BalooPaaji2-Regular': require('../assets/fonts/BalooPaaji2-Regular.ttf'),
'brandon-grotesque-regular-italic-58a8a456c4724':require('../assets/fonts/brandon-grotesque-regular-italic-58a8a456c4724.ttf'),
});
'brandon-grotesque-regular-italic-58a8a456c4724': require('../assets/fonts/brandon-grotesque-regular-italic-58a8a456c4724.ttf'),
});
setIsFontLoaded(true);
}

loadFont();
}, []);
const currentAng = 745;
const completionPercentage = 54;
const daysElapsed = 42;
const averageAngPerDay = 4;
const estimatedCompletionDate = '24th Jan, 2025';
const streaks = ['complete', 'complete', 'half', 'complete', 'complete', 'complete', 'incomplete','complete', 'complete', 'half', 'complete', 'complete', 'complete', 'incomplete','complete', 'complete', 'half', 'complete', 'complete', 'complete', 'incomplete','complete', 'complete', 'half', 'complete', 'complete', 'complete', 'incomplete','complete', 'complete', 'half', 'complete', 'complete', 'complete', 'incomplete','complete', 'complete', 'half', 'complete', 'complete', 'complete', 'incomplete'];

return (
<View style={styles.container}>
<View style={styles.container}>
<ImageBackground
source={require('../assets/image2.png')}
style={styles.backgroundImage}
>
<View style={styles.contentContainer}>

<View style={styles.header}>
<TouchableOpacity style={styles.backLinkContainer}>
<Image
source={require('../assets/Arrow1.png')}
style={styles.backArrowIcon}
/>
<Text style={styles.backLink}>See all paths</Text>
</TouchableOpacity>
</View>
<View style={styles.contentContainer}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

increase the given padding around 35 to 50

<View style={styles.header}>
<TouchableOpacity style={styles.backLinkContainer}>
<Image
source={require('../assets/Arrow1.png')}
style={styles.backArrowIcon}
/>
<Text style={styles.backLink}>See all paths</Text>
</TouchableOpacity>
</View>

<Text style={[styles.title, isFontLoaded && { fontFamily: 'brandon-grotesque-regular-italic-58a8a456c4724' }]}>Sehaj #14</Text>
<Text style={[styles.subText, isFontLoaded && { fontFamily: 'BalooPaaji2-Bold' }]}>
ਵਾਹਿਗੁਰੂ ਜੀ ਕਾ ਖਾਲਸਾ ॥ ਵਾਹਿਗੁਰੂ ਜੀ ਕੀ ਫਤਿਹ ॥ 🙏
</Text>


<Text style={[styles.title, isFontLoaded && { fontFamily: 'brandon-grotesque-regular-italic-58a8a456c4724' }]}>Sehaj #14</Text>
<Text style={[styles.subText, isFontLoaded && { fontFamily: 'BalooPaaji2-Bold' }]}>
ਵਾਹਿਗੁਰੂ ਜੀ ਕਾ ਖਾਲਸਾ ॥ ਵਾਹਿਗੁਰੂ ਜੀ ਕੀ ਫਤਿਹ ॥ 🙏
</Text>

<Text style={[styles.progressText,isFontLoaded && { fontFamily: 'BalooPaaji2-Regular' }]}>
You are on ang number <Text style={styles.highlightBox}>{currentAng}</Text> and have completed{' '}
<Text style={styles.highlightBox}>{completionPercentage}%</Text> of your Sri Sehaj Path.🎉
</Text>
<Text style={[styles.detailsText,isFontLoaded && { fontFamily: 'BalooPaaji2-Regular' }]}>
You started this path <Text style={styles.highlight}>{daysElapsed} days ago.</Text>
{'\n'}You average about <Text style={styles.highlight}>{averageAngPerDay} angs a day.{' '}</Text>
With your current speed, you will complete this Sehaj Path on{' '}
<Text style={styles.highlight}>{estimatedCompletionDate}.</Text> 🎯
</Text>
<Text style={[styles.progressText, isFontLoaded && { fontFamily: 'BalooPaaji2-Regular' }]}>
You are on ang number <Text style={styles.highlightBox}>{currentAng || 0}</Text> and have completed{' '}
<Text style={styles.highlightBox}>{completionPercentage || 0}%</Text> of your Sri Sehaj Path.🎉
</Text>
<Text style={[styles.detailsText, isFontLoaded && { fontFamily: 'BalooPaaji2-Regular' }]}>
You started this path <Text style={styles.highlight}>{daysElapsed || 0} days ago.</Text>
{'\n'}You average about <Text style={styles.highlight}>{averageAngPerDay || 0} angs a day.{' '}</Text>
With your current speed, you will complete this Sehaj Path on{' '}
<Text style={styles.highlight}>{estimatedCompletionDate || 'N/A'}</Text> 🎯
</Text>


<Text style={styles.streakLabel}>Here’s your streak chart so far: ⚡</Text>
<View style={styles.streakChart}>
{streaks.map((streak, index) => (
<View
key={index}
style={[styles.streakBlock, { backgroundColor: streak === 'complete' ? '#00376b' : streak === 'half' ? '#11336A9E' : '#7D7D7D3B' }]}
/>
))}
</View>
<TouchableOpacity style={styles.continueButton}>
<LinearGradient
colors={['#00164d', '#0047ab']}
style={styles.buttonContent}
>
<Image
source={require('../assets/play.png')}
style={styles.playIcon}
/>
<Text style={styles.continueButtonText}>Continue</Text>
</LinearGradient>
</TouchableOpacity>
</View>
</ImageBackground>
<Text style={[styles.streakLabel,isFontLoaded && { fontFamily: 'BalooPaaji2-Regular' }]}>Here’s your streak chart so far: ⚡</Text>
<View style={styles.streakChart}>
{(streaks || []).map((streak, index) => (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the logic for steaks is not proper how we will pass how many blocks to made

<View
key={index}
style={[
styles.streakBlock,
{
backgroundColor: streak === 'complete'
? '#11336A'
: streak === 'half'
? '#11336A9E'
: '#7D7D7D3B',
},
]}
/>
))}
</View>

<TouchableOpacity style={styles.continueButton}>
<LinearGradient
colors={['#11336A', '#0D2346']}
style={[styles.buttonContent, styles.buttonShadow]}
>
<Image
source={require('../assets/play.png')}
style={styles.playIcon}
/>
<Text style={styles.continueButtonText}>Continue</Text>
</LinearGradient>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
width:'100%',

},

linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},

backgroundImage: {
flex: 1,
resizeMode: 'cover',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add width 100%

justifyContent: 'center',
alignItems: 'center',

},
headercontainer:{
width:'100%',
marginTop:30,
display:'flex',

alignItems:'center',
},
contentContainer: {
flex: 1,
@@ -135,36 +123,33 @@ const styles = StyleSheet.create({
backArrowIcon: {
width: 26,
height: 20,
marginRight: 12, },
marginRight: 12,
},
backLink: {
fontSize: 18,
color: '#11336A',
textDecorationLine: 'none',
},
title: {
fontSize: 32,
fontSize: 48,
fontWeight: 'bold',
marginVertical: 20,
color: '#00376b',
fontFamily:''
},
subText: {
fontSize: 18,
fontSize: 16,
color: '#11336A',
marginBottom: 20,
},
progressText: {
fontSize: 24,
marginBottom: 10,
lineHeight: 42,

lineHeight: 42.5,
color:'#999999'

},
highlight: {
fontWeight: 'bold',
color: '#00376b',

},
highlightBox: {
fontWeight: 'bold',
@@ -173,20 +158,17 @@ const styles = StyleSheet.create({
paddingRight:6,
borderRadius: 19,
color: '#00376b',

},
detailsText: {
fontSize: 18,
fontSize: 16,
color: '#999999',
marginBottom: 20,
lineHeight: 28,


},
streakLabel: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 10,
color:'#999999'
},
streakChart: {
flexDirection: 'row',
@@ -204,7 +186,6 @@ const styles = StyleSheet.create({
borderRadius: 16,
alignItems:'flex-start',
width: '100%',

},
buttonContent: {
flexDirection: 'row',
@@ -222,8 +203,12 @@ const styles = StyleSheet.create({
fontSize: 18,
color: '#fff',
fontWeight: 'bold',

},
buttonShadow: {
android: {
elevation: 10,
},
},
});

export default Progressscreen;