optimizations

components/ui/Button.tsx

@@ -1,24 +1,26 @@
 import { ReactNode } from "react";
-import { View, Text, GestureResponderEvent } from "react-native";
+import { View, GestureResponderEvent, StyleSheet } from "react-native";
 import { Button as PaperButton } from "react-native-paper";
 
+import { colors } from "@/constants/colors";
+
 interface ButtonProps {
   buttonColor?: string;
   buttonMode?: "outlined" | "contained";
   buttonTextColor?: string;
   onPress: (event: GestureResponderEvent) => void;
-  disabled: boolean;
+  disabled?: boolean;
   children: ReactNode;
   className?: string;
   icon?: string;
 }
 
 export const Button = ({
-  buttonColor = "#6750a4",
+  buttonColor = colors.primaryPurpleDark,
   buttonMode = "outlined",
   buttonTextColor = "white",
   onPress,
-  disabled,
+  disabled = false,
   children,
   className,
   icon,
@@ -33,14 +35,17 @@ export const Button = ({
         disabled={disabled}
         textColor={buttonTextColor}
         icon={icon}
-        style={{ borderRadius: 4, borderColor: "transparent" }}
+        style={styles.buttonStyle}
       >
-        {typeof children === "string" || typeof children === "number" ? (
-          <Text>{children}</Text>
-        ) : (
-          children
-        )}
+        {children}
       </PaperButton>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  buttonStyle: {
+    borderRadius: 4,
+    borderColor: "transparent",
+  },
+});

components/ui/CustomCheckbox.tsx

@@ -1,6 +1,8 @@
 import { TouchableOpacity, View } from "react-native";
 import { Text } from "react-native-paper";
 
+import { colors } from "@/constants/colors";
+
 interface CustomCheckboxProps {
   checked: boolean;
   onPress: () => void;
@@ -32,7 +34,7 @@ export const CustomCheckbox = ({
           borderRadius: 2,
           justifyContent: "center",
           alignItems: "center",
-          backgroundColor: checked ? "#6750a4" : "transparent",
+          backgroundColor: checked ? colors.primaryPurpleDark : "transparent",
         }}
       >
         {checked && (

components/ui/CustomPicker.tsx

@@ -2,6 +2,8 @@ import { View, StyleSheet } from "react-native";
 import { Picker, PickerProps } from "@react-native-picker/picker";
 import { Ionicons } from "@expo/vector-icons";
 
+import { colors } from "@/constants/colors";
+
 export const PickerItem = Picker.Item;
 
 interface CustomPickerProps extends PickerProps {
@@ -17,9 +19,7 @@ export const CustomPicker = ({
     <View style={styles.container}>
       <Picker
         selectedValue={selectedValue}
-        onValueChange={(itemValue, itemIndex) => {
-          onValueChange?.(itemValue, itemIndex);
-        }}
+        onValueChange={onValueChange}
         style={[styles.pickerStyle, { appearance: "none" } as any]}
       >
         {children}
@@ -27,7 +27,7 @@ export const CustomPicker = ({
       <Ionicons
         name="chevron-down"
         size={20}
-        color="#333"
+        color={colors.darkGray}
         style={styles.customIcon}
       />
     </View>

components/ui/SearchableDropdown.tsx

@@ -40,8 +40,8 @@ export const SearchableDropdown = ({
   const selectedIds = Array.isArray(selectedIdsProp)
     ? selectedIdsProp
     : selectedIdsProp
-    ? [selectedIdsProp]
-    : [];
+      ? [selectedIdsProp]
+      : [];
 
   const selectedItems = items.filter((item) => selectedIds.includes(item.id));
 
@@ -65,7 +65,7 @@ export const SearchableDropdown = ({
 
         // Filter to only keep items that are still selected
         return Array.from(itemsMap.values()).filter((item) =>
-          selectedIds.includes(item.id)
+          selectedIds.includes(item.id),
         );
       });
     }
@@ -163,7 +163,7 @@ export const SearchableDropdown = ({
           mode === "multi" ||
           isOpen) && (
           <TextInput
-            className={`border !mr-0 ${
+            className={`border mr-0! ${
               error ? "border-highRisk" : "border-gray-300"
             } rounded p-2 text-base bg-white`}
             value={searchQuery}