From 234335cf61fd8b8d67beb874bf3d6b45448c8500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Mon, 15 Jan 2024 00:17:52 +0100
Subject: [PATCH] TextFormField now display error message without part of it
 being cut

---
 front/components/UI/TextFormField.tsx | 13 +++++++++----
 front/views/V2/DiscoveryView.tsx      |  6 ++----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/front/components/UI/TextFormField.tsx b/front/components/UI/TextFormField.tsx
index 1b810fd..f043fa1 100644
--- a/front/components/UI/TextFormField.tsx
+++ b/front/components/UI/TextFormField.tsx
@@ -9,7 +9,7 @@ interface TextFormFieldProps extends TextFieldBaseProps {
 	error: string | null;
 }
 
-const ERROR_HEIGHT = 20;
+const ERROR_HEIGHT = 25;
 const ERROR_PADDING_TOP = 8;
 
 const TextFormField: React.FC<TextFormFieldProps> = ({ error, style, ...textFieldBaseProps }) => {
@@ -49,7 +49,12 @@ const TextFormField: React.FC<TextFormFieldProps> = ({ error, style, ...textFiel
 				}}
 			>
 				<Warning2 size="16" color="#f7253d" variant="Bold" />
-				<Text isTruncated maxW={'100%'} style={styles.errorText}>
+				<Text
+					isTruncated
+					maxW={'100%'}
+					fontSize={styles.errorText.fontSize}
+					color={styles.errorText.color}
+				>
 					{error}
 				</Text>
 			</Animated.View>
@@ -62,14 +67,14 @@ const styles = StyleSheet.create({
 		width: '100%',
 	},
 	errorContainer: {
+		display: 'flex',
+		gap: 8,
 		flexDirection: 'row',
-		alignItems: 'center',
 		paddingLeft: 12,
 	},
 	errorText: {
 		color: '#f7253d',
 		fontSize: 12,
-		marginLeft: 8,
 	},
 });
 
diff --git a/front/views/V2/DiscoveryView.tsx b/front/views/V2/DiscoveryView.tsx
index 4a1139e..beb9fef 100644
--- a/front/views/V2/DiscoveryView.tsx
+++ b/front/views/V2/DiscoveryView.tsx
@@ -6,7 +6,7 @@ import SongCardInfo from '../../components/V2/SongCardInfo';
 import API from '../../API';
 import { useNavigation } from '../../Navigation';
 import GoldenRatio from '../../components/V2/GoldenRatio';
-import { useTranslation } from 'react-i18next';
+import { translate } from '../../i18n/i18n';
 
 const HomeView = () => {
 	const suggestionsQuery = useQuery(
@@ -17,8 +17,6 @@ const HomeView = () => {
 	const isPhone = screenSize === 'small';
 	const topSuggestions = suggestionsQuery.data?.slice(0, 4) ?? [];
 	const suggestions = suggestionsQuery.data?.slice(4) ?? [];
-	const { t } = useTranslation();
-
 	return (
 		<ScrollView>
 			<View
@@ -57,7 +55,7 @@ const HomeView = () => {
 							marginTop: 24,
 						}}
 					>
-						{t('discoverySuggestionSectionTitle')}
+						{translate('discoverySuggestionSectionTitle')}
 					</Text>
 					<View
 						style={{