From 71319eb1e0cf71459d033d67444fcf34cc15f425 Mon Sep 17 00:00:00 2001
From: katyhonguyen <katynguyen@berkeley.edu>
Date: Wed, 11 Dec 2024 10:38:47 -0800
Subject: [PATCH] updated tree search

---
 App.tsx                               |  2 +-
 src/icons/Back.tsx                    | 21 +++++++++++++++++++++
 src/icons/CallBig.tsx                 | 18 ++++++++++++++++++
 src/icons/Scanner.tsx                 |  6 +++---
 src/screens/Contact/styles.ts         |  1 +
 src/screens/TreeSearch/TreeSearch.tsx | 17 ++++++++++-------
 src/screens/TreeSearch/styles.ts      | 18 +++++++++---------
 7 files changed, 63 insertions(+), 20 deletions(-)
 create mode 100644 src/icons/Back.tsx
 create mode 100644 src/icons/CallBig.tsx

diff --git a/App.tsx b/App.tsx
index 592d50e..f24936d 100644
--- a/App.tsx
+++ b/App.tsx
@@ -26,7 +26,7 @@ const App = () => {
         />
       </LoginStack.Navigator> */}
 
-      <RootStack.Navigator initialRouteName="Contact">
+      <RootStack.Navigator initialRouteName="TreeSearch">
         <RootStack.Screen
           name="Home"
           component={HomeScreen}
diff --git a/src/icons/Back.tsx b/src/icons/Back.tsx
new file mode 100644
index 0000000..42542f0
--- /dev/null
+++ b/src/icons/Back.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgBack = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={18}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.5}
+      d="M7.442 14.69 1.33 8.087m0 0 6.113-6.603M1.33 8.087H16"
+    />
+  </svg>
+);
+export default SvgBack;
diff --git a/src/icons/CallBig.tsx b/src/icons/CallBig.tsx
new file mode 100644
index 0000000..cc6f586
--- /dev/null
+++ b/src/icons/CallBig.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+
+const SvgCallBig = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={56}
+    height={55}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#446127"
+      d="M51.263 42.008c0 .816-.186 1.654-.583 2.47a9.3 9.3 0 0 1-1.587 2.31c-1.143 1.225-2.403 2.108-3.827 2.675-1.4.566-2.916.86-4.55.86-2.38 0-4.923-.543-7.606-1.653s-5.367-2.606-8.027-4.487a66.6 66.6 0 0 1-7.653-6.345 65 65 0 0 1-6.51-7.41c-1.913-2.582-3.453-5.166-4.573-7.726q-1.68-3.875-1.68-7.41c0-1.54.28-3.013.84-4.373.56-1.382 1.446-2.651 2.683-3.784 1.493-1.428 3.127-2.13 4.853-2.13.654 0 1.307.136 1.89.408a3.8 3.8 0 0 1 1.564 1.269l5.413 7.41c.42.566.723 1.087.933 1.585.21.476.327.952.327 1.383 0 .544-.164 1.087-.49 1.609-.303.52-.747 1.064-1.307 1.608l-1.773 1.79c-.257.25-.373.544-.373.907a2 2 0 0 0 .07.521c.07.181.14.317.186.453.42.748 1.143 1.722 2.17 2.9a78 78 0 0 0 3.384 3.58c1.26 1.202 2.473 2.312 3.71 3.332 1.213.997 2.216 1.677 3.01 2.084.116.046.256.114.42.182.186.068.373.09.583.09.397 0 .7-.136.957-.385l1.773-1.7c.583-.566 1.143-.996 1.68-1.268.536-.318 1.073-.476 1.657-.476.443 0 .91.09 1.423.294s1.05.499 1.633.884l7.723 5.325c.607.408 1.027.884 1.284 1.45.233.567.373 1.133.373 1.768"
+    />
+  </svg>
+);
+export default SvgCallBig;
diff --git a/src/icons/Scanner.tsx b/src/icons/Scanner.tsx
index 62ca8ed..0b5b587 100644
--- a/src/icons/Scanner.tsx
+++ b/src/icons/Scanner.tsx
@@ -6,15 +6,15 @@ const SvgScanBarcode = (props: any) => (
     xmlns="http://www.w3.org/2000/svg"
     width={37}
     height={37}
-    fill="none"
+    fill="#446127"
     {...props}
   >
     <Path
-      fill="#fff"
+      fill="#446127"
       d="M3.083 15.031a1.165 1.165 0 0 1-1.156-1.156v-3.854c0-4.471 3.638-8.094 8.094-8.094h3.854c.632 0 1.156.524 1.156 1.156s-.524 1.157-1.156 1.157H10.02a5.783 5.783 0 0 0-5.782 5.78v3.855c0 .632-.524 1.156-1.156 1.156M33.917 15.031a1.165 1.165 0 0 1-1.157-1.156v-3.854a5.783 5.783 0 0 0-5.78-5.781h-3.855a1.165 1.165 0 0 1-1.156-1.157c0-.632.524-1.156 1.156-1.156h3.854c4.456 0 8.094 3.623 8.094 8.094v3.854c0 .632-.524 1.156-1.156 1.156M26.98 35.073h-2.313a1.165 1.165 0 0 1-1.157-1.156c0-.632.525-1.157 1.157-1.157h2.312a5.783 5.783 0 0 0 5.782-5.78v-2.313c0-.632.524-1.157 1.156-1.157s1.156.525 1.156 1.157v2.312c0 4.471-3.638 8.094-8.094 8.094M13.875 35.073H10.02c-4.456 0-8.094-3.623-8.094-8.094v-3.854c0-.632.524-1.156 1.156-1.156s1.156.524 1.156 1.156v3.854a5.783 5.783 0 0 0 5.782 5.781h3.854c.632 0 1.156.525 1.156 1.157s-.524 1.156-1.156 1.156"
     />
     <Path
-      fill="#fff"
+      fill="#446127"
       d="M13.875 8.094h-3.083c-1.758 0-2.698.925-2.698 2.698v3.083c0 1.773.94 2.698 2.698 2.698h3.083c1.758 0 2.698-.925 2.698-2.698v-3.083c0-1.773-.94-2.698-2.698-2.698M26.208 8.094h-3.083c-1.758 0-2.698.925-2.698 2.698v3.083c0 1.773.94 2.698 2.698 2.698h3.083c1.758 0 2.698-.925 2.698-2.698v-3.083c0-1.773-.94-2.698-2.698-2.698M13.875 20.427h-3.083c-1.758 0-2.698.925-2.698 2.698v3.083c0 1.773.94 2.698 2.698 2.698h3.083c1.758 0 2.698-.925 2.698-2.698v-3.083c0-1.773-.94-2.698-2.698-2.698M26.208 20.427h-3.083c-1.758 0-2.698.925-2.698 2.698v3.083c0 1.773.94 2.698 2.698 2.698h3.083c1.758 0 2.698-.925 2.698-2.698v-3.083c0-1.773-.94-2.698-2.698-2.698"
     />
   </Svg>
diff --git a/src/screens/Contact/styles.ts b/src/screens/Contact/styles.ts
index 5a6e3c7..5e56673 100644
--- a/src/screens/Contact/styles.ts
+++ b/src/screens/Contact/styles.ts
@@ -134,6 +134,7 @@ export const styles = StyleSheet.create({
   directoryHeader: {
     alignItems: 'center',
     justifyContent: 'center',
+    paddingBottom: 40,
   },
 
   backButton: {
diff --git a/src/screens/TreeSearch/TreeSearch.tsx b/src/screens/TreeSearch/TreeSearch.tsx
index 88ce165..02f1697 100644
--- a/src/screens/TreeSearch/TreeSearch.tsx
+++ b/src/screens/TreeSearch/TreeSearch.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, ImageBackground, Text, View } from 'react-native';
+import { FlatList, ImageBackground, Pressable, Text, View } from 'react-native';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import QrCodeScanner from '@/components/QRCodeScanner/QRCodeScanner';
 import Scanner from '@/icons/Scanner';
 import { RootStackParamList } from '@/types/navigation';
 import SearchBar from '../../components/searchBar';
 import { supabase } from '../../supabase/client';
+import TreeInfo from '../TreeInfo/TreeInfo';
 import { styles } from './styles';
 
 type TreeSearchProps = NativeStackScreenProps<RootStackParamList, 'TreeSearch'>;
@@ -79,7 +80,12 @@ export default function TreeSearch({ navigation }: TreeSearchProps) {
   );
 
   const renderTreeCard = ({ item }: { item: TreeItem }) => (
-    <View style={styles.treeCard}>
+    <Pressable
+      onPress={() =>
+        navigation.navigate('TreeInfoPage', { treeId: item.tree_id.toString() })
+      }
+      style={styles.treeCard}
+    >
       <ImageBackground
         source={{
           uri: item.image_link || 'https://example.com/placeholder.jpg',
@@ -90,17 +96,14 @@ export default function TreeSearch({ navigation }: TreeSearchProps) {
         {item.species}
       </Text>
       <Text style={styles.treeStock}>{item.stockCount} in stock</Text>
-    </View>
+    </Pressable>
   );
 
   return (
     <>
       <View style={styles.headingContainer}>
         <Text style={styles.searchHeading}>Trees Inventory</Text>
-        <Scanner
-          style={styles.scannerIcon}
-          onPress={() => navigation.navigate('QRCodeScanner')}
-        />
+        <Scanner onPress={() => navigation.navigate('QRCodeScanner')} />
       </View>
       <SearchBar value={searchQuery} onChange={setSearchQuery} />
 
diff --git a/src/screens/TreeSearch/styles.ts b/src/screens/TreeSearch/styles.ts
index f4456f9..8d2e1b9 100644
--- a/src/screens/TreeSearch/styles.ts
+++ b/src/screens/TreeSearch/styles.ts
@@ -15,15 +15,15 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
   },
 
-  scannerIcon: {
-    height: 53,
-    width: 53,
-    borderRadius: 26.5,
-    backgroundColor: colors.primary_green,
-    justifyContent: 'center',
-    padding: 10,
-    alignItems: 'center',
-  },
+  // scannerIcon: {
+  //   height: 53,
+  //   width: 53,
+  //   borderRadius: 26.5,
+  //   backgroundColor: colors.primary_green,
+  //   justifyContent: 'center',
+  //   padding: 10,
+  //   alignItems: 'center',
+  // },
 
   // Search Component