Add qr screen

calblueprint · Dec 8, 2024 · 600aa82 · 600aa82
1 parent 45860ec
commit 600aa82
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 9 deletions.
diff --git a/Group 58.svg b/Group 58.svg
diff --git a/flash-circle.svg b/flash-circle.svg
diff --git a/src/components/QRCodeScanner/QRCodeScanner.tsx b/src/components/QRCodeScanner/QRCodeScanner.tsx
@@ -6,6 +6,9 @@ import {
   useCameraPermissions,
 } from 'expo-camera';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import SvgFlash from '@/icons/Flash';
+import SvgFlashCircle from '@/icons/FlashCircle';
+import SvgXButton from '@/icons/XButton';
 import { HomeStackParamList } from '@/types/navigation';
 import styles from './styles';
 
@@ -58,10 +61,10 @@ export default function QRCodeScanner({ navigation }: QRCodeScannerProps) {
     <SafeAreaView style={styles.container}>
       <View style={styles.iconFlex}>
         <TouchableOpacity onPress={() => setFlashEnabled(!flashEnabled)}>
-          <Text style={styles.icon}>Flash</Text>
+          <SvgFlashCircle />
         </TouchableOpacity>
         <TouchableOpacity onPress={() => navigation.goBack()}>
-          <Text style={styles.icon}>X</Text>
+          <SvgXButton />
         </TouchableOpacity>
       </View>
 

diff --git a/src/components/QRCodeScanner/styles.ts b/src/components/QRCodeScanner/styles.ts
@@ -14,7 +14,7 @@ export default StyleSheet.create({
   iconFlex: {
     flex: 0,
     width: '100%',
-    paddingHorizontal: 44,
+    paddingHorizontal: 27,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },

diff --git a/src/icons/BackArrow.tsx b/src/icons/BackArrow.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Svg, { Circle, Path, SvgProps } from 'react-native-svg';
+
+const SvgBackArrow = (props: SvgProps) => (
+  <Svg width={34} height={34} fill="none" {...props}>
+    <Circle
+      cx={16.665}
+      cy={17.087}
+      r={16.665}
+      fill="#446127"
+      fillOpacity={0.5}
+    />
+    <Path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.5}
+      d="M15.442 23.69 9.33 17.087m0 0 6.113-6.603M9.33 17.087H24"
+    />
+  </Svg>
+);
+export default SvgBackArrow;
diff --git a/src/icons/FlashCircle.tsx b/src/icons/FlashCircle.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Svg, { G, Path, SvgProps } from 'react-native-svg';
+
+const SvgFlashCircle = (props: SvgProps) => (
+  <Svg width={41} height={40} fill="none" {...props}>
+    <G fill="#fff">
+      <Path
+        d="M20.331 36.667c9.205 0 16.667-7.462 16.667-16.667S29.536 3.333 20.33 3.333C11.127 3.333 3.665 10.795 3.665 20s7.462 16.667 16.666 16.667"
+        opacity={0.4}
+      />
+      <Path d="M25.798 18.833h-2.833v-6.6c0-1.533-.834-1.85-1.85-.7l-.734.834-6.2 7.05c-.85.966-.5 1.75.784 1.75h2.833v6.6c0 1.533.833 1.85 1.85.7l.733-.834 6.2-7.05c.85-.966.5-1.75-.783-1.75" />
+    </G>
+  </Svg>
+);
+export default SvgFlashCircle;
diff --git a/src/icons/ScanBarcode.tsx b/src/icons/ScanBarcode.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Svg, { G, Path, SvgProps } from 'react-native-svg';
+
+const SvgScanBarcode = (props: SvgProps) => (
+  <Svg width={37} height={37} fill="none" {...props}>
+    <G fill="#fff">
+      <Path 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.157h-3.854a5.783 5.783 0 0 0-5.781 5.78v3.855c0 .632-.525 1.156-1.157 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.781-5.78v-2.313c0-.632.525-1.157 1.157-1.157s1.156.525 1.156 1.157v2.312c0 4.471-3.638 8.094-8.094 8.094M13.875 35.073h-3.854c-4.456 0-8.094-3.623-8.094-8.094v-3.854c0-.632.524-1.156 1.156-1.156s1.157.524 1.157 1.156v3.854a5.783 5.783 0 0 0 5.78 5.781h3.855c.632 0 1.156.525 1.156 1.157s-.524 1.156-1.156 1.156" />
+      <Path 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" />
+    </G>
+  </Svg>
+);
+export default SvgScanBarcode;
diff --git a/src/icons/XButton.tsx b/src/icons/XButton.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Svg, { Circle, G, Path, SvgProps } from 'react-native-svg';
+
+const SvgXButton = (props: SvgProps) => (
+  <Svg width={35} height={34} fill="none" {...props}>
+    <Circle cx={17.383} cy={16.998} r={16.665} fill="#fff" fillOpacity={0.5} />
+    <G stroke="#fff" strokeLinecap="round" strokeWidth={2.5}>
+      <Path d="m12.401 12.347 9.964 9.303M12.4 21.65l9.965-9.303" />
+    </G>
+  </Svg>
+);
+export default SvgXButton;
diff --git a/src/screens/SpeciesInfo/SpeciesInfo.tsx b/src/screens/SpeciesInfo/SpeciesInfo.tsx
@@ -7,15 +7,14 @@ import {
   Text,
   View,
 } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import TreeBg from '@/../assets/tree-info-bg.png';
 import SpeciesDisplay from '@/components/SpeciesDisplay/SpeciesDisplay';
-import ToggleSwitch from '@/components/ToggleSwitch/ToggleSwitch';
-import TreeDisplay from '@/components/TreeDisplay/TreeDisplay';
-import TreeEdit from '@/components/TreeEdit/TreeEdit';
+import SvgBackArrow from '@/icons/BackArrow';
+import SvgScanBarcode from '@/icons/ScanBarcode';
 import colors from '@/styles/colors';
 import { getAllTreesForSpecies, getSpecies } from '@/supabase/queries/species';
-import { getTreeInfo } from '@/supabase/queries/trees';
 import { HomeStackParamList } from '@/types/navigation';
 import { Species } from '@/types/species';
 import { Tree } from '@/types/tree';
@@ -26,7 +25,10 @@ type SpeciesInfoScreenProps = NativeStackScreenProps<
   'SpeciesInfo'
 >;
 
-export default function SpeciesInfoScreen({ route }: SpeciesInfoScreenProps) {
+export default function SpeciesInfoScreen({
+  route,
+  navigation,
+}: SpeciesInfoScreenProps) {
   const speciesName = route.params?.speciesName ?? 'California Buckwheat';
   const [speciesData, setSpeciesData] = useState<Partial<Species>>({
     name: speciesName,
@@ -58,6 +60,16 @@ export default function SpeciesInfoScreen({ route }: SpeciesInfoScreenProps) {
             source={treeBgImage ? { uri: treeBgImage } : TreeBg}
             style={styles.imageBg}
           >
+            <View style={styles.topBar}>
+              <TouchableOpacity>
+                <SvgBackArrow />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => navigation.push('QRCodeScanner')}
+              >
+                <SvgScanBarcode />
+              </TouchableOpacity>
+            </View>
             <View style={styles.imageEmbed}>
               <View style={styles.countPill}>
                 <Text style={styles.idText}>{treeData.length} left</Text>

diff --git a/src/screens/SpeciesInfo/styles.ts b/src/screens/SpeciesInfo/styles.ts
@@ -6,6 +6,13 @@ export default StyleSheet.create({
     paddingBottom: 40,
     backgroundColor: colors.white,
   },
+  topBar: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: 40,
+    marginHorizontal: 27,
+    justifyContent: 'space-between',
+  },
   imageBg: {
     flex: 1,
     height: 292,
@@ -73,7 +80,7 @@ export default StyleSheet.create({
   // Main body
   body: {
     paddingHorizontal: 42,
-    paddingTop: 20,
+    paddingTop: 64,
     marginBottom: 10,
     marginTop: -16,
     borderRadius: 20,