Update icons

src/components/ToggleSwitch/ToggleSwitch.tsx

@@ -42,15 +42,15 @@ export default function ToggleSwitch({
     if (!trueLabelLayout || !falseLabelLayout) return;
 
     Animated.timing(translateAnimation, {
-      duration: 150,
+      duration: 100,
       toValue: value
         ? trueLabelLayout.x + trueLabelLayout.width / 2 - 2
         : falseLabelLayout.x + falseLabelLayout.width / 2 + 2,
       useNativeDriver: true,
     }).start();
 
     Animated.timing(scaleAnimation, {
-      duration: 150,
+      duration: 100,
       toValue: (value ? trueLabelLayout.width : falseLabelLayout.width) ?? 0,
       useNativeDriver: true,
     }).start();

src/components/TreeDisplay/TreeDisplay.tsx

@@ -2,6 +2,7 @@ import { Text, TextInput, View } from 'react-native';
 import SvgBear from '@/icons/Bear';
 import SvgDrop from '@/icons/Drop';
 import SvgFlash from '@/icons/Flash';
+import SvgFruit from '@/icons/Fruit';
 import SvgLeaf from '@/icons/Leaf';
 import Lightbulb from '@/icons/Lightbulb';
 import SvgLocationPin from '@/icons/Location';
@@ -90,11 +91,7 @@ export default function TreeDisplay({ treeData }: TreeDisplayProps) {
 
         {treeData.species?.fruit_type && (
           <View style={styles.property}>
-            {treeData.species.fruit_type === TreeFruitType.Dry ? (
-              <SvgNuts />
-            ) : (
-              <SvgDrop />
-            )}
+            <SvgFruit />
             <Text style={styles.propertyText}>
               {displayValue(treeData.species.fruit_type)} Fruit
             </Text>

src/icons/Bear.tsx

@@ -1,28 +1,30 @@
 import * as React from 'react';
-import Svg, { Circle, Path, SvgProps } from 'react-native-svg';
+import Svg, { Ellipse, Path, SvgProps } from 'react-native-svg';
 
 const SvgBear = (props: SvgProps) => (
-  <Svg width={37} height={33} fill="none" {...props}>
-    <Circle
-      cx={6.058}
-      cy={6.058}
-      r={6.058}
+  <Svg width={31} height={25} fill="none" {...props}>
+    <Ellipse
+      cx={5.402}
+      cy={5.264}
       fill="#446127"
-      transform="matrix(-1 0 0 1 33.991 3.759)"
+      rx={5.402}
+      ry={5.264}
+      transform="matrix(-1 0 0 1 29.303 .954)"
     />
-    <Circle cx={18.27} cy={18.05} r={11.719} fill="#9BA98C" />
-    <Circle
-      cx={6.058}
-      cy={6.058}
-      r={6.058}
+    <Ellipse cx={15.285} cy={13.372} fill="#9BA98C" rx={10.449} ry={10.182} />
+    <Ellipse
+      cx={5.402}
+      cy={5.264}
       fill="#9BA98C"
-      transform="matrix(-1 0 0 1 15.01 3.759)"
+      rx={5.402}
+      ry={5.264}
+      transform="matrix(-1 0 0 1 12.379 .954)"
     />
-    <Circle cx={23.32} cy={16.85} r={1.2} fill="#446127" />
-    <Circle cx={13.219} cy={16.849} r={1.199} fill="#446127" />
+    <Ellipse cx={19.788} cy={12.329} fill="#446127" rx={1.07} ry={1.043} />
+    <Ellipse cx={10.781} cy={12.328} fill="#446127" rx={1.069} ry={1.041} />
     <Path
       fill="#446127"
-      d="M17.763 22.232a.7.7 0 0 0 1.015 0l1.494-1.575a.7.7 0 0 0-.508-1.181h-2.987a.7.7 0 0 0-.508 1.181z"
+      d="M14.784 16.955a.7.7 0 0 0 1.003 0l1.126-1.156a.7.7 0 0 0-.502-1.189h-2.252a.7.7 0 0 0-.501 1.189z"
     />
   </Svg>
 );

src/icons/Fruit.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Svg, { G, Path, SvgProps } from 'react-native-svg';
+
+const SvgFruit = (props: SvgProps) => (
+  <Svg width={28} height={32} fill="none" {...props}>
+    <G strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}>
+      <Path
+        fill="#9BA98C"
+        stroke="#9BA98C"
+        d="M12.152 29.09c5.607 0 10.152-4.564 10.152-10.195 0-5.63-4.545-10.196-10.152-10.196S2 13.264 2 18.895s4.545 10.196 10.152 10.196"
+      />
+      <G fill="#A1AD96" stroke="#446127">
+        <Path d="M23.059 9.235c-1.736 1.927-6.035 2.026-6.035 2.026s-.335-4.306 1.4-6.234C20.16 3.1 24.46 3 24.46 3s.334 4.307-1.401 6.235" />
+        <Path d="M21.768 9.414c-2.053-.242-4.686 1.97-4.686 1.97s2.054 2.765 4.106 3.006c2.053.242 4.686-1.97 4.686-1.97s-2.054-2.764-4.106-3.006" />
+      </G>
+    </G>
+  </Svg>
+);
+export default SvgFruit;