fix(styling): Improve the styling of user list

techmatters · Oct 12, 2023 · 4dd0951 · 4dd0951
1 parent ff27075
commit 4dd0951
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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": "[email protected]",
-    "profile_image_alt": "Profile image"
+    "profile_image_alt": "Profile image",
+    "role": {
+      "viewer": "Viewer",
+      "contributor": "Contributor",
+      "manager": "Manager"
+    }
   },
   "screens": {
     "HOME": "LandPKS",