From 4dd09510432f85bd3b84cf21c50d8c5d9195f754 Mon Sep 17 00:00:00 2001
From: David Code Howard <david@techmatters.org>
Date: Wed, 11 Oct 2023 16:44:01 -0400
Subject: [PATCH] fix(styling): Improve the styling of user list

---
 dev-client/src/components/common/UserList.tsx | 15 ++++++++-------
 dev-client/src/translations/en.json           | 10 ++++++++--
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/dev-client/src/components/common/UserList.tsx b/dev-client/src/components/common/UserList.tsx
index 9223003ec..78bbf5777 100644
--- a/dev-client/src/components/common/UserList.tsx
+++ b/dev-client/src/components/common/UserList.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   Center,
+  Divider,
   FlatList,
   HStack,
   Image,
@@ -60,13 +61,12 @@ function UserItem({membership, user, currentUserId, onPress}: ItemProps) {
           <Text flex={3}>{userName}</Text>
           <Box>
             <Badge
+              variant="chip"
               bg="primary.lightest"
-              _text={{color: 'text.primary'}}
-              borderRadius={14}
-              flex={0}
-              ml={6}>
-              {membership.userRole.charAt(0) +
-                membership.userRole.slice(1).toLowerCase()}
+              py="5px"
+              px="10px"
+              _text={{color: 'text.primary'}}>
+              {t('general.role.' + membership.userRole)}
             </Badge>
           </Box>
         </HStack>
@@ -79,7 +79,7 @@ function UserItem({membership, user, currentUserId, onPress}: ItemProps) {
               _text={{color: 'error.main'}}
               bgColor="grey.200"
               onPress={onPress}>
-              LEAVE PROJECT
+              {t('projects.team.leave_project')}
             </Button>
           </Center>
         )}
@@ -105,6 +105,7 @@ export default function UserList({
         />
       )}
       keyExtractor={([id, _]) => id}
+      ItemSeparatorComponent={Divider}
     />
   );
 }
diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json
index f7f5f5c67..c1427a3b2 100644
--- a/dev-client/src/translations/en.json
+++ b/dev-client/src/translations/en.json
@@ -119,7 +119,8 @@
       }
     },
     "team": {
-      "add": "Add team members"
+      "add": "Add team members",
+      "leave_project": "LEAVE PROJECT"
     },
     "edit": {
       "inputHeader": "General Project Settings"
@@ -192,7 +193,12 @@
     "details": "Details",
     "apply": "Apply",
     "example_email": "name@domain.com",
-    "profile_image_alt": "Profile image"
+    "profile_image_alt": "Profile image",
+    "role": {
+      "viewer": "Viewer",
+      "contributor": "Contributor",
+      "manager": "Manager"
+    }
   },
   "screens": {
     "HOME": "LandPKS",