feature: fix user admin related bugs

frontend/src/shared/components/MemberManager/Styles.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import TextareaAutosize from 'react-autosize-textarea/lib';
 import { mixin } from 'shared/utils/styles';
+import Member from '../Member';
 
 export const MemberManagerWrapper = styled.div``;
 
@@ -48,7 +49,7 @@ export const BoardMembersList = styled.ul`
 
 export const BoardMembersListItem = styled.li``;
 
-export const BoardMemberListItemContent = styled.div`
+export const BoardMemberListItemContent = styled(Member)`
   background-color: rgba(9, 30, 66, 0.04);
   padding-right: 28px;
   border-radius: 3px;
@@ -64,6 +65,11 @@ export const BoardMemberListItemContent = styled.div`
   padding: 4px;
   margin-bottom: 2px;
   color: #c2c6dc;
+
+  &:hover {
+    background-color: rgba(${props => props.theme.colors.primary});
+    color: rgba(${props => props.theme.colors.text.secondary});
+  }
 `;
 
 export const ProfileIcon = styled.div`

frontend/src/shared/components/MemberManager/index.tsx

@@ -13,6 +13,7 @@ import {
   ActiveIconWrapper,
 } from './Styles';
 import { Checkmark } from 'shared/icons';
+import Member from 'shared/components/Member';
 
 type MemberManagerProps = {
   availableMembers: Array<TaskUser>;
@@ -45,7 +46,10 @@ const MemberManager: React.FC<MemberManagerProps> = ({
             return (
               <BoardMembersListItem key={member.id}>
                 <BoardMemberListItemContent
-                  onClick={() => {
+                  member={member}
+                  showName
+                  showCheckmark={activeMembers.findIndex(m => m.id === member.id) !== -1}
+                  onCardMemberClick={() => {
                     const isActive = activeMembers.findIndex(m => m.id === member.id) !== -1;
                     if (isActive) {
                       setActiveMembers(activeMembers.filter(m => m.id !== member.id));
@@ -54,15 +58,7 @@ const MemberManager: React.FC<MemberManagerProps> = ({
                     }
                     onMemberChange(member, !isActive);
                   }}
-                >
-                  <ProfileIcon>JK</ProfileIcon>
-                  <MemberName>{member.fullName}</MemberName>
-                  {activeMembers.findIndex(m => m.id === member.id) !== -1 && (
-                    <ActiveIconWrapper>
-                      <Checkmark width={16} height={16} />
-                    </ActiveIconWrapper>
-                  )}
-                </BoardMemberListItemContent>
+                />
               </BoardMembersListItem>
             );
           })}