Fixing error redesign CI

front/components/GtkUI/Element.tsx

@@ -70,7 +70,7 @@ export const Element = <T extends ElementProps>(props: T) => {
 				</InteractiveBase>
 				{
 					props.type === 'sectionDropdown' && dropdownValue &&
-					<View>
+					<View backgroundColor={'rgba(16,16,20,0.3)'}>
 						{
 							props.data.section.map((value, index) => (
 								<View

front/components/GtkUI/ElementList.tsx

@@ -30,7 +30,7 @@ const ElementList = ({ elements, style }: ElementListProps) => {
 			{elements.map((element, index) => (
 				<Box key={element.title}>
 					<Element {...element} />
-					{index < elements.length - 1 && <Divider />}
+					{index < elements.length - 1 && <Divider  bg="transparent" thickness="2"/>}
 				</Box>
 			))}
 		</Column>

front/components/UI/InteractiveBase.tsx

@@ -1,8 +1,6 @@
-import React, { useRef, useState } from 'react';
+import { Pressable } from 'native-base';
-import { Animated, StyleSheet, TouchableOpacity, ActivityIndicator, View, Image, StyleProp, ViewStyle } from 'react-native';
+import React, { useRef } from 'react';
-// import Ionicons from '@expo/vector-icons/Ionicons';
+import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-// import { Text, useTheme } from 'native-base'
-// import { BlurView } from '@react-native-community/blur';
 
 interface InteractiveBaseProps {
   children?: React.ReactNode;
@@ -128,7 +126,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
     ]).start();
   };
   // Mouse Up
-  const handlePressOut = async () => {
+  const handlePressOut = () => {
     Animated.parallel([
       Animated.spring(scaleAnimator, {
         toValue: 1,
@@ -157,7 +155,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
     ]).start();
 
     if (onPress && !isDisabled) {
-      await onPress();
+      onPress();
     }
   }
   // Mouse Leave
@@ -205,29 +203,16 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
         },
       ]}
     >
-        <TouchableOpacity
+        <Pressable
-          activeOpacity={1}
           disabled={isDisabled}
-          onMouseEnter={handleMouseEnter}
+          onHoverIn={handleMouseEnter}
           onPressIn={handlePressIn}
           onPressOut={handlePressOut}
-          onMouseLeave={handleMouseLeave}
+          onHoverOut={handleMouseLeave}
           style={styles.container}
         >
           {children}
-          {/* <BlurView
+      </Pressable>
-            style={{
-              width: '420px',
-              height: '50px',
-              borderRadius: 20,
-              borderWidth: 1,
-
-            }}
-            blurType="light"
-            blurAmount={20}
-            blurRadius={5}
-          /> */}
-      </TouchableOpacity>
     </Animated.View>
   );
 };

front/components/UI/TextFormField copy.tsx

@@ -1,183 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { View, TextInput, TouchableOpacity, StyleSheet, Text, Animated } from 'react-native';
-import Icon from 'react-native-vector-icons/Ionicons'; // Supposons que nous utilisons la bibliothèque Ionicons pour les icônes
-
-interface TextFormFieldProps {
-  value?: string;
-  icon?: string;
-  placeholder?: string;
-  autoComplete?:
-  | 'birthdate-day'
-  | 'birthdate-full'
-  | 'birthdate-month'
-  | 'birthdate-year'
-  | 'cc-csc'
-  | 'cc-exp'
-  | 'cc-exp-day'
-  | 'cc-exp-month'
-  | 'cc-exp-year'
-  | 'cc-number'
-  | 'email'
-  | 'gender'
-  | 'name'
-  | 'name-family'
-  | 'name-given'
-  | 'name-middle'
-  | 'name-middle-initial'
-  | 'name-prefix'
-  | 'name-suffix'
-  | 'password'
-  | 'password-new'
-  | 'postal-address'
-  | 'postal-address-country'
-  | 'postal-address-extended'
-  | 'postal-address-extended-postal-code'
-  | 'postal-address-locality'
-  | 'postal-address-region'
-  | 'postal-code'
-  | 'street-address'
-  | 'sms-otp'
-  | 'tel'
-  | 'tel-country-code'
-  | 'tel-national'
-  | 'tel-device'
-  | 'username'
-  | 'username-new'
-  | 'off'
-  | undefined;
-  isSecret?: boolean;
-  isRequired?: boolean;
-  error?: string;
-  onChangeText?: ((text: string) => void) | undefined;
-}
-
-const ERROR_HEIGHT = 20;
-const ERROR_PADDING_TOP = 8;
-
-const TextFormField: React.FC<TextFormFieldProps> = ({ value = '', placeholder = '', icon, autoComplete = 'off', isSecret = false, isRequired = false, error, ...props }) => {
-  const [isPasswordVisible, setPasswordVisible] = useState(!isSecret);
-  const [isFocused, setFocused] = useState(false);
-  const [fieldValue, setFieldValue] = useState(value);
-  const fadeAnim = React.useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
-  const heightAnim = React.useRef(new Animated.Value(0)).current; // Initial value for height: 0
-  const paddingTopAnim = React.useRef(new Animated.Value(0)).current; // Initial value for paddingTop: 0
-
-  // Update fieldValue whenever value changes
-  useEffect(() => {
-    setFieldValue(value);
-  }, [value]);
-
-  // Animate the error message
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(
-        fadeAnim,
-        {
-          toValue: error ? 1 : 0,
-          duration: 500,
-          useNativeDriver: true
-        }
-      ),
-      Animated.timing(
-        heightAnim,
-        {
-          toValue: error ? ERROR_HEIGHT : 0,
-          duration: 250,
-          useNativeDriver: false // height cannot be animated using native driver
-        }
-      ),
-      Animated.timing(
-        paddingTopAnim,
-        {
-          toValue: error ? ERROR_PADDING_TOP : 0,
-          duration: 150,
-          useNativeDriver: false // paddingTop cannot be animated using native driver
-        }
-      ),
-    ]).start();
-  }, [error]);
-
-  const handleTextChange = (text: string) => {
-    setFieldValue(text);
-    if (props.onChangeText) {
-      props.onChangeText(text);
-    }
-  };
-
-  return (
-    <View style={styles.wrapper}>
-      <View style={[styles.container, error && styles.error, isFocused && styles.containerFocused]}>
-        <View style={styles.iconContainerLeft}>
-          {icon && <Icon name={icon} size={24} color={error ? 'red' : (isFocused ? '#6075F9' : '#454562')} />}
-        </View>
-        <TextInput
-          value={fieldValue}
-          style={styles.input}
-          autoComplete={autoComplete}
-          placeholder={placeholder + (isRequired ? '*' : '')}
-          placeholderTextColor='#454562'
-          secureTextEntry={isSecret ? !isPasswordVisible : false}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          onChangeText={handleTextChange}
-          {...props}
-        />
-        {isSecret && (
-          <TouchableOpacity style={styles.iconContainerRight} onPress={() => setPasswordVisible(prevState => !prevState)}>
-            <Icon name={isPasswordVisible ? 'eye-off' : 'eye'} size={24} color='#454562' />
-          </TouchableOpacity>
-        )}
-      </View>
-      <Animated.View style={{...styles.errorContainer, opacity: fadeAnim, height: heightAnim, paddingTop: paddingTopAnim}}>
-        <Icon name="warning" size={16} color='red' />
-        <Text style={styles.errorText}>{error}</Text>
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    width: '100%',
-  },
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#22222D',
-    borderRadius: 16,
-  },
-  error: {
-  },
-  containerFocused: {
-  },
-  input: {
-    flex: 1,
-    color: '#ffffff',
-    paddingHorizontal: 16 + 24 + 16,
-    paddingVertical: 16,
-    outlineStyle: 'none',
-  },
-  iconContainerLeft: {
-    position: 'absolute',
-    left: 16,
-    zIndex: 1,
-  },
-  iconContainerRight: {
-    position: 'absolute',
-    outlineStyle: 'none',
-    right: 16,
-    zIndex: 1,
-  },
-  errorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingLeft: 40,
-  },
-  errorText: {
-    color: 'red',
-    fontSize: 12,
-    marginLeft: 8,
-  },
-});
-
-export default TextFormField;

front/components/UI/TextFormField.tsx

@@ -24,7 +24,7 @@ const TextFormField: React.FC<TextFormFieldProps> = ({ error, style, ...textFiel
         {
           toValue: error ? 1 : 0,
           duration: 150,
-          useNativeDriver: true
+          useNativeDriver: false
         }
       ),
       Animated.timing(

front/views/ProfileView.tsx

@@ -42,7 +42,7 @@ const ProfileView = () => {
 			<ProfilePictureBannerAndLevel />
 			<Box w="10%" paddingY={10} paddingLeft={5} paddingRight={50} zIndex={1}>
 				<TextButton
-					onPress={() => navigation.navigate('Settings', { screen: 'profile' })}
+					onPress={() => navigation.navigate('Settings')}
 					translate={{ translationKey: 'settingsBtn' }}
 				/>
 			</Box>

front/views/settings/SettingsView.tsx

@@ -15,7 +15,7 @@ import API from '../../API';
 import { RouteProps } from '../../Navigation';
 import { PressableAndroidRippleConfig, StyleProp, TextStyle, View, ViewStyle, useWindowDimensions } from 'react-native';
 import { TabView, SceneMap, TabBar, NavigationState, Route, SceneRendererProps, TabBarIndicatorProps, TabBarItemProps } from 'react-native-tab-view';
-import { HeartEdit, Star1, UserEdit, Notification, SecurityUser, Music, Icon } from 'iconsax-react-native';
+import { HeartEdit, Star1, UserEdit, Notification, SecurityUser, Music, FolderCross } from 'iconsax-react-native';
 import { Scene, Event } from 'react-native-tab-view/lib/typescript/src/types';
 import { LinearGradient } from 'expo-linear-gradient';
 import PremiumSettings from './SettingsPremiumView';
@@ -37,17 +37,36 @@ const renderScene = SceneMap({
 	piano: PianoSettingsView,
 });
 
+const getTabData = (key: string) => {
+		switch (key){
+		case 'profile':
+			return { index: 0, icon: UserEdit };
+		case 'premium':
+			return { index: 1, icon: Star1 };
+		case 'preferences':
+			return { index: 2, icon: HeartEdit };
+		case 'notifications':
+			return { index: 3, icon: Notification };
+		case 'privacy':
+			return { index: 4, icon: SecurityUser };
+		case 'piano':
+			return { index: 5, icon: Music };
+		default:
+			return { index: 6, icon: FolderCross };
+	}
+}
+
 const SetttingsNavigator = () => {
 	const layout = useWindowDimensions();
 
 	const [index, setIndex] = React.useState(0);
-	const [routes] = React.useState([
+	const [routes] = React.useState<Route[]>([
-		{index: 0, key: 'profile', title: 'Profile', icon: UserEdit},
+		{key: 'profile', title: 'Profile'},
-		{index: 1, key: 'premium', title: 'Premium', icon: Star1},
+		{key: 'premium', title: 'Premium'},
-		{index: 2, key: 'preferences', title: 'Preferences', icon: HeartEdit},
+		{key: 'preferences', title: 'Preferences'},
-		{index: 3, key: 'notifications', title: 'Notifications', icon: Notification},
+		{key: 'notifications', title: 'Notifications'},
-		{index: 4, key: 'privacy', title: 'Privacy', icon: SecurityUser},
+		{key: 'privacy', title: 'Privacy'},
-		{index: 5, key: 'piano', title: 'Piano', icon: Music},
+		{key: 'piano', title: 'Piano'},
 	]);
 
 	const renderTabBar = (props: JSX.IntrinsicAttributes & SceneRendererProps & { navigationState: NavigationState<Route>; scrollEnabled?: boolean | undefined; bounces?: boolean | undefined; activeColor?: string | undefined; inactiveColor?: string | undefined; pressColor?: string | undefined; pressOpacity?: number | undefined; getLabelText?: ((scene: Scene<Route>) => string | undefined) | undefined; getAccessible?: ((scene: Scene<Route>) => boolean | undefined) | undefined; getAccessibilityLabel?: ((scene: Scene<Route>) => string | undefined) | undefined; getTestID?: ((scene: Scene<Route>) => string | undefined) | undefined; renderLabel?: ((scene: Scene<Route> & { focused: boolean; color: string; }) => React.ReactNode) | undefined; renderIcon?: ((scene: Scene<Route> & { focused: boolean; color: string; }) => React.ReactNode) | undefined; renderBadge?: ((scene: Scene<Route>) => React.ReactNode) | undefined; renderIndicator?: ((props: TabBarIndicatorProps<Route>) => React.ReactNode) | undefined; renderTabBarItem?: ((props: TabBarItemProps<Route> & { key: string; }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined; onTabPress?: ((scene: Scene<Route> & Event) => void) | undefined; onTabLongPress?: ((scene: Scene<Route>) => void) | undefined; tabStyle?: StyleProp<ViewStyle>; indicatorStyle?: StyleProp<ViewStyle>; indicatorContainerStyle?: StyleProp<ViewStyle>; labelStyle?: StyleProp<TextStyle>; contentContainerStyle?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>; gap?: number | undefined; testID?: string | undefined; android_ripple?: PressableAndroidRippleConfig | undefined; }) => (
@@ -59,10 +78,10 @@ const SetttingsNavigator = () => {
 				focused: boolean;
 				color: string;
 			}) => {
-				const MyIcon: Icon = scene.route?.icon as unknown as Icon;
+				const tabHeader = getTabData(scene.route!.key);
-				return scene.route?.index == index ?
+				return tabHeader.index == index ?
-					<MyIcon size="18" color="#6075F9" variant='Bold'/>
+					<tabHeader.icon size="18" color="#6075F9" variant='Bold'/>
-					: <MyIcon size="18" color="#6075F9"/>
+					: <tabHeader.icon size="18" color="#6075F9"/>
 			}}
 			renderLabel={({ route, focused, color }) => (
 				layout.width > 750 ?