Revert change that led to unshown status marks

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;

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