fix: update task assignee icon styles

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

@@ -4,7 +4,14 @@ import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
 import { CheckCircle, CheckSquare } from 'shared/icons';
 import { RefObject } from 'react';
+import TaskAssignee from 'shared/components/TaskAssignee';
 
+export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
+  box-shadow: 0 0 0 2px rgba(${props => props.theme.colors.bg.secondary}),
+    inset 0 0 0 1px rgba(${props => props.theme.colors.bg.secondary}, 0.07);
+  z-index: ${props => props.zIndex};
+  position: relative;
+`;
 export const ChecklistIcon = styled(CheckSquare)<{ color: 'success' | 'normal' }>`
   ${props =>
     props.color === 'success' &&
@@ -232,6 +239,7 @@ export const CardTitle = styled.span`
 export const CardMembers = styled.div`
   float: right;
   margin: 0 -2px 4px 0;
+  display: flex;
 `;
 
 export const CompleteIcon = styled(CheckCircle)`

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

@@ -1,10 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import TaskAssignee from 'shared/components/TaskAssignee';
 import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
 import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-icons';
 import {
   EditorTextarea,
+  CardMember,
   EditorContent,
   ChecklistIcon,
   CompleteIcon,
@@ -244,10 +244,11 @@ const Card = React.forwardRef(
             </ListCardBadges>
             <CardMembers>
               {members &&
-                members.map(member => (
+                members.map((member, idx) => (
-                  <TaskAssignee
+                  <CardMember
                     key={member.id}
                     size={28}
+                    zIndex={members.length - idx}
                     member={member}
                     onMemberProfile={$target => {
                       if (onCardMemberClick) {

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

@@ -18,12 +18,10 @@ export const OwnerIcon = styled(Crown)`
 
 const TaskDetailAssignee = styled.div`
   cursor: pointer;
-  margin: 0 0 0 -2px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   position: relative;
-  float: left;
 `;
 
 export const Wrapper = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`

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

@@ -8,6 +8,8 @@ import TaskAssignee from 'shared/components/TaskAssignee';
 export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
   z-index: ${props => props.zIndex};
   position: relative;
+
+  box-shadow: 0 0 0 2px rgba(16, 22, 58), inset 0 0 0 1px rgba(16, 22, 58, 0.07);
 `;
 
 export const NavbarWrapper = styled.div`