feat: Apply color to entire list instead of card bottoms

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

@@ -3,8 +3,6 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import upperFirst from 'lodash/upperFirst';
-import camelCase from 'lodash/camelCase';
 import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -25,15 +23,12 @@ import EditName from './EditName';
 import CardActionsStep from '../CardActionsStep';
 
 import styles from './Card.module.scss';
-import globalStyles from '../../../styles.module.scss';
 
 const Card = React.memo(({ id, isInline }) => {
   const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
   const selectIsCardWithIdRecent = useMemo(() => selectors.makeSelectIsCardWithIdRecent(), []);
-  const selectListById = useMemo(() => selectors.makeSelectListById(), []);
 
   const card = useSelector((state) => selectCardById(state, id));
-  const list = useSelector((state) => selectListById(state, card.listId));
 
   const isHighlightedAsRecent = useSelector((state) => {
     const { turnOffRecentCardHighlighting } = selectors.selectCurrentUser(state);
@@ -133,15 +128,6 @@ const Card = React.memo(({ id, isInline }) => {
     }
   }
 
-  const colorLineNode = list.color && (
-    <div
-      className={classNames(
-        styles.colorLine,
-        globalStyles[`background${upperFirst(camelCase(list.color))}`],
-      )}
-    />
-  );
-
   return (
     <div
       className={classNames(styles.wrapper, isHighlightedAsRecent && styles.wrapperRecent, 'card')}
@@ -162,7 +148,6 @@ const Card = React.memo(({ id, isInline }) => {
             onContextMenu={handleContextMenu}
           >
             <Content cardId={id} />
-            {colorLineNode}
           </div>
           {canUseActions && (
             <CardActionsPopup ref={actionsPopupRef} cardId={id} onNameEdit={handleNameEdit}>
@@ -175,7 +160,6 @@ const Card = React.memo(({ id, isInline }) => {
       ) : (
         <span className={classNames(styles.content, card.isClosed && styles.contentDisabled)}>
           <Content cardId={id} />
-          {colorLineNode}
         </span>
       )}
     </div>

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

@@ -29,11 +29,6 @@
     }
   }
 
-  .colorLine {
-    border-radius: 0 0 3px 3px;
-    height: 4px;
-  }
-
   .content {
     cursor: pointer;
 

client/src/components/lists/List/List.jsx

@@ -201,6 +201,7 @@ const List = React.memo(({ id, index }) => {
             className={classNames(
               styles.outerWrapper,
               isFavoritesActive && styles.outerWrapperWithFavorites,
+              list.color && globalStyles[`background${upperFirst(camelCase(list.color))}Soft`],
             )}
             onTransitionEnd={handleWrapperTransitionEnd}
           >
@@ -261,7 +262,11 @@ const List = React.memo(({ id, index }) => {
                 <button
                   type="button"
                   disabled={!list.isPersisted}
-                  className={styles.addCardButton}
+                  className={classNames(
+                    styles.addCardButton,
+                    list.color &&
+                      globalStyles[`background${upperFirst(camelCase(list.color))}Soft`],
+                  )}
                   onClick={handleAddCardClick}
                 >
                   <PlusMathIcon className={styles.addCardButtonIcon} />

client/src/styles.module.scss

@@ -374,6 +374,10 @@
     background: #6c99bb !important;
   }
 
+  .backgroundAntiqueBlueSoft {
+    background: #c7dcee !important;
+  }
+
   .backgroundEggYellow {
     background: #f9c423 !important;
   }
@@ -386,6 +390,10 @@
     background: #8b8680 !important;
   }
 
+  .backgroundDarkGraniteSoft {
+    background: #d8d6d3 !important;
+  }
+
   .backgroundFreshSalad {
     background: #ced85e !important;
   }
@@ -394,6 +402,10 @@
     background: #109dc0 !important;
   }
 
+  .backgroundLagoonBlueSoft {
+    background: #bfe3ee !important;
+  }
+
   .backgroundMidnightBlue {
     background: #0a63a0 !important;
   }
@@ -406,6 +418,10 @@
     background: #ed9223 !important;
   }
 
+  .backgroundPumpkinOrangeSoft {
+    background: #f6d2a8 !important;
+  }
+
   .backgroundLightConcrete {
     background: #afb0a4 !important;
   }
@@ -430,6 +446,10 @@
     background: #de692f !important;
   }
 
+  .backgroundOrangePeelSoft {
+    background: #f2c6ae !important;
+  }
+
   .backgroundSilverGlint {
     background: linear-gradient(160deg, #adadad, #92908d, #e2e2e2, #928e8e, #726f6e) !important;
   }
@@ -438,6 +458,10 @@
     background: #96b352 !important;
   }
 
+  .backgroundBrightMossSoft {
+    background: #d7e4b6 !important;
+  }
+
   .backgroundDeepOcean {
     background: #004c70 !important;
   }
@@ -450,6 +474,10 @@
     background: #e83855 !important;
   }
 
+  .backgroundBerryRedSoft {
+    background: #f6c6cf !important;
+  }
+
   .backgroundLightCocoa {
     background: #a85540 !important;
   }
@@ -474,6 +502,10 @@
     background: #e34f7c !important;
   }
 
+  .backgroundPinkTulipSoft {
+    background: #f2c1d3 !important;
+  }
+
   .backgroundShadyRust {
     background: #87564a !important;
   }
@@ -490,6 +522,10 @@
     background: #00858a !important;
   }
 
+  .backgroundTurquoiseSeaSoft {
+    background: #b7e1e3 !important;
+  }
+
   .backgroundLavenderFields {
     background: #b287bd !important;
   }
@@ -502,6 +538,10 @@
     background: #c7a57a !important;
   }
 
+  .backgroundLightMudSoft {
+    background: #e6d4bc !important;
+  }
+
   .backgroundGunMetal {
     background: #4f6573 !important;
   }