Resolve "Add Category Modal"

components/budget/customColorPicker.tsx

@@ -0,0 +1,51 @@
+import { StyleSheet } from "react-native";
+import ColorPicker, { BrightnessSlider, HueSlider, Preview, SaturationSlider, } from "reanimated-color-picker";
+
+export type CustomColorPickerProperties = {
+    currentColor?: string | null,
+    handleColorChange: (color: string) => void | undefined,
+}
+
+const CustomColorPicker = (properties: CustomColorPickerProperties) => {
+    return (
+        <ColorPicker
+        value={properties.currentColor ?? generateRandomColor()}
+        onChange={(color) => {
+            properties.handleColorChange(color["hex"])
+        }}
+        style={styles.colorPickerStyle}
+        sliderThickness={30}
+        thumbSize={40}
+        thumbShape= "circle">
+            <Preview
+                style={[styles.previewStyle]}
+                textStyle={{ fontSize: 18 }}
+                colorFormat="hex"
+                hideInitialColor/>
+
+            <HueSlider style={[styles.sliderStyle]}/>
+            <BrightnessSlider style={[styles.sliderStyle]}/>
+            <SaturationSlider style={[styles.sliderStyle]}/>
+      </ColorPicker>
+    );
+}
+
+const generateRandomColor = (): string => {
+    return '#' + Math.floor(Math.random()*16777215).toString(16);
+}
+
+export default CustomColorPicker;
+
+const styles = StyleSheet.create({
+    colorPickerStyle: {
+        justifyContent: 'center',
+    },
+    sliderStyle: {
+        margin: 10,
+    },
+    previewStyle: {
+        margin: 10,
+        height: 50,
+        borderRadius: 10,
+    }
+  });

components/budget/typeSelectorSwitch.tsx

@@ -0,0 +1,53 @@
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useTheme } from "../../app/contexts/ThemeContext";
+
+export type TypeSelectorSwitchProperties = {
+    handleButtonPress: (type: string) => void,
+    currentSelected: string,
+}
+
+const TypeSelectorSwitch = (properties: TypeSelectorSwitchProperties) => {
+    const {colors} = useTheme();
+
+    return (
+        <View style={styles.containerStyle}>
+            <TouchableOpacity 
+            onPress={() => {
+                properties.handleButtonPress("expense");
+            }}
+            style={[styles.touchableOpacityStyle, properties.currentSelected == "expense" ? {backgroundColor: colors.accentColor} : {backgroundColor: colors.elementDefaultColor}]
+            }>
+                <Text style={[styles.textStyle, {color: colors.primaryText}]}>Expenses</Text>
+            </TouchableOpacity>
+            <TouchableOpacity 
+            onPress={() => {
+                properties.handleButtonPress("saving");
+            }}
+            style={[styles.touchableOpacityStyle, properties.currentSelected == "saving" ? {backgroundColor: colors.accentColor} : {backgroundColor: colors.elementDefaultColor}]
+            }>
+                <Text style={[styles.textStyle, {color: colors.primaryText}]}>Savings</Text>
+            </TouchableOpacity>
+        </View>
+    );
+} 
+
+export default TypeSelectorSwitch;
+
+const styles = StyleSheet.create({
+    containerStyle: {
+        flexDirection: "row",
+        justifyContent: "center",
+    },
+    touchableOpacityStyle: {
+        flex: 1,
+        marginHorizontal: 10,
+        borderRadius: 10,
+    },
+    textStyle: {
+        paddingHorizontal: 10,
+        fontSize: 25,
+        textAlign: "center",
+        paddingVertical: 5,
+    }
+});