fixed style layout in GuestToUserView and added SignOutGuestWarning translations

front/i18n/Translations.ts

@@ -146,7 +146,8 @@ export const en = {
 	yes: 'Yes',
 	no: 'No',
 
-
+	Attention: 'Attention',
+	YouAreCurrentlyConnectedWithAGuestAccountWarning: "You are currently connected with a guest account. Disconneting will result in your data being lost. If you want to save your progress, you need to create an account.",
 };
 
 export const fr: typeof en = {
@@ -293,6 +294,8 @@ export const fr: typeof en = {
 	yes: 'Oui',
 	no: 'Non',
 
+	Attention: 'Attention',
+	YouAreCurrentlyConnectedWithAGuestAccountWarning: 'Vous êtes actuellement connecté en tant qu\'invité. La déconnexion résultera en une perte de données. Vous pouvez créer un compte pour sauvegarder vos données.',
 };
 
 export const sp: typeof en = {
@@ -442,4 +445,7 @@ export const sp: typeof en = {
 	premiumAccount: 'Cuenta premium',
 	yes: 'Sí',
 	no: 'No',
+
+	Attention: 'Atención',
+	YouAreCurrentlyConnectedWithAGuestAccountWarning: 'Actualmente estás conectado como invitado. La desconexión resultará en la pérdida de datos. Puedes crear una cuenta para guardar tus datos.',
 };

front/views/settings/GuestToUserView.tsx

@@ -22,15 +22,17 @@ const handleSubmit = async (
 const GuestToUserView = () => {
 	return (
 		<Center flex={1} justifyContent={"center"}>
-			<Heading>{translate("signUp")}</Heading>
-			<Text mt={5} mb={10}>
-				{translate("transformGuestToUserExplanations")}
-			</Text>
-			<SignUpForm
-				onSubmit={(username, password, email) =>
-					handleSubmit(username, password, email)
-				}
-			/>
+			<Center width="90%" justifyContent={"center"}>
+				<Heading>{translate("signUp")}</Heading>
+				<Text mt={5} mb={10}>
+					{translate("transformGuestToUserExplanations")}
+				</Text>
+				<SignUpForm
+					onSubmit={(username, password, email) =>
+						handleSubmit(username, password, email)
+					}
+				/>
+			</Center>
 		</Center>
 	);
 };

front/views/settings/SettingsProfileView.tsx

@@ -125,8 +125,7 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 						{
 							type: "text",
 							title: "XP",
-							description:
-								translate("XPDescription"),
+							description: translate("XPDescription"),
 							data: {
 								text: user.data.xp,
 							},
@@ -146,7 +145,7 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 							data: {
 								text: translate(user.premium ? "yes" : "no"),
 							},
-						}
+						},
 					]}
 				/>
 				<Heading fontSize="20" mt="7">
@@ -162,8 +161,10 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 						{
 							type: "toggle",
 							title: "Piano Magique",
-							description: "Fait apparaître de la lumière sur le piano pendant les parties",
-							helperText: "Vous devez posséder le module physique lumineux Chromacase pour pouvoir utiliser cette fonctionnalité",
+							description:
+								"Fait apparaître de la lumière sur le piano pendant les parties",
+							helperText:
+								"Vous devez posséder le module physique lumineux Chromacase pour pouvoir utiliser cette fonctionnalité",
 							disabled: true,
 							data: {
 								value: false,
@@ -212,22 +213,19 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 							<Popover.Arrow />
 							<Popover.Body>
 								<Heading size="md" mb={2}>
-									Attention
+									{translate("Attention")}
 								</Heading>
 								<Text>
-									Vous êtes connecté avec un compte invité temporaire, si vous
-									vous déconnectez, vous perdrez vos données.
-								</Text>
-								<Text>
-									Vous pouvez sauvegarder votre progression en transférant votre
-									compte invité vers un compte classique.
+									{translate(
+										"YouAreCurrentlyConnectedWithAGuestAccountWarning"
+									)}
 								</Text>
 								<Button.Group variant="ghost" space={2}>
 									<Button
 										onPress={() => dispatch(unsetAccessToken())}
 										colorScheme="red"
 									>
-										Déconnexion
+										{translate("signOutBtn")}
 									</Button>
 									<Button
 										onPress={() => {
@@ -235,7 +233,7 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 										}}
 										colorScheme="green"
 									>
-										Créer un compte
+										{translate("signUpBtn")}
 									</Button>
 								</Button.Group>
 							</Popover.Body>