From 0da0946721699c1da4284dc3f1acbc7de5f113a9 Mon Sep 17 00:00:00 2001
From: "Terrence L. Jones" <terrenceljones805@gmail.com>
Date: Wed, 17 Feb 2021 13:33:18 -0600
Subject: [PATCH] Revert change that led to unshown status marks

---
 .../CheckMarkCard/CheckMarkCard.css.js          |  6 +-----
 src/components/CheckMarkCard/CheckMarkCard.jsx  | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/CheckMarkCard/CheckMarkCard.css.js b/src/components/CheckMarkCard/CheckMarkCard.css.js
index b9ef4cc19..807526893 100644
--- a/src/components/CheckMarkCard/CheckMarkCard.css.js
+++ b/src/components/CheckMarkCard/CheckMarkCard.css.js
@@ -67,16 +67,12 @@ export const MarkUI = styled('div')`
   height: 28px;
   width: 28px;
   border-radius: 4px 0px 5px;
-  opacity: 0;
+  opacity: ${({ markShown }) => (markShown ? '1' : '0')};
   transition: opacity 0.15s cubic-bezier(0.55, 0, 1, 0.45);
   will-change: opacity;
   background-color: ${({ color }) => color};
   z-index: 100;
 
-  &.card-checked {
-    opacity: 1;
-  }
-
   .mark-icon {
     color: white;
     position: absolute;
diff --git a/src/components/CheckMarkCard/CheckMarkCard.jsx b/src/components/CheckMarkCard/CheckMarkCard.jsx
index 28a472319..23517fa29 100644
--- a/src/components/CheckMarkCard/CheckMarkCard.jsx
+++ b/src/components/CheckMarkCard/CheckMarkCard.jsx
@@ -82,11 +82,16 @@ export class CheckMarkCard extends React.Component {
   renderMark = () => {
     const { withStatus } = this.props
     const { cardChecked } = this.state
-    let iconName = 'checkmark'
-    let iconSize = '24'
-    let color = getColor('blue.500')
+    let iconName
+    let iconSize
+    let color
     let tooltip
 
+    if (cardChecked) {
+      iconName = 'checkmark'
+      iconSize = '24'
+      color = getColor('blue.500')
+    }
     // If the card has a status provided, it should take precedence even if the card
     // is checked from external props for some reason
     if (withStatus) {
@@ -100,11 +105,9 @@ export class CheckMarkCard extends React.Component {
     // so we can animate the transition
     return (
       <MarkUI
-        className={classNames(
-          'c-CheckMarkCard__mark',
-          cardChecked && 'card-checked'
-        )}
+        className="c-CheckMarkCard__mark"
         color={color}
+        markShown={Boolean(iconName)}
       >
         {Boolean(tooltip) ? (
           <Tooltip