From b671b115ee72971f1c470f713550d1eaf4ec038e Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Wed, 2 Sep 2026 13:31:05 -0400
Subject: [PATCH] fix: present not-found link as primary action

---
 app/+not-found.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/+not-found.tsx b/app/+not-found.tsx
index 0282d9d..e9a7c2e 100644
--- a/app/+not-found.tsx
+++ b/app/+not-found.tsx
@@ -1,6 +1,6 @@
 import { Link, Stack } from 'expo-router';
 import { StyleSheet, Text, View } from 'react-native';
-import { spacing, useTheme } from '@/src/theme';
+import { radius, spacing, useTheme } from '@/src/theme';
 
 export default function NotFoundScreen() {
   const { colors } = useTheme();
@@ -9,7 +9,12 @@ export default function NotFoundScreen() {
       <Stack.Screen options={{ title: 'Not found' }} />
       <View style={[styles.container, { backgroundColor: colors.background }]}>
         <Text style={[styles.title, { color: colors.text }]}>This screen does not exist.</Text>
-        <Link href="/" style={[styles.link, { color: colors.primary }]}>
+        <Link
+          href="/"
+          accessibilityRole="button"
+          accessibilityLabel="Go to trails"
+          style={[styles.link, { backgroundColor: colors.primary, color: colors.textInverse }]}
+        >
           Go to trails
         </Link>
       </View>
@@ -20,5 +25,13 @@ export default function NotFoundScreen() {
 const styles = StyleSheet.create({
   container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: spacing.xl },
   title: { fontSize: 18, fontWeight: '600' },
-  link: { marginTop: spacing.lg, fontSize: 16 },
+  link: {
+    marginTop: spacing.lg,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.pill,
+    overflow: 'hidden',
+    fontSize: 16,
+    fontWeight: '700',
+  },
 });