fix: Apply disabled style to card content instead of wrapper

client/src/components/cards/Card/Card.jsx

@@ -101,18 +101,19 @@ const Card = React.memo(({ id, isInline }) => {
 
   return (
     <div
-      className={classNames(
+      className={classNames(styles.wrapper, isHighlightedAsRecent && styles.wrapperRecent, 'card')}
-        styles.wrapper,
-        list.type === ListTypes.CLOSED && styles.wrapperDisabled,
-        isHighlightedAsRecent && styles.wrapperRecent,
-        'card',
-      )}
     >
       {card.isPersisted ? (
         <>
           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
                                        jsx-a11y/no-static-element-interactions */}
-          <div className={styles.content} onClick={handleClick}>
+          <div
+            className={classNames(
+              styles.content,
+              list.type === ListTypes.CLOSED && styles.contentDisabled,
+            )}
+            onClick={handleClick}
+          >
             <Content cardId={id} />
             {colorLineNode}
           </div>
@@ -125,7 +126,12 @@ const Card = React.memo(({ id, isInline }) => {
           )}
         </>
       ) : (
-        <span className={styles.content}>
+        <span
+          className={classNames(
+            styles.content,
+            list.type === ListTypes.CLOSED && styles.contentDisabled,
+          )}
+        >
           <Content cardId={id} />
           {colorLineNode}
         </span>

client/src/components/cards/Card/Card.module.scss

@@ -43,6 +43,11 @@
     }
   }
 
+  .contentDisabled {
+    filter: saturate(0.5);
+    opacity: 0.64;
+  }
+
   .wrapper {
     background: #fff;
     border-radius: 3px;
@@ -59,11 +64,6 @@
     }
   }
 
-  .wrapperDisabled {
-    filter: saturate(0.5);
-    opacity: 0.64;
-  }
-
   .wrapperRecent:not(:hover) {
     overflow: hidden;