Improve avatars spacing (#118)

Mikescops · Jun 18, 2024 · c8bfe08 · c8bfe08
1 parent 529371f
commit c8bfe08
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {