Redesign Orders list

app/src/app/(tabs)/orders.tsx

@@ -1,20 +1,21 @@
 import type { JSX } from "react";
-import { ScrollView, View } from "react-native";
+import { ScrollView } from "react-native";
 import { Typography } from "heroui-native";
 import { ORDERS } from "@/data/mock";
 import { OrderRow } from "@/components/OrderRow";
+import { PageContainer } from "@/components/PageContainer";
 
 export default function OrdersTab(): JSX.Element {
   return (
     <ScrollView className="flex-1 bg-background">
-      <View className="gap-2.5 p-4 md:mx-auto md:w-full md:max-w-2xl">
+      <PageContainer className="gap-2.5 py-4">
         <Typography type="h4" className="mb-1">
           My Orders
         </Typography>
         {ORDERS.map((order) => (
           <OrderRow key={order.id} order={order} />
         ))}
-      </View>
+      </PageContainer>
     </ScrollView>
   );
 }

app/src/components/OrderRow.tsx

@@ -1,10 +1,12 @@
 import type { JSX } from "react";
+import { useState } from "react";
 import { Pressable, View } from "react-native";
 import { useRouter } from "expo-router";
 import { Typography } from "heroui-native";
 import type { Order } from "@/data/mock";
 import { orderStatusInfo } from "@/lib/status";
 import { StatusChip } from "@/components/StatusChip";
+import { MonoText } from "@/components/MonoText";
 
 interface OrderRowProps {
   order: Order;
@@ -12,21 +14,26 @@ interface OrderRowProps {
 
 export function OrderRow({ order }: OrderRowProps): JSX.Element {
   const router = useRouter();
+  const [isHovered, setIsHovered] = useState(false);
   const status = orderStatusInfo(order.status);
 
   return (
     <Pressable
       onPress={() => router.push(`/orders/${order.id}`)}
-      className="flex-row items-center gap-3.5 rounded-xl border border-border bg-surface p-3.5"
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      className={`flex-row items-center gap-3.5 rounded-xl border bg-surface p-3.5 ${
+        isHovered ? "border-border-secondary" : "border-border"
+      }`}
     >
       <Typography className="text-2xl">{order.emoji}</Typography>
       <View className="flex-1 gap-0.5">
         <Typography type="body-sm" weight="semibold" numberOfLines={1}>
           {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-0.5">
         <Typography type="body-sm" weight="bold">