fix: Use circle icon to display list color

client/src/components/ColorPicker/ColorPicker.jsx

@@ -29,8 +29,8 @@ const ColorPicker = React.memo(({ current, onChange, colors, allowDeletion }) =>
           />
         ))}
       </div>
-      {allowDeletion && (
+      {current && allowDeletion && (
-        <Button fluid value={undefined} onClick={onChange} content={t('action.deleteColor')} />
+        <Button fluid value={undefined} onClick={onChange} content={t('action.removeColor')} />
       )}
     </>
   );

client/src/components/List/ActionsStep.jsx

@@ -106,6 +106,11 @@ const ActionsStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={hanndleEditColorClick}>
+              {t('action.editColor', {
+                context: 'title',
+              })}
+            </Menu.Item>
             <Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
               {t('action.addCard', {
                 context: 'title',
@@ -116,11 +121,6 @@ const ActionsStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
-            <Menu.Item className={styles.menuItem} onClick={hanndleEditColorClick}>
-              {t('action.editColor', {
-                context: 'title',
-              })}
-            </Menu.Item>
             <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
               {t('action.deleteList', {
                 context: 'title',
@@ -140,7 +140,11 @@ ActionsStep.propTypes = {
   onSort: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
   onColorEdit: PropTypes.func.isRequired,
-  color: PropTypes.string.isRequired,
+  color: PropTypes.string,
+};
+
+ActionsStep.defaultProps = {
+  color: undefined,
 };
 
 export default ActionsStep;

client/src/components/List/List.jsx

@@ -122,12 +122,7 @@ const List = React.memo(
             ref={innerRef}
             className={styles.innerWrapper}
           >
-            <div
+            <div className={styles.outerWrapper}>
-              className={classNames(
-                styles.outerWrapper,
-                globalStyles[`background${upperFirst(camelCase(color))}`],
-              )}
-            >
               {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
                                            jsx-a11y/no-static-element-interactions */}
               <div
@@ -136,7 +131,16 @@ const List = React.memo(
                 onClick={handleHeaderClick}
               >
                 <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
-                  <div className={classNames(styles.headerName, color && styles.whiteText)}>
+                  <div className={styles.headerName}>
+                    {color && (
+                      <Icon
+                        name="circle"
+                        className={classNames(
+                          styles.headerNameColor,
+                          globalStyles[`color${upperFirst(camelCase(color))}`],
+                        )}
+                      />
+                    )}
                     {name}
                   </div>
                 </NameEdit>
@@ -162,16 +166,11 @@ const List = React.memo(
                 <button
                   type="button"
                   disabled={!isPersisted}
-                  className={classNames(
+                  className={styles.addCardButton}
-                    styles.addCardButton,
-                    globalStyles[`background${upperFirst(camelCase(color))}`],
-                  )}
                   onClick={handleAddCardClick}
                 >
-                  <PlusMathIcon
+                  <PlusMathIcon className={styles.addCardButtonIcon} />
-                    className={classNames(styles.addCardButtonIcon, color && styles.whiteText)}
+                  <span className={styles.addCardButtonText}>
-                  />
-                  <span className={classNames(styles.addCardButtonText, color && styles.whiteText)}>
                     {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
                   </span>
                 </button>
@@ -188,7 +187,7 @@ List.propTypes = {
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
+  color: PropTypes.string,
   isPersisted: PropTypes.bool.isRequired,
   cardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   canEdit: PropTypes.bool.isRequired,
@@ -198,4 +197,8 @@ List.propTypes = {
   onCardCreate: PropTypes.func.isRequired,
 };
 
+List.defaultProps = {
+  color: undefined,
+};
+
 export default List;

client/src/components/List/List.module.scss

@@ -127,9 +127,9 @@
     word-break: break-word;
   }
 
-  .whiteText {
+  .headerNameColor {
-    color: #ffffff;
+    line-height: 1;
-    fill: #ffffff;
+    margin-right: 6px;
   }
 
   .innerWrapper {

client/src/locales/de-DE/core.js

@@ -183,7 +183,6 @@ export default {
       deleteCard: 'Karte löschen',
       deleteCard_title: 'Karte löschen',
       deleteComment: 'Kommentar löschen',
-      deleteColor: 'Farbe löschen',
       deleteImage: 'Bild löschen',
       deleteLabel: 'Label löschen',
       deleteList: 'Liste löschen',
@@ -214,6 +213,7 @@ export default {
       moveCard_title: 'Karte bewegen',
       remove: 'Löschen',
       removeBackground: 'Hintergrund löschen',
+      removeColor: 'Farbe löschen',
       removeCover_title: 'Vorschau löschen',
       removeFromBoard: 'Vom Board entfernen',
       removeFromProject: 'Vom Projekt entfernen',

client/src/locales/en-GB/core.js

@@ -201,7 +201,6 @@ export default {
       deleteCard: 'Delete card',
       deleteCard_title: 'Delete Card',
       deleteComment: 'Delete comment',
-      deleteColor: 'Delete color',
       deleteImage: 'Delete image',
       deleteLabel: 'Delete label',
       deleteList: 'Delete list',
@@ -235,6 +234,7 @@ export default {
       moveCard_title: 'Move Card',
       remove: 'Remove',
       removeBackground: 'Remove background',
+      removeColor: 'Remove color',
       removeCover_title: 'Remove Cover',
       removeFromBoard: 'Remove from board',
       removeFromProject: 'Remove from project',

client/src/locales/en-US/core.js

@@ -197,7 +197,6 @@ export default {
       deleteCard: 'Delete card',
       deleteCard_title: 'Delete Card',
       deleteComment: 'Delete comment',
-      deleteColor: 'Delete color',
       deleteImage: 'Delete image',
       deleteLabel: 'Delete label',
       deleteList: 'Delete list',
@@ -231,6 +230,7 @@ export default {
       moveCard_title: 'Move Card',
       remove: 'Remove',
       removeBackground: 'Remove background',
+      removeColor: 'Remove color',
       removeCover_title: 'Remove Cover',
       removeFromBoard: 'Remove from board',
       removeFromProject: 'Remove from project',

client/src/styles.module.scss

@@ -384,4 +384,46 @@
   .backgroundRedCurtain {
     background: radial-gradient(circle 371px at 2.9% 14.3%, rgba(255, 0, 102, 1) 0%, rgba(80, 5, 35, 1) 100.7%) !important;
   }
+
+  /* Colors */
+
+  .colorBerryRed {
+    color: #e04556 !important;
+  }
+
+  .colorPumpkinOrange {
+    color: #f0982d !important;
+  }
+
+  .colorLagoonBlue {
+    color: #109dc0 !important;
+  }
+
+  .colorPinkTulip {
+    color: #f97394 !important;
+  }
+
+  .colorLightMud {
+    color: #c7a57b !important;
+  }
+
+  .colorOrangePeel {
+    color: #fab623 !important;
+  }
+
+  .colorBrightMoss {
+    color: #a5c261 !important;
+  }
+
+  .colorAntiqueBlue {
+    color: #6c99bb !important;
+  }
+
+  .colorDarkGranite {
+    color: #8b8680 !important;
+  }
+
+  .colorLaguneBlue {
+    color: #00b4b1 !important;
+  }
 }

server/api/controllers/lists/update.js

@@ -23,6 +23,7 @@ module.exports = {
     },
     color: {
       type: 'string',
+      isIn: List.COLORS,
       allowNull: true,
     },
   },

server/api/models/List.js

@@ -27,6 +27,7 @@ const COLORS = [
 
 module.exports = {
   SortTypes,
+  COLORS,
 
   attributes: {
     //  ╔═╗╦═╗╦╔╦╗╦╔╦╗╦╦  ╦╔═╗╔═╗
@@ -43,8 +44,8 @@ module.exports = {
     },
     color: {
       type: 'string',
-      allowNull: true,
       isIn: COLORS,
+      allowNull: true,
     },
 
     //  ╔═╗╔╦╗╔╗ ╔═╗╔╦╗╔═╗