From a9a1576f461c14c4f714814c0013cbea3bdb41bf Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Sat, 29 Aug 2020 02:53:32 -0500
Subject: [PATCH] fix: update margin on filter chips

---
 frontend/src/Projects/Project/Board/index.tsx | 18 +++++++++++++-----
 frontend/src/shared/components/Chip/index.tsx |  6 +++---
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Projects/Project/Board/index.tsx b/frontend/src/Projects/Project/Board/index.tsx
index 206ddb7..a3c9d5d 100644
--- a/frontend/src/Projects/Project/Board/index.tsx
+++ b/frontend/src/Projects/Project/Board/index.tsx
@@ -49,6 +49,10 @@ import FilterStatus from './FilterStatus';
 import FilterMeta from './FilterMeta';
 import SortPopup from './SortPopup';
 
+const FilterChip = styled(Chip)`
+  margin-right: 4px;
+`;
+
 type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
 
 const renderTaskSortingLabel = (sorting: TaskSorting) => {
@@ -71,7 +75,7 @@ const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn)
   const filterChips = [];
   if (filters.taskName) {
     filterChips.push(
-      <Chip
+      <FilterChip
         key="task-name"
         label={`Title: ${filters.taskName.name}`}
         onClose={() => onClose(TaskMeta.TITLE, 'task-name')}
@@ -81,12 +85,16 @@ const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn)
 
   if (filters.dueDate) {
     filterChips.push(
-      <Chip key="due-date" label={filters.dueDate.label} onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')} />,
+      <FilterChip
+        key="due-date"
+        label={filters.dueDate.label}
+        onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')}
+      />,
     );
   }
   for (const memberFilter of filters.members) {
     filterChips.push(
-      <Chip
+      <FilterChip
         key={`member-${memberFilter.id}`}
         label={`Member: ${memberFilter.username}`}
         onClose={() => onClose(TaskMeta.MEMBER, memberFilter.id)}
@@ -95,7 +103,7 @@ const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn)
   }
   for (const labelFilter of filters.labels) {
     filterChips.push(
-      <Chip
+      <FilterChip
         key={`label-${labelFilter.id}`}
         label={labelFilter.name === '' ? 'Label' : `Label: ${labelFilter.name}`}
         color={labelFilter.color}
@@ -126,7 +134,7 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
   font-size: 15px;
   color: rgba(${props => props.theme.colors.text.primary});
 
-  &:not(:last-child) {
+  &:not(:last-of-type) {
     margin-right: 16px;
   }
 
diff --git a/frontend/src/shared/components/Chip/index.tsx b/frontend/src/shared/components/Chip/index.tsx
index 57c79aa..133bb1b 100644
--- a/frontend/src/shared/components/Chip/index.tsx
+++ b/frontend/src/shared/components/Chip/index.tsx
@@ -11,7 +11,6 @@ const LabelText = styled.span`
 `;
 
 const Container = styled.div<{ color?: string }>`
-  margin: 0.75rem;
   min-height: 26px;
   min-width: 26px;
   font-size: 0.8rem;
@@ -53,11 +52,12 @@ type ChipProps = {
   label: string;
   onClose?: () => void;
   color?: string;
+  className?: string;
 };
 
-const Chip: React.FC<ChipProps> = ({ label, onClose, color }) => {
+const Chip: React.FC<ChipProps> = ({ label, onClose, color, className }) => {
   return (
-    <Container color={color}>
+    <Container className={className} color={color}>
       <LabelText>{label}</LabelText>
       {onClose && (
         <CloseButton onClick={() => onClose()}>