feat: Strikethrough cards in closed lists

Closes #1207

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

@@ -11,7 +11,7 @@ import { Icon } from 'semantic-ui-react';
 
 import selectors from '../../../selectors';
 import markdownToText from '../../../utils/markdown-to-text';
-import { BoardViews } from '../../../constants/Enums';
+import { BoardViews, ListTypes } from '../../../constants/Enums';
 import UserAvatar from '../../users/UserAvatar';
 import LabelChip from '../../labels/LabelChip';
 
@@ -28,6 +28,7 @@ const InlineContent = React.memo(({ cardId }) => {
   );
 
   const card = useSelector((state) => selectCardById(state, cardId));
+  const list = useSelector((state) => selectListById(state, card.listId));
   const labelIds = useSelector((state) => selectLabelIdsByCardId(state, cardId));
 
   const notificationsTotal = useSelector((state) =>
@@ -35,8 +36,6 @@ const InlineContent = React.memo(({ cardId }) => {
   );
 
   const listName = useSelector((state) => {
-    const list = selectListById(state, card.listId);
-
     if (!list.name) {
       return null;
     }
@@ -55,6 +54,8 @@ const InlineContent = React.memo(({ cardId }) => {
     [card.description],
   );
 
+  const isInClosedList = list.type === ListTypes.CLOSED;
+
   return (
     <div className={styles.wrapper}>
       <span className={styles.attachments}>
@@ -88,7 +89,9 @@ const InlineContent = React.memo(({ cardId }) => {
           ))}
         </span>
       )}
-      <span className={classNames(styles.attachments, styles.name)}>
+      <span
+        className={classNames(styles.attachments, styles.name, isInClosedList && styles.nameClosed)}
+      >
         <div className={styles.hidable}>{card.name}</div>
       </span>
       {descriptionText && (

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

@@ -50,6 +50,10 @@
     max-width: 30%;
   }
 
+  .nameClosed {
+    text-decoration: line-through;
+  }
+
   .notification {
     background: #eb5a46;
     color: #fff;

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

@@ -110,6 +110,8 @@ const ProjectContent = React.memo(({ cardId }) => {
     [cardId, card.stopwatch, dispatch],
   );
 
+  const isInClosedList = list.type === ListTypes.CLOSED;
+
   const hasInformation =
     card.description ||
     card.dueDate ||
@@ -145,7 +147,9 @@ const ProjectContent = React.memo(({ cardId }) => {
 
   return (
     <div className={styles.wrapper}>
-      <div className={styles.name}>{card.name}</div>
+      <div className={classNames(styles.name, isInClosedList && styles.nameClosed)}>
+        {card.name}
+      </div>
       {coverUrl && (
         <div className={styles.coverWrapper}>
           <img src={coverUrl} alt="" className={styles.cover} />
@@ -190,7 +194,7 @@ const ProjectContent = React.memo(({ cardId }) => {
               <DueDateChip
                 value={card.dueDate}
                 size="tiny"
-                withStatus={list.type !== ListTypes.CLOSED && !isListArchiveOrTrash(list)}
+                withStatus={!isInClosedList && !isListArchiveOrTrash(list)}
               />
             </span>
           )}

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

@@ -84,6 +84,10 @@
     word-wrap: break-word;
   }
 
+  .nameClosed {
+    text-decoration: line-through;
+  }
+
   .notification {
     background: #eb5a46;
     color: #fff;

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

@@ -11,7 +11,7 @@ import { Icon } from 'semantic-ui-react';
 
 import selectors from '../../../selectors';
 import markdownToText from '../../../utils/markdown-to-text';
-import { BoardViews } from '../../../constants/Enums';
+import { BoardViews, ListTypes } from '../../../constants/Enums';
 import LabelChip from '../../labels/LabelChip';
 import CustomFieldValueChip from '../../custom-field-values/CustomFieldValueChip';
 
@@ -40,6 +40,7 @@ const StoryContent = React.memo(({ cardId }) => {
   const selectAttachmentById = useMemo(() => selectors.makeSelectAttachmentById(), []);
 
   const card = useSelector((state) => selectCardById(state, cardId));
+  const list = useSelector((state) => selectListById(state, card.listId));
   const labelIds = useSelector((state) => selectLabelIdsByCardId(state, cardId));
   const attachmentsTotal = useSelector((state) => selectAttachmentsTotalByCardId(state, cardId));
 
@@ -52,8 +53,6 @@ const StoryContent = React.memo(({ cardId }) => {
   );
 
   const listName = useSelector((state) => {
-    const list = selectListById(state, card.listId);
-
     if (!list.name) {
       return null;
     }
@@ -77,6 +76,8 @@ const StoryContent = React.memo(({ cardId }) => {
     [card.description],
   );
 
+  const isInClosedList = list.type === ListTypes.CLOSED;
+
   return (
     <>
       {coverUrl && (
@@ -106,7 +107,9 @@ const StoryContent = React.memo(({ cardId }) => {
             ))}
           </span>
         )}
-        <div className={styles.name}>{card.name}</div>
+        <div className={classNames(styles.name, isInClosedList && styles.nameClosed)}>
+          {card.name}
+        </div>
         {card.description && <div className={styles.descriptionText}>{descriptionText}</div>}
         {(attachmentsTotal > 0 || notificationsTotal > 0 || listName) && (
           <span className={styles.attachments}>

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

@@ -74,6 +74,10 @@
     word-wrap: break-word;
   }
 
+  .nameClosed {
+    text-decoration: line-through;
+  }
+
   .notification {
     background: #eb5a46;
     color: #fff;