added margin

app/(tabs)/modes/text.tsx

@@ -1,4 +1,3 @@
-import ThemedHeader from "@/src/components/themed/ThemedHeader";
 import ThemedBackground from "@/src/components/themed/ThemedBackground";
 import {useState} from "react";
 import ThemedTextInput from "@/src/components/themed/ThemedTextInput";
@@ -6,6 +5,7 @@ import ThemedButton from "@/src/components/themed/ThemedButton";
 import {useAuth} from "@/src/context/AuthProvider";
 
 import CustomColorPicker from "@/src/components/themed/CustomColorPicker";
+import {View} from "react-native";
 
 export default function TextScreen() {
     const {authenticatedUser} = useAuth();
@@ -13,28 +13,31 @@ export default function TextScreen() {
 
     return (
         <ThemedBackground>
-            <ThemedHeader>
-                Text mode
-            </ThemedHeader>
-            {/* TextArea if I allow enough characters */}
-            <ThemedTextInput
-                label="Text"
-                returnKeyType="next"
-                value={textProps?.text}
-                onChangeText={(value: string) => {
-                    setTextProps(prev => ({
-                        ...prev!,
-                        text: value
-                    }));
-                }}
-                autoCapitalize="none"
-            />
+            <View style={{ padding: 20, gap: 10 }}> {/* Container für Input + Picker */}
+                <ThemedTextInput
+                    label="Text"
+                    returnKeyType="next"
+                    value={textProps?.text}
+                    onChangeText={(value: string) => {
+                        setTextProps(prev => ({
+                            ...prev!,
+                            text: value
+                        }));
+                    }}
+                    autoCapitalize="none"
+                />
 
-            <CustomColorPicker onSelect={rgb => console.log(rgb)} defaultColor={textProps!.color} />
+                <CustomColorPicker
+                    onSelect={rgb => setTextProps(prev => ({ ...prev!, color: rgb }))}
+                    defaultColor={textProps!.color}
+                />
+            </View>
 
-            <ThemedButton mode={"contained"} onPress={() => console.log(textProps)}>
-                Cooler Knopf
-            </ThemedButton>
+            <View style={{ paddingHorizontal: 20, marginTop: 20 }}>
+                <ThemedButton mode="contained" onPress={() => console.log(textProps)}>
+                    Cooler Knopf
+                </ThemedButton>
+            </View>
         </ThemedBackground>
     );
 }

src/components/themed/CustomColorPicker.tsx

@@ -55,11 +55,10 @@ export default function CustomColorPicker({defaultColor = [255, 255, 255], onSel
                             value={pickerHex}
                             onComplete={(color: ColorFormatsObject) => setPickerHex(color.hex)}
                         >
-                            <Preview/>
-                            <Panel1/>
-                            <HueSlider/>
-                            <View style={{height: 20}}/>
-                            <Swatches/>
+                            <Preview style={{ marginBottom: 15 }} />    {/* Abstand nach unten */}
+                            <Panel1 style={{ marginBottom: 15 }} />     {/* Abstand nach unten */}
+                            <HueSlider style={{ marginBottom: 15 }} />  {/* Abstand nach unten */}
+                            <Swatches style={{ marginTop: 10, marginBottom: 20 }} /> {/* Abstand nach oben und unten */}
                         </ColorPicker>
 
                         <View style={styles.buttonContainer}>