Redesign Orders list

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">