From c8bfe08d5cf2d05c2c502f281d17b24b4d0b5c4b Mon Sep 17 00:00:00 2001
From: Corentin Mors <mikescops@pixelswap.fr>
Date: Tue, 18 Jun 2024 15:52:28 +0200
Subject: [PATCH] Improve avatars spacing (#118)

---
 src/popup/components/AvatarWithTooltip.tsx |  4 ++--
 src/popup/components/IssueItem.tsx         |  2 +-
 src/popup/components/MergeRequestItem.tsx  |  2 +-
 src/popup/components/TodoItem.tsx          |  2 +-
 src/popup/style.css                        | 12 ++++--------
 5 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/popup/components/AvatarWithTooltip.tsx b/src/popup/components/AvatarWithTooltip.tsx
index 0d8b215..58ee237 100644
--- a/src/popup/components/AvatarWithTooltip.tsx
+++ b/src/popup/components/AvatarWithTooltip.tsx
@@ -22,9 +22,9 @@ export const AvatarWithTooltip = (props: Props) => {
     );
 
     return (
-        <Tooltip className={'userAvatar'} aria-label={assignee.name} direction={props.direction ?? 'w'}>
+        <Tooltip aria-label={assignee.name} direction={props.direction ?? 'w'}>
             {assignee.approved ? approvedMark : null}
-            <Avatar src={assignee.avatar_url} alt={assignee.name} square size={props.size ?? 40} sx={{ mr: 1 }} />
+            <Avatar src={assignee.avatar_url} alt={assignee.name} square size={props.size ?? 40} />
         </Tooltip>
     );
 };
diff --git a/src/popup/components/IssueItem.tsx b/src/popup/components/IssueItem.tsx
index ade9a80..9b8c380 100644
--- a/src/popup/components/IssueItem.tsx
+++ b/src/popup/components/IssueItem.tsx
@@ -86,7 +86,7 @@ export const IssueItem = ({ issue }: Props) => {
                         </Label>
                     </Box>
                 </Box>
-                <Box className={'avatarsList'}>
+                <Box display={'flex'} className={'avatarsList'}>
                     {avatars}{' '}
                     {assignees.length > 3 ? (
                         <Tooltip
diff --git a/src/popup/components/MergeRequestItem.tsx b/src/popup/components/MergeRequestItem.tsx
index 784f716..67bae7d 100644
--- a/src/popup/components/MergeRequestItem.tsx
+++ b/src/popup/components/MergeRequestItem.tsx
@@ -117,7 +117,7 @@ export const MergeRequestItem = ({ mr }: Props) => {
                         </Label>
                     </Box>
                 </Box>
-                <Box className={'avatarsList'}>
+                <Box display={'flex'} className={'avatarsList'}>
                     {avatarsUI}{' '}
                     {reviewers.length > 3 ? (
                         <Tooltip
diff --git a/src/popup/components/TodoItem.tsx b/src/popup/components/TodoItem.tsx
index d788a89..a71c330 100644
--- a/src/popup/components/TodoItem.tsx
+++ b/src/popup/components/TodoItem.tsx
@@ -74,7 +74,7 @@ export const TodoItem = (props: Props) => {
                         </Label>
                     </div>
                 </Box>
-                <Box>
+                <Box display={'flex'} sx={{ alignItems: 'center' }}>
                     <Tooltip aria-label={'Mark as done'} direction="w">
                         <Button variant="default" size="small" className={'mt-1'} onClick={setTodoAsDone}>
                             <CheckIcon />
diff --git a/src/popup/style.css b/src/popup/style.css
index 5140c2a..7ae0003 100644
--- a/src/popup/style.css
+++ b/src/popup/style.css
@@ -103,11 +103,8 @@ body {
 .avatarsList {
     max-width: 200px;
     text-align: end;
-}
-
-.userAvatar {
-    position: relative;
-    display: inline-block;
+    align-items: center;
+    column-gap: 4px;
 }
 
 .inline-avatar {
@@ -118,7 +115,7 @@ body {
 
 .statusMark {
     position: absolute;
-    right: 2px;
+    right: -2px;
     top: 25px;
     width: 20px;
     height: 20px;
@@ -135,8 +132,7 @@ body {
     vertical-align: middle;
     text-align: center;
     border-radius: 3px;
-    padding: 12px 6px;
-    margin-left: -4px;
+    padding: 10px 6px;
 }
 
 .moreAssigneesIcon:hover {