Removing unnecessary Views
This commit is contained in:
parent
c2d173a4ba
commit
6eff2b311f
@ -3,7 +3,15 @@ import {StyleSheet} from "react-native";
|
||||
const styles = StyleSheet.create({
|
||||
//StatusPage
|
||||
container: { flex: 1, alignItems: "stretch" },
|
||||
listContainer: { flex: 1, width: "100%", backgroundColor: 'transparent' },
|
||||
listContainer: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
backgroundColor: 'transparent',
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
//alignItems: "flex-start", // Aligns subheaders properly
|
||||
paddingHorizontal: 10, // Adds some spacing
|
||||
},
|
||||
listSubheader: {
|
||||
fontFamily: "Medium",
|
||||
fontSize: 18, // Larger text
|
||||
@ -12,20 +20,16 @@ const styles = StyleSheet.create({
|
||||
marginBottom: 10, // Add spacing below
|
||||
zIndex: 0,
|
||||
},
|
||||
listWrapper: { flex: 1, padding: 5 },
|
||||
listRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start", // Aligns subheaders properly
|
||||
paddingHorizontal: 10, // Adds some spacing
|
||||
},
|
||||
//listWrapper: { flex: 1, padding: 5 },
|
||||
listColumn: { flex: 1, paddingHorizontal: 5, zIndex: 1},
|
||||
buttonContainer: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignSelf: "stretch",
|
||||
verticalAlign: "bottom",
|
||||
paddingHorizontal: 10,
|
||||
paddingBottom: 20,
|
||||
marginHorizontal: 5,
|
||||
},
|
||||
actionButton: {
|
||||
flex: 1,
|
||||
|
@ -167,76 +167,62 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
|
||||
|
||||
return (
|
||||
<View style={[styles.container, isProfileActive && { display: 'none' }]}>
|
||||
<View style={styles.listContainer}>
|
||||
<View style={styles.listRow}>
|
||||
<View style={styles.listColumn}>
|
||||
<List.Section>
|
||||
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>On the Way</List.Subheader>
|
||||
{messages.filter(msg => msg.Status === "On the Way")
|
||||
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
|
||||
.map(item => (
|
||||
<View key={item.Id} style={[styles.card,
|
||||
{ backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
|
||||
<List.Item
|
||||
key={item.Id}
|
||||
title={item.Name}
|
||||
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
|
||||
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
|
||||
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
|
||||
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
</List.Section>
|
||||
</View>
|
||||
<View style={styles.listColumn}>
|
||||
<List.Section>
|
||||
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>Arrived</List.Subheader>
|
||||
{messages.filter(msg => msg.Status === "Arrived")
|
||||
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
|
||||
.map(item => (
|
||||
<View key={item.Id} style={[styles.card,
|
||||
{ backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
|
||||
<List.Item
|
||||
key={item.Id}
|
||||
title={item.Name}
|
||||
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
|
||||
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
|
||||
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
|
||||
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
</List.Section>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<ImageBackground source={require('../assets/images/bg.webp')} style={styles.imageBackground} />
|
||||
<View style={styles.listContainer}>
|
||||
<List.Section style={styles.listColumn}>
|
||||
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>On the Way</List.Subheader>
|
||||
{messages.filter(msg => msg.Status === "On the Way")
|
||||
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
|
||||
.map(item => (
|
||||
<List.Item
|
||||
key={item.Id}
|
||||
title={item.Name}
|
||||
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
|
||||
style={[styles.card, { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}
|
||||
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
|
||||
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
|
||||
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
|
||||
/>
|
||||
))}
|
||||
</List.Section>
|
||||
<List.Section style={styles.listColumn}>
|
||||
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>Arrived</List.Subheader>
|
||||
{messages.filter(msg => msg.Status === "Arrived")
|
||||
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
|
||||
.map(item => (
|
||||
<List.Item
|
||||
key={item.Id}
|
||||
title={item.Name}
|
||||
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
|
||||
style={[styles.card, { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}
|
||||
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
|
||||
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
|
||||
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
|
||||
/>
|
||||
))}
|
||||
</List.Section>
|
||||
</View>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Animated.View style={{ flex: 1 }}>
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={() => handleStatusPress("On the Way")}
|
||||
style={[
|
||||
styles.actionButton,
|
||||
{ backgroundColor: currentStatus === "On the Way" ? pulseColorOnTheWay : theme.colors.primaryContainer }
|
||||
]}
|
||||
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
|
||||
{getButtonLabel("On the Way")}
|
||||
</Button>
|
||||
</Animated.View>
|
||||
<Animated.View style={{ flex: 1 }}>
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={() => handleStatusPress("Arrived")}
|
||||
style={[
|
||||
styles.actionButton,
|
||||
{ backgroundColor: currentStatus === "Arrived" ? pulseColorArrived : theme.colors.primaryContainer }
|
||||
]}
|
||||
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
|
||||
{getButtonLabel("Arrived")}
|
||||
</Button>
|
||||
</Animated.View>
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={() => handleStatusPress("On the Way")}
|
||||
style={[
|
||||
styles.actionButton,
|
||||
{ backgroundColor: currentStatus === "On the Way" ? pulseColorOnTheWay : theme.colors.primaryContainer }
|
||||
]}
|
||||
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
|
||||
{getButtonLabel("On the Way")}
|
||||
</Button>
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={() => handleStatusPress("Arrived")}
|
||||
style={[
|
||||
styles.actionButton,
|
||||
{ backgroundColor: currentStatus === "Arrived" ? pulseColorArrived : theme.colors.primaryContainer }
|
||||
]}
|
||||
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
|
||||
{getButtonLabel("Arrived")}
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user