From 86a5d0956250a2138aeba4b80fab6cbea288c2d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 21 Oct 2022 09:36:10 +0100
Subject: [PATCH] Group misc UI fixes (#2208)

* fix: group actions positioning

* fix: project tags aligned to the right, fix gap

* fix: edit project user / group access button text "save"
---
 .../groups/GroupsList/GroupCard/GroupCard.tsx      | 14 +++++++-------
 .../GroupCardActions/GroupCardActions.tsx          |  1 +
 .../ProjectAccessAssign/ProjectAccessAssign.tsx    |  2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
index b9f0cc5d13..d05db751ff 100644
--- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
@@ -70,12 +70,12 @@ const StyledCounterDescription = styled('span')(({ theme }) => ({
     marginLeft: theme.spacing(1),
 }));
 
-const ProjectBadgeContainer = styled('div')(() => ({
+const ProjectBadgeContainer = styled('div')(({ theme }) => ({
     maxWidth: '50%',
-}));
-
-const StyledBadge = styled(Badge)(() => ({
-    marginRight: 0.5,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: theme.spacing(0.5),
+    flexWrap: 'wrap',
 }));
 
 interface IGroupCardProps {
@@ -122,7 +122,7 @@ export const GroupCard = ({ group }: IGroupCardProps) => {
                                         placement="bottom-end"
                                         describeChild
                                     >
-                                        <StyledBadge
+                                        <Badge
                                             onClick={e => {
                                                 e.preventDefault();
                                                 navigate(
@@ -133,7 +133,7 @@ export const GroupCard = ({ group }: IGroupCardProps) => {
                                             icon={<TopicOutlinedIcon />}
                                         >
                                             {project}
-                                        </StyledBadge>
+                                        </Badge>
                                     </Tooltip>
                                 ))}
                                 elseShow={
diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx
index c4a277bb54..a441615528 100644
--- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx
@@ -16,6 +16,7 @@ import { Link } from 'react-router-dom';
 const StyledActions = styled('div')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'center',
+    transform: 'translate3d(8px, -6px, 0)',
 }));
 
 const StyledPopover = styled(Popover)(({ theme }) => ({
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
index 4dab92db9e..26e750e103 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
@@ -404,7 +404,7 @@ export const ProjectAccessAssign = ({
                             color="primary"
                             disabled={!isValid}
                         >
-                            Assign {entityType}
+                            {edit ? 'Save' : `Assign ${entityType}`}
                         </Button>
                         <StyledCancelButton onClick={() => navigate(GO_BACK)}>
                             Cancel