Commit 68a70a85 authored by Pramodh Rajapakse's avatar Pramodh Rajapakse

stake item added to auction detail page

parent 8023f066
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import themeColors from '../assets/colors';
export const AppStakeItem = (props) => {
return(
<View style={styles.stake}>
<View style={styles.stakeWrapperEdges}/>
<View style={styles.stakeSideEdges}>
<View style={styles.circleTop}/>
<View style={styles.dashedLine}/>
<View style={styles.dashedLine}/>
<View style={styles.dashedLine}/>
<View style={styles.dashedLine}/>
<View style={styles.circleEnd}/>
</View>
<View style={styles.stakeDetailsContent}>
<View>
<View style={styles.lotTile}>
<Text style={styles.lotText}>62</Text>
</View>
</View>
<View style={styles.lotDetails}>
<Text style={styles.lotName}>William Grey</Text>
<Text style={styles.label}>Rs. 164.00</Text>
</View>
</View>
<View style={styles.stakeSideEdges}>
<View style={styles.circleTop}/>
<View style={styles.dashedLine}/>
<View style={styles.dashedLine}/>
<View style={styles.dashedLine}/>
<View style={styles.dashedLine}/>
<View style={styles.circleEnd}/>
</View>
<View style={styles.stakeWrapperEdges}/>
</View>
)
}
const styles = StyleSheet.create({
stake:{
alignItems: "center",
fontSize: 16,
flexDirection: 'row',
marginVertical: 10,
borderRadius: 10,
backgroundColor: themeColors.PRIMARY_COLOR,
},
label: {
fontSize: 22,
color: themeColors.WHITE
},
stakeWrapperEdges: {
width: 20,
},
stakeSideEdges: {
width: 20,
height: '100%',
justifyContent: 'space-between',
},
circleTop: {
height:14,
borderBottomLeftRadius: 100,
borderBottomEndRadius: 100,
backgroundColor: themeColors.WHITE
},
circleEnd: {
height:14,
borderTopEndRadius: 100,
borderTopStartRadius: 100,
backgroundColor: themeColors.WHITE
},
dashedLine: {
height: '10%',
width: 5,
alignSelf: 'center',
backgroundColor: 'white'
},
stakeDetailsContent: {
flex: 1,
flexDirection: 'row',
padding: 30
},
lotTile: {
marginRight: 15,
borderRadius: 10,
padding: 5,
backgroundColor: themeColors.WHITE
},
lotText: {
fontSize: 20,
color: themeColors.BLACK
},
lotName: {
fontSize: 16,
color: themeColors.WHITE,
marginBottom: 5
},
});
...@@ -15,7 +15,7 @@ const styles = StyleSheet.create({ ...@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
padding: 20, padding: 20,
fontSize: 16, fontSize: 16,
backgroundColor: themeColors.TERTIARY_COLOR, backgroundColor: themeColors.PRIMARY_COLOR,
borderRadius: 20, borderRadius: 20,
shadowColor: 'rgba(0,0,0, .4)', shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 2, width: 1 }, shadowOffset: { height: 2, width: 1 },
......
...@@ -134,7 +134,7 @@ const styles = StyleSheet.create({ ...@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
image: { image: {
flex: 1, flex: 1,
width : deviceWidth, width : deviceWidth,
borderBottomStartRadius: 20, borderBottomStartRadius: 40,
borderBottomEndRadius: 20 borderBottomEndRadius: 40
} }
}) })
\ No newline at end of file
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// Import React and Component // Import React and Component
import React from 'react'; import React from 'react';
import {View, StyleSheet, Text, ScrollView} from 'react-native'; import {View, StyleSheet, Text, ScrollView} from 'react-native';
import { AppAuctionItem } from '../components/auction_item.component'; import { AppStakeItem } from '../components/auction.stake.component';
import { AppContainer } from '../container/container'; import { AppContainer } from '../container/container';
import themeColors from '../assets/colors'; import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab'; import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
...@@ -18,19 +18,17 @@ const AuctionDetailScreen = (props, {navigation}) => { ...@@ -18,19 +18,17 @@ const AuctionDetailScreen = (props, {navigation}) => {
</View> </View>
<View style={styles.container}> <View style={styles.container}>
<AppContainer> <AppContainer>
<View> <View style={styles.titleContent}>
<Text style={styles.auctionHeading}>Title</Text> <Text style={styles.auctionHeading}>Title</Text>
<View> <View style={styles.lotContainer}>
<Text style={styles.auctionHeading}>Lot No : </Text> <Text style={styles.auctionText}>Lot No : </Text>
<View style={styles.lot}><Text style={styles.lotText}>17839</Text></View>
</View> </View>
</View> </View>
<Text style={styles.auctionHeading}>Last Stakes</Text> <Text style={styles.auctionText}>Last Stakes</Text>
<ScrollView> <ScrollView horizontal>
<View> <View style={styles.stakesContainer}>
<AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/> <AppStakeItem/>
<AppAuctionItem label='Auction Item 2'/>
<AppAuctionItem label='Auction Item 3'/>
<AppAuctionItem label='Auction Item 4'/>
</View> </View>
</ScrollView> </ScrollView>
</AppContainer> </AppContainer>
...@@ -53,21 +51,38 @@ const styles = StyleSheet.create({ ...@@ -53,21 +51,38 @@ const styles = StyleSheet.create({
header: { header: {
height: '35%', height: '35%',
marginBottom: 25, marginBottom: 25,
backgroundColor : themeColors.PRIMARY_COLOR, backgroundColor : themeColors.WHITE
borderBottomStartRadius: 20,
borderBottomEndRadius: 20,
},
btnRowContainer: {
maxHeight: 100
},
contentContainer: {
flex: 1,
flexDirection: 'row',
margin: 20
}, },
auctionHeading: { auctionHeading: {
fontSize: 24, fontSize: 24,
fontWeight: 'bold', fontWeight: 'bold',
color: themeColors.SECONDARY_COLOR color: themeColors.PRIMARY_COLOR
},
lotContainer: {
flexDirection: 'row',
justifyContent: 'space-between'
},
auctionText: {
marginTop: 10,
fontSize: 16,
fontWeight: '400',
color: themeColors.PRIMARY_COLOR
},
lotText: {
fontSize: 16,
fontWeight: '400',
color: themeColors.WHITE
},
lot: {
backgroundColor : themeColors.PRIMARY_COLOR,
borderRadius : 50,
justifyContent: 'center',
alignContent: 'center',
paddingVertical: 8,
paddingHorizontal: 20
},
stakesContainer: {
height: 125,
flexDirection: 'row'
} }
}) })
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment