starting to implemnt GtkUI inspired Element list

front/components/GtkUI/ElementList.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+import { Box, Center, Column, Row, Text, Divider } from "native-base";
+
+type ElementProps = {
+	title: string;
+	icon?: React.ReactNode;
+	disabled?: boolean;
+	onPress?: () => void;
+	// node is only used if type is "custom"
+	node?: React.ReactNode;
+};
+
+const Element = ({ title, icon, disabled, onPress, node }: ElementProps) => {
+	return (
+		<Row
+			style={{
+				width: "100%",
+				height: 45,
+				padding: 15,
+				justifyContent: "space-between",
+				alignItems: "center",
+			}}
+		>
+			<Box>
+				{icon}
+				<Text>{title}</Text>
+			</Box>
+			<Box>{node}</Box>
+		</Row>
+	);
+};
+
+type ElementListProps = {
+	elements: ElementProps[];
+	style?: StyleProp<ViewStyle>;
+};
+
+const ElementList = ({ elements, style }: ElementListProps) => {
+	return (
+		<Column
+			style={{
+				borderRadius: 10,
+				boxShadow: "0px 0px 3px 0px rgba(0,0,0,0.4)",
+				...style,
+			}}
+		>
+			{(() => {
+				const elementsWithDividers = [];
+				for (let i = 0; i < elements.length; i++) {
+					elementsWithDividers.push(<Element {...elements[i]} />);
+					if (i < elements.length - 1) {
+						elementsWithDividers.push(<Divider />);
+					}
+				}
+				return elementsWithDividers;
+			})()}
+		</Column>
+	);
+};
+
+export default ElementList;

front/views/settings/SettingsProfileView.tsx

@@ -20,6 +20,7 @@ import { FontAwesome5 } from "@expo/vector-icons";
 import User from "../../models/User";
 import TextButton from "../../components/TextButton";
 import LoadingComponent from "../../components/Loading";
+import ElementList from "../../components/GtkUI/ElementList";
 
 const getInitials = (name: string) => {
 	const names = name.split(" ");
@@ -62,7 +63,10 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 					<Avatar size="2xl" source={{ uri: user.data.avatar }}>
 						{getInitials(user.name)}
 						<Avatar.Badge bg="gray.300" size={35}>
-							<IconButton size={"sm"} icon={<Icon as={FontAwesome5} name="edit" />} />
+							<IconButton
+								size={"sm"}
+								icon={<Icon as={FontAwesome5} name="edit" />}
+							/>
 						</Avatar.Badge>
 					</Avatar>
 				</Center>
@@ -91,6 +95,31 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 				<Text>Party played: {user.data.partyPlayed}</Text>
 
 				<Text>XP: {user.data.xp}</Text>
+
+				<ElementList
+					elements={[
+						{
+							title: "Username",
+							node: <Text>{user.name}</Text>,
+						},
+						{
+							title: "ID",
+							node: <Text>{user.id}</Text>,
+						},
+						{
+							title: "Email",
+							node: <Text>{user.email}</Text>,
+						},
+						{
+							title: "Party played",
+							node: <Text>{user.data.partyPlayed}</Text>,
+						},
+						{
+							title: "XP",
+							node: <Text>{user.data.xp}</Text>,
+						},
+					]}
+				/>
 			</Column>
 
 			<TextButton