Repository: inovex/scrumlr.io
Pull request #2475 (2022-12-08 09:32:06)

improvement: increase distinct look of hidden columns
## Description

After it is repeatedly noted that it is not quite clear whether a column is hidden or not, I've tried to make some improvements.

## Changelog
- Add crosshatched background to hidden columns
- Change the color from the hidden icon from grey to red

## (Optional) Visual Changes


![Screen Shot 2022-12-08 at 10 22 32](https://user-images.githubusercontent.com/36969812/206410051-1e3fda10-15d6-49a5-a3f1-cd42c2b3fe08.png)
![Screen Shot 2022-12-08 at 10 22 25](https://user-images.githubusercontent.com/36969812/206410061-90348e90-4b78-45ca-8646-b34d8b965f67.png)
![Screen Shot 2022-12-08 at 10 21 57](https://user-images.githubusercontent.com/36969812/206410064-86ad0a52-0416-4c44-87d9-386753bc6045.png)
![Screen Shot 2022-12-08 at 10 21 41](https://user-images.githubusercontent.com/36969812/206410069-3c1a99bc-9ab6-4b8e-8cbb-672a079e39c3.png)



Patch:
diff --git a/src/components/Column/Column.scss b/src/components/Column/Column.scss
index 7d9de366..13e06cc2 100644
--- a/src/components/Column/Column.scss
+++ b/src/components/Column/Column.scss
@@ -27,6 +27,14 @@
     background-color: $color-dark-two;
   }
 }
+.column--hidden {
+  background-image: repeating-linear-gradient(45deg, $color-white-one, $color-white-one 20px, $color-white-two 20px, $color-white-two 40px);
+}
+[theme="dark"] {
+  .column--hidden {
+    background-image: repeating-linear-gradient(45deg, $color-dark-one, $color-dark-one 20px, $color-dark-two 20px, $color-dark-two 40px);
+  }
+}
 
 .column__content {
   max-height: 100%;
@@ -172,7 +180,7 @@
   min-width: $icon--medium;
   min-height: $icon--medium;
   margin: 0 $margin--small 0 0;
-  color: $color-middle-gray;
+  color: $color-warning-red;
   cursor: pointer;
   transition: all 0.08s ease-out;
 }
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
index 53fcbc6e..f5dee764 100644
--- a/src/components/Column/Column.tsx
+++ b/src/components/Column/Column.tsx
@@ -171,7 +171,10 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
   );
 
   return (
-    <section className={classNames("column", {"column__moderation-isActive": isModerator && state.moderating}, getColorClassName(color))} ref={columnRef}>
+    <section
+      className={classNames("column", {"column--hidden": !visible}, {"column__moderation-isActive": isModerator && state.moderating}, getColorClassName(color))}
+      ref={columnRef}
+    >
       <div className="column__content">
         <div className="column__header">
           <NoteInput


Test patch:
diff --git a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
index 93706e84..0c9d44db 100644
--- a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
+++ b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Column should have correct style show column with correct style 1`] = `
 <section
-  class="column accent-color__planning-pink"
+  class="column column--hidden accent-color__planning-pink"
 >
   <div
     class="column__content"