From 5e120873ff001c464edc5544ffaf63b5322f401f Mon Sep 17 00:00:00 2001
From: Mohammed Sameer PV <64373702+pvsameerpvs@users.noreply.github.com>
Date: Mon, 5 Feb 2024 15:26:22 +0530
Subject: [PATCH] =?UTF-8?q?fix:Resolve=20alignment=20issues=20in=20=20Prof?=
=?UTF-8?q?ile=20Screen=20and=20alignment=20for=20dis=E2=80=A6=20(#9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* fix:Resolve alignment issues in Profile Screen and alignment for display of name
* fix: Align profile name properly
---
.../src/modules/profile/ProfileView.tsx | 68 ++++++++++++-------
1 file changed, 42 insertions(+), 26 deletions(-)
diff --git a/audire/audire-mobile-app/src/modules/profile/ProfileView.tsx b/audire/audire-mobile-app/src/modules/profile/ProfileView.tsx
index f2f1935..1f6922e 100644
--- a/audire/audire-mobile-app/src/modules/profile/ProfileView.tsx
+++ b/audire/audire-mobile-app/src/modules/profile/ProfileView.tsx
@@ -51,20 +51,25 @@ const ProfileView = () => {
</Avatar>
<Center>
- <Text fontWeight="bold" color="black" fontSize="$2xl">
- {firstName}
- </Text>
- <Text fontWeight="bold" color="black" fontSize="$2xl">
- {lastName}
+ <Text
+ fontWeight="bold"
+ color="black"
+ fontSize="$xl"
+ numberOfLines={2}
+ textAlign="center"
+ >
+ {firstName} {lastName}
</Text>
</Center>
</Center>
- <Center display="flex" flexDirection="column" gap="$3">
- <Box display="flex" flexDirection="row" gap="$3">
- <Text>First Name:</Text>
+ <Center display="flex" flexDirection="column" gap="$4" px="$12">
+ <Center display="flex" flexDirection="column" alignItems="flex-start">
+ <Text fontWeight="bold" fontSize="$xs">
+ First Name
+ </Text>
<Input
- w={200}
+ w="$full"
variant="outline"
size="sm"
isDisabled={false}
@@ -78,11 +83,13 @@ const ProfileView = () => {
onChangeText={(text) => setNewFirstName(text)}
/>
</Input>
- </Box>
- <Box display="flex" flexDirection="row" gap="$3">
- <Text> Last Name:</Text>
+ </Center>
+ <Center display="flex" flexDirection="column" alignItems="flex-start">
+ <Text fontWeight="bold" fontSize="$xs">
+ Last Name
+ </Text>
<Input
- w={200}
+ w="$full"
variant="outline"
size="sm"
isDisabled={false}
@@ -96,11 +103,14 @@ const ProfileView = () => {
placeholder={formattedLastName}
/>
</Input>
- </Box>
- <Box display="flex" flexDirection="row" gap="$9">
- <Text> Mobile:</Text>
+ </Center>
+ <Center display="flex" flexDirection="column" alignItems="flex-start">
+ <Text fontWeight="bold" fontSize="$xs">
+ {' '}
+ Mobile
+ </Text>
<Input
- w={200}
+ w="$full"
variant="outline"
size="sm"
isDisabled={false}
@@ -109,12 +119,15 @@ const ProfileView = () => {
>
<InputField placeholder={formattedmobile} />
</Input>
- </Box>
+ </Center>
- <Box display="flex" flexDirection="row" gap="$12">
- <Text> Email:</Text>
+ <Center display="flex" flexDirection="column" alignItems="flex-start">
+ <Text fontWeight="bold" fontSize="$xs">
+ {' '}
+ Email
+ </Text>
<Input
- w={200}
+ w="$full"
variant="outline"
size="sm"
isDisabled={false}
@@ -123,11 +136,14 @@ const ProfileView = () => {
>
<InputField lineHeight={22} />
</Input>
- </Box>
- <Box display="flex" flexDirection="row" gap="$16">
- <Text> City:</Text>
+ </Center>
+ <Center display="flex" flexDirection="column" alignItems="flex-start">
+ <Text fontWeight="bold" fontSize="$xs">
+ {' '}
+ City
+ </Text>
<Input
- w={200}
+ w="$full"
variant="outline"
size="sm"
isDisabled={false}
@@ -136,7 +152,7 @@ const ProfileView = () => {
>
<InputField lineHeight={22} />
</Input>
- </Box>
+ </Center>
</Center>
<TouchableOpacity>
<Button