From 13480acd7e97d8a652cfa8aad6b8a1681856f652 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Fri, 21 Aug 2020 23:37:48 -0500
Subject: [PATCH] fix(TaskDetails): update member layout

---
 frontend/src/shared/components/TaskDetails/Styles.ts | 10 +++++++++-
 frontend/src/shared/components/TaskDetails/index.tsx |  3 ++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/shared/components/TaskDetails/Styles.ts b/frontend/src/shared/components/TaskDetails/Styles.ts
index 58e94a2..bcbd84e 100644
--- a/frontend/src/shared/components/TaskDetails/Styles.ts
+++ b/frontend/src/shared/components/TaskDetails/Styles.ts
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import TextareaAutosize from 'react-autosize-textarea/lib';
 import { mixin } from 'shared/utils/styles';
 import Button from 'shared/components/Button';
+import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const TaskHeader = styled.div`
   padding: 21px 30px 0px;
@@ -385,4 +386,11 @@ export const MetaDetailTitle = styled.h3`
   overflow: hidden;
 `;
 
-export const MetaDetailContent = styled.div``;
+export const TaskMember = styled(TaskAssignee)``;
+
+export const MetaDetailContent = styled.div`
+  display: flex;
+  & ${TaskMember} {
+    margin-right: 4px;
+  }
+`;
diff --git a/frontend/src/shared/components/TaskDetails/index.tsx b/frontend/src/shared/components/TaskDetails/index.tsx
index 7151301..29a0e74 100644
--- a/frontend/src/shared/components/TaskDetails/index.tsx
+++ b/frontend/src/shared/components/TaskDetails/index.tsx
@@ -14,6 +14,7 @@ import TaskAssignee from 'shared/components/TaskAssignee';
 import moment from 'moment';
 
 import {
+  TaskMember,
   NoDueDateLabel,
   TaskDueDateButton,
   UnassignedLabel,
@@ -327,7 +328,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                 <MetaDetailContent>
                   {task.assigned &&
                     task.assigned.map(member => (
-                      <TaskAssignee key={member.id} size={32} member={member} onMemberProfile={onMemberProfile} />
+                      <TaskMember key={member.id} size={32} member={member} onMemberProfile={onMemberProfile} />
                     ))}
                   <TaskDetailsAddMemberIcon ref={$addMemberRef} onClick={() => onAddMember($addMemberRef)}>
                     <Plus size={16} color="#c2c6dc" />