erweitert arrow

screens/Login.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { View, Text, ScrollView, Button, StyleSheet, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
+import { View, Text, ScrollView, Button, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, Animated } from 'react-native';
 import { SettingsContext } from '../SettingsProvider';
 import { useColors } from '../common/colors';
 import ErrorBoundary from 'react-native-error-boundary';
-import { ThemeSwitch, ThemeText, ThemeTextInput } from '../common/ThemeTypes'
+import { ThemeSwitch, ThemeText, ThemeTextInput } from '../common/ThemeTypes';
 import { ToastType, useToast } from '../common/ToastProvider';
 import Credits from '../common/Credits';
+import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
 
 const Login = () => {
     const { showToast, hideToast } = useToast();
@@ -20,6 +21,7 @@ const Login = () => {
     const [requireAuth, setRequireAuth] = useState(settings.requireAuth);
     const [isSaving, setIsSaving] = useState(false);
     const [showAdvanced, setShowAdvanced] = useState(false);
+    const [rotateAnim] = useState(new Animated.Value(0));
 
     useEffect(() => {
         if (settings) {
@@ -61,8 +63,19 @@ const Login = () => {
 
     const toggleAdvancedSettings = () => {
         setShowAdvanced(!showAdvanced);
+
+        Animated.timing(rotateAnim, {
+            toValue: showAdvanced ? 0 : 1,
+            duration: 200,
+            useNativeDriver: true,
+        }).start();
     };
 
+    const arrowRotation = rotateAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '90deg'],
+    });
+
     const styles = StyleSheet.create({
         container: {
             flex: 1,
@@ -92,16 +105,16 @@ const Login = () => {
             width: '100%',
             height: '100%',
         },
-        advancedButton: {
+        arrowContainer: {
             marginTop: 20,
-            padding: 10,
-            backgroundColor: colors.primary,
-            borderRadius: 5,
+            flexDirection: 'row',
+            alignItems: 'center',
         },
         advancedButtonText: {
-            color: 'white',
-            textAlign: 'center',
-        }
+            marginLeft: 8,
+            fontSize: 16,
+            color: colors.text,
+        },
     });
 
     return (
@@ -129,7 +142,11 @@ const Login = () => {
                     {isSaving && <ActivityIndicator size="small" color={colors.primary} style={styles.activityindicator} />}
                 </View>
 
-                <TouchableOpacity style={styles.advancedButton} onPress={toggleAdvancedSettings}>
+                {/* Touchable button with arrow */}
+                <TouchableOpacity style={styles.arrowContainer} onPress={toggleAdvancedSettings}>
+                    <Animated.View style={{ transform: [{ rotate: arrowRotation }] }}>
+                    <FontAwesome5 name="angle-right" size={24} color={colors.textAccent} />
+                    </Animated.View>
                     <Text style={styles.advancedButtonText}>
                         {showAdvanced ? 'Erweiterte Einstellungen verbergen' : 'Erweiterte Einstellungen anzeigen'}
                     </Text>