thesn/volana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign Order Detail

Browse Source
This commit is contained in:
thesn10
2026-07-03 13:14:26 +02:00
parent 21acab57c6
commit 4e44bf8bbf
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/src/app/orders/[id].tsx
View File

@@ -7,6 +7,9 @@ import { ORDERS } from "@/data/mock";
import { orderStatusInfo } from "@/lib/status"; import { orderStatusInfo } from "@/lib/status";
import { AppHeader } from "@/components/AppHeader"; import { AppHeader } from "@/components/AppHeader";
import { StatusChip } from "@/components/StatusChip"; import { StatusChip } from "@/components/StatusChip";
import { MonoText } from "@/components/MonoText";
import { PageContainer } from "@/components/PageContainer";
import { MICRO_LABEL_CLASS } from "@/lib/typography";
const STEP_LABELS = ["Payment\nHeld", "Seller\nConfirms", "You Confirm\nReceipt"] as const; const STEP_LABELS = ["Payment\nHeld", "Seller\nConfirms", "You Confirm\nReceipt"] as const;
@@ -39,16 +42,16 @@ export default function OrderDetailScreen(): JSX.Element {
return ( return (
<ScrollView className="flex-1 bg-background"> <ScrollView className="flex-1 bg-background">
<AppHeader title="Order Detail" /> <AppHeader title="Order Detail" />
<View className="gap-5 p-4 md:mx-auto md:w-full md:max-w-2xl md:p-8"> <PageContainer className="gap-5 py-4 lg:py-8">
<View className="flex-row items-start justify-between gap-3 rounded-xl border border-border bg-surface p-4"> <View className="flex-row items-start justify-between gap-3 rounded-xl border border-border bg-surface p-4">
<View className="flex-1 gap-1"> <View className="flex-1 gap-1">
<Typography type="body-xs" color="muted"> <Typography type="body-xs" color="muted">
Order placed {order.date} Order placed {order.date}
</Typography> </Typography>
<Typography type="h6">{order.name}</Typography> <Typography type="h6">{order.name}</Typography>
<Typography type="body-xs" color="muted"> <MonoText type="body-xs" color="muted">
{order.seller} {order.seller}
</Typography> </MonoText>
</View> </View>
<View className="items-end gap-1.5"> <View className="items-end gap-1.5">
<Typography type="h6">{order.amt}</Typography> <Typography type="h6">{order.amt}</Typography>
@@ -57,9 +60,7 @@ export default function OrderDetailScreen(): JSX.Element {
</View> </View>
<View className="gap-4 rounded-xl border border-border bg-surface p-4"> <View className="gap-4 rounded-xl border border-border bg-surface p-4">
<Typography type="body-xs" color="muted"> <Typography className={MICRO_LABEL_CLASS}>Order Progress</Typography>
Order Progress
</Typography>
<View className="flex-row items-start"> <View className="flex-row items-start">
{STEP_LABELS.map((label, index) => { {STEP_LABELS.map((label, index) => {
const done = index < activeStepIndex || (index === activeStepIndex && step3Done); const done = index < activeStepIndex || (index === activeStepIndex && step3Done);
@@ -115,7 +116,7 @@ export default function OrderDetailScreen(): JSX.Element {
<Button.Label>View Listing →</Button.Label> <Button.Label>View Listing →</Button.Label>
</Button> </Button>
</View> </View>
</View> </PageContainer>
</ScrollView> </ScrollView>
); );
} }