From 8cde4747a7d69a0cf92ad0f9675dab306b977b08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Mon, 10 Apr 2023 22:29:00 +0200
Subject: [PATCH] added visual arrow when text is pressable

---
 front/components/GtkUI/ElementTypes.tsx      | 30 +++++++++++++++-----
 front/views/settings/SettingsProfileView.tsx | 13 +++++++++
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/front/components/GtkUI/ElementTypes.tsx b/front/components/GtkUI/ElementTypes.tsx
index fb25abe..e1ae0ab 100644
--- a/front/components/GtkUI/ElementTypes.tsx
+++ b/front/components/GtkUI/ElementTypes.tsx
@@ -1,5 +1,5 @@
-import { Select, Switch, Text } from "native-base";
-
+import { Select, Switch, Text, Icon, Row } from "native-base";
+import { MaterialIcons } from "@expo/vector-icons";
 export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown";
 
 export type DropdownOption = {
@@ -26,17 +26,33 @@ export type ElementDropdownProps = {
 };
 
 export const getElementTextNode = (
-	{ text }: ElementTextProps,
+	{ text, onPress }: ElementTextProps,
 	disabled: boolean
 ) => {
 	return (
-		<Text
+		<Row
 			style={{
-				opacity: disabled ? 0.4 : 0.6,
+				alignItems: "center",
 			}}
 		>
-			{text}
-		</Text>
+			<Text
+				style={{
+					opacity: disabled ? 0.4 : 0.6,
+				}}
+			>
+				{text}
+			</Text>
+			{onPress && (
+				<Icon
+					as={MaterialIcons}
+					name="keyboard-arrow-right"
+					size="xl"
+					style={{
+						opacity: disabled ? 0.4 : 0.6,
+					}}
+				/>
+			)}
+		</Row>
 	);
 };
 
diff --git a/front/views/settings/SettingsProfileView.tsx b/front/views/settings/SettingsProfileView.tsx
index d49a1e1..0d44d45 100644
--- a/front/views/settings/SettingsProfileView.tsx
+++ b/front/views/settings/SettingsProfileView.tsx
@@ -85,6 +85,9 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 							title: "Username",
 							data: {
 								text: user.name,
+								onPress: () => {
+									console.log("Go to username settings");
+								},
 							},
 						},
 						{
@@ -97,6 +100,16 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 								},
 							},
 						},
+					]}
+				/>
+
+				<ElementList
+					style={{
+						marginTop: 20,
+						width: "90%",
+						maxWidth: 850,
+					}}
+					elements={[
 						{
 							type: "text",
 							title: "ID",