From 3d4a0ff28c4cf8c6a77576b0a28c16c3c01b60f3 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Thu, 13 Aug 2020 16:56:03 -0500
Subject: [PATCH] feat: set checklist badge color to green when all items
 complete

---
 frontend/src/shared/components/Card/Styles.ts | 13 +++++++++++--
 frontend/src/shared/components/Card/index.tsx | 12 ++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/shared/components/Card/Styles.ts b/frontend/src/shared/components/Card/Styles.ts
index cca0aa4..fd0bf0f 100644
--- a/frontend/src/shared/components/Card/Styles.ts
+++ b/frontend/src/shared/components/Card/Styles.ts
@@ -2,9 +2,17 @@ import styled, { css, keyframes } from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle } from 'shared/icons';
+import { CheckCircle, CheckSquare } from 'shared/icons';
 import { RefObject } from 'react';
 
+export const ChecklistIcon = styled(CheckSquare)<{ color: 'success' | 'normal' }>`
+  ${props =>
+    props.color === 'success' &&
+    css`
+      fill: rgba(${props.theme.colors.success});
+      stroke: rgba(${props.theme.colors.success});
+    `}
+`;
 export const ClockIcon = styled(FontAwesomeIcon)``;
 
 export const EditorTextarea = styled(TextareaAutosize)`
@@ -69,11 +77,12 @@ export const DueDateCardBadge = styled(ListCardBadge)<{ isPastDue: boolean }>`
     `}
 `;
 
-export const ListCardBadgeText = styled.span`
+export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
   font-size: 12px;
   padding: 0 4px 0 6px;
   vertical-align: top;
   white-space: nowrap;
+  ${props => props.color === 'success' && `color: rgba(${props.theme.colors.success});`}
 `;
 
 export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
diff --git a/frontend/src/shared/components/Card/index.tsx b/frontend/src/shared/components/Card/index.tsx
index eb29bfe..69fadfd 100644
--- a/frontend/src/shared/components/Card/index.tsx
+++ b/frontend/src/shared/components/Card/index.tsx
@@ -6,6 +6,7 @@ import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-ico
 import {
   EditorTextarea,
   EditorContent,
+  ChecklistIcon,
   CompleteIcon,
   DescriptionBadge,
   DueDateCardBadge,
@@ -23,6 +24,7 @@ import {
   CardTitle,
   CardMembers,
 } from './Styles';
+import { CheckSquare } from 'shared/icons';
 
 type DueDate = {
   isPastDue: boolean;
@@ -229,8 +231,14 @@ const Card = React.forwardRef(
               )}
               {checklists && (
                 <ListCardBadge>
-                  <FontAwesomeIcon color="#6b778c" icon={faCheckSquare} size="xs" />
-                  <ListCardBadgeText>{`${checklists.complete}/${checklists.total}`}</ListCardBadgeText>
+                  <ChecklistIcon
+                    color={checklists.complete === checklists.total ? 'success' : 'normal'}
+                    width={8}
+                    height={8}
+                  />
+                  <ListCardBadgeText
+                    color={checklists.complete === checklists.total ? 'success' : 'normal'}
+                  >{`${checklists.complete}/${checklists.total}`}</ListCardBadgeText>
                 </ListCardBadge>
               )}
             </ListCardBadges>