From 4e44bf8bbff77d53ee7ae7e88b6c3f7054069669 Mon Sep 17 00:00:00 2001
From: thesn10 <38666407+thesn10@users.noreply.github.com>
Date: Fri, 3 Jul 2026 13:14:26 +0200
Subject: [PATCH] Redesign Order Detail

---
 app/src/app/orders/[id].tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/src/app/orders/[id].tsx b/app/src/app/orders/[id].tsx
index a53d18e..da6ef14 100644
--- a/app/src/app/orders/[id].tsx
+++ b/app/src/app/orders/[id].tsx
@@ -7,6 +7,9 @@ import { ORDERS } from "@/data/mock";
 import { orderStatusInfo } from "@/lib/status";
 import { AppHeader } from "@/components/AppHeader";
 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;
 
@@ -39,16 +42,16 @@ export default function OrderDetailScreen(): JSX.Element {
   return (
     <ScrollView className="flex-1 bg-background">
       <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-1 gap-1">
             <Typography type="body-xs" color="muted">
               Order placed {order.date}
             </Typography>
             <Typography type="h6">{order.name}</Typography>
-            <Typography type="body-xs" color="muted">
+            <MonoText type="body-xs" color="muted">
               {order.seller}
-            </Typography>
+            </MonoText>
           </View>
           <View className="items-end gap-1.5">
             <Typography type="h6">{order.amt}</Typography>
@@ -57,9 +60,7 @@ export default function OrderDetailScreen(): JSX.Element {
         </View>
 
         <View className="gap-4 rounded-xl border border-border bg-surface p-4">
-          <Typography type="body-xs" color="muted">
-            Order Progress
-          </Typography>
+          <Typography className={MICRO_LABEL_CLASS}>Order Progress</Typography>
           <View className="flex-row items-start">
             {STEP_LABELS.map((label, index) => {
               const done = index < activeStepIndex || (index === activeStepIndex && step3Done);
@@ -115,7 +116,7 @@ export default function OrderDetailScreen(): JSX.Element {
             <Button.Label>View Listing →</Button.Label>
           </Button>
         </View>
-      </View>
+      </PageContainer>
     </ScrollView>
   );
 }