Repository: inovex/scrumlr.io
Pull request #1660 (2022-05-11 12:21:28)

Refinement for the board settings menu
## Description

Update labels of the header menu options to static texts for both toggle states, and update colors to be grey if turned off
![localhost_3000_board_6bd9d1d2-b9e3-4daa-9e5a-2df181c7ac16_settings_appearance (2)](https://user-images.githubusercontent.com/36969812/167848486-9bd11a07-5867-471c-862a-e93f7b2da611.png)
![localhost_3000_board_6bd9d1d2-b9e3-4daa-9e5a-2df181c7ac16_settings_appearance (1)](https://user-images.githubusercontent.com/36969812/167848492-bd944bff-3b1e-4a87-a8a5-3ae115f728e4.png)
![localhost_3000_board_6bd9d1d2-b9e3-4daa-9e5a-2df181c7ac16_settings_appearance](https://user-images.githubusercontent.com/36969812/167848501-ace0284c-4d65-4f23-90a5-e23fe85d89f9.png)




Patch:
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 9a15897f..8e803444 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -78,14 +78,6 @@
     "copyInviteURL": "URL kopieren",
     "inviteUrlCopied": "URL wurde kopiert"
   },
-  "ShowAuthorOption": {
-    "show": "Zeige Ersteller der Kärtchen",
-    "hide": "Blende Ersteller der Kärtchen aus"
-  },
-  "ShowHiddenColumnsOption": {
-    "show": "Zeige alle Spalten",
-    "hide": "Blende versteckte Spalten aus"
-  },
   "Column": {
     "settings": "Einstellungen",
     "editName": "Name ändern",
@@ -98,10 +90,7 @@
     "addColumnRight": "Rechts einfügen",
     "hiddenColumn": "Die Spalte ist für alle Teilnehmer ausgeblendet"
   },
-  "ShowOtherUsersNotesOption": {
-    "show": "Zeige Kärtchen anderer Teilnehmer",
-    "hide": "Blende Kärtchen anderer Teilnehmer aus"
-  },
+
   "ErrorPage": {
     "navigateHome": "Startseite",
     "navigateBack": "Gehe zurück"
@@ -243,6 +232,9 @@
     "SetAccessPolicyOpen": "Sitzung veröffentlichen",
     "SetAccessPolicyPasswordProtected": "Sitzung passwort sichern",
     "DeleteBoard": "Sitzung löschen",
+    "ShowAuthorOption": "Kartenautoren anzeigen",
+    "ShowHiddenColumnsOption": "Ausgeblendete Spalten für mich anzeigen",
+    "ShowOtherUsersNotesOption": "Karten anderer Teilnehmer anzeigen",
     "generatePassword": "Erstelle zufälliges Passwort",
     "save": "speichern",
     "edit": "bearbeiten"
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index b4018181..52cb6680 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -78,14 +78,6 @@
     "copyInviteURL": "Copy Invite URL",
     "inviteUrlCopied": "Invite URL Copied"
   },
-  "ShowAuthorOption": {
-    "show": "Show authors of card",
-    "hide": "Hide authors of card"
-  },
-  "ShowHiddenColumnsOption": {
-    "show": "Show columns",
-    "hide": "Hide columns"
-  },
   "Column": {
     "settings": "Settings",
     "editName": "Change the name",
@@ -98,10 +90,6 @@
     "addColumnRight": "Add column right",
     "hiddenColumn": "Column is hidden for all participants"
   },
-  "ShowOtherUsersNotesOption": {
-    "show": "Show notes of other users",
-    "hide": "Hide notes of other users"
-  },
   "ErrorPage": {
     "navigateHome": "Home",
     "navigateBack": "Go back"
@@ -243,6 +231,9 @@
     "SetAccessPolicyOpen": "Set to open",
     "SetAccessPolicyPasswordProtected": "Set to password protected",
     "DeleteBoard": "Delete Board",
+    "ShowAuthorOption": "Show authors of cards",
+    "ShowHiddenColumnsOption": "Show hidden columns for me",
+    "ShowOtherUsersNotesOption": "Show cards of other users",
     "generatePassword": "Generate random password",
     "save": "save",
     "edit": "edit"
diff --git a/server/src/database/migrations/sql/1_initial_schema.up.sql b/server/src/database/migrations/sql/1_initial_schema.up.sql
index cfadb020..31c6bb3e 100644
--- a/server/src/database/migrations/sql/1_initial_schema.up.sql
+++ b/server/src/database/migrations/sql/1_initial_schema.up.sql
@@ -85,7 +85,7 @@ create table board_sessions
 (
     "user"       uuid         not null references users ON DELETE CASCADE,
     "board"      uuid         not null references boards ON DELETE CASCADE,
-    "show_hidden_columns" boolean not null DEFAULT false,
+    "show_hidden_columns" boolean not null DEFAULT true,
     "connected"  boolean      not null DEFAULT false,
     "ready"      boolean      not null DEFAULT false,
     raised_hand  boolean      not null DEFAULT false,
diff --git a/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionButton.scss b/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionButton.scss
index fbced299..0605437e 100644
--- a/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionButton.scss
+++ b/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionButton.scss
@@ -27,9 +27,6 @@ $header-menu-border-bottom-color: #efefef;
 }
 
 .board-option-button__label {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   color: $color-black;
   font-size: 14px;
   letter-spacing: 0.5px;
diff --git a/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionToggle.scss b/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionToggle.scss
index 21cee0ed..3998618c 100644
--- a/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionToggle.scss
+++ b/src/components/BoardHeader/HeaderMenu/BoardOptions/BoardOptionToggle.scss
@@ -1,6 +1,5 @@
 @import "constants/style";
 
-$header-menu-icon-width: 79px;
 $header-menu__item-height: 48px;
 
 $header-menu-button-height: 24px;
@@ -11,8 +10,8 @@ $header-menu-toggle-height: 3px;
 $header-menu-toggle-background-color: #c8c8c8;
 
 .board-option-toggle {
-  width: $header-menu-icon-width;
-  min-width: $header-menu-icon-width;
+  margin-left: $margin--default;
+  margin-right: $margin--default;
   height: $header-menu__item-height;
   display: inline-flex;
   justify-content: center;
@@ -46,9 +45,12 @@ $header-menu-toggle-background-color: #c8c8c8;
 }
 .board-option-toggle__switch--left::after {
   left: 0;
-  background-color: $color-backlog-blue;
+  background-color: $color-middle-gray;
 }
 .board-option-toggle__switch--right::after {
   left: $header-menu-toggle-button-width;
+  background-color: $color-backlog-blue;
+}
+[theme="dark"] .board-option-toggle__switch--right::after {
   background-color: $color-planning-pink;
 }
diff --git a/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowAuthorOption.tsx b/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowAuthorOption.tsx
index 05f9fbb2..092e61ce 100644
--- a/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowAuthorOption.tsx
+++ b/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowAuthorOption.tsx
@@ -15,7 +15,7 @@ export const ShowAuthorOption = () => {
   return (
     <BoardOption data-testid="author">
       <BoardOptionButton
-        label={showAuthors ? t("ShowAuthorOption.hide") : t("ShowAuthorOption.show")}
+        label={t("BoardSettings.ShowAuthorOption")}
         onClick={() => {
           dispatch(Actions.editBoard({showAuthors: !showAuthors}));
         }}
diff --git a/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowHiddenColumnsOption.tsx b/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowHiddenColumnsOption.tsx
index 4f1c1d1c..297fa37b 100644
--- a/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowHiddenColumnsOption.tsx
+++ b/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowHiddenColumnsOption.tsx
@@ -15,7 +15,7 @@ export const ShowHiddenColumnsOption = () => {
   return (
     <BoardOption data-testid="column">
       <BoardOptionButton
-        label={showHiddenColumns ? t("ShowHiddenColumnsOption.hide") : t("ShowHiddenColumnsOption.show")}
+        label={t("BoardSettings.ShowHiddenColumnsOption")}
         onClick={() => {
           dispatch(Actions.setShowHiddenColumns(!showHiddenColumns));
         }}
diff --git a/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowOtherUsersNotesOption.tsx b/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowOtherUsersNotesOption.tsx
index b506971d..0d4a0708 100644
--- a/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowOtherUsersNotesOption.tsx
+++ b/src/components/BoardHeader/HeaderMenu/BoardOptions/ShowOtherUsersNotesOption.tsx
@@ -15,7 +15,7 @@ export const ShowOtherUsersNotesOption = () => {
   return (
     <BoardOption data-testid="note">
       <BoardOptionButton
-        label={showNotesOfOtherParticipants ? t("ShowOtherUsersNotesOption.hide") : t("ShowOtherUsersNotesOption.show")}
+        label={t("BoardSettings.ShowOtherUsersNotesOption")}
         onClick={() => {
           dispatch(Actions.editBoard({showNotesOfOtherUsers: !showNotesOfOtherParticipants}));
         }}
diff --git a/src/components/BoardHeader/HeaderMenu/HeaderMenu.scss b/src/components/BoardHeader/HeaderMenu/HeaderMenu.scss
index ba01559e..65b3ee99 100644
--- a/src/components/BoardHeader/HeaderMenu/HeaderMenu.scss
+++ b/src/components/BoardHeader/HeaderMenu/HeaderMenu.scss
@@ -8,11 +8,11 @@ $header-menu__item-height: 48px;
 .header-menu {
   width: 288px;
   border-radius: 16px;
-  margin-top: -20px;
   box-shadow: 0 16px 32px 0 rgba(0, 87, 255, 0.24);
   overflow: hidden;
   list-style-type: none;
   padding: 0;
+  margin: 0;
 }
 [theme="dark"] {
   .header-menu {
@@ -20,3 +20,8 @@ $header-menu__item-height: 48px;
     box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.2);
   }
 }
+@media #{$tablet} {
+  .header-menu {
+    margin-top: -20px;
+  }
+}
diff --git a/src/components/SettingsDialog/BoardSettings/BoardSettings.tsx b/src/components/SettingsDialog/BoardSettings/BoardSettings.tsx
index 3b4c1677..97b0c8a5 100644
--- a/src/components/SettingsDialog/BoardSettings/BoardSettings.tsx
+++ b/src/components/SettingsDialog/BoardSettings/BoardSettings.tsx
@@ -133,7 +133,7 @@ export const BoardSettings = () => {
                 <SettingsButton
                   data-testid="author"
                   className="board-settings__show-author-button"
-                  label={state.board.showAuthors ? t("ShowAuthorOption.hide") : t("ShowAuthorOption.show")}
+                  label={t("BoardSettings.ShowAuthorOption")}
                   onClick={() => {
                     store.dispatch(Actions.editBoard({showAuthors: !state.board.showAuthors}));
                   }}
@@ -144,7 +144,7 @@ export const BoardSettings = () => {
                 <SettingsButton
                   data-testid="notes"
                   className="board-settings__show-notes-button"
-                  label={state.board.showNotesOfOtherUsers ? t("ShowOtherUsersNotesOption.hide") : t("ShowOtherUsersNotesOption.show")}
+                  label={t("BoardSettings.ShowOtherUsersNotesOption")}
                   onClick={() => store.dispatch(Actions.editBoard({showNotesOfOtherUsers: !state.board.showNotesOfOtherUsers}))}
                 >
                   <SettingsToggle active={state.board.showNotesOfOtherUsers} />
@@ -153,7 +153,7 @@ export const BoardSettings = () => {
                 <SettingsButton
                   data-testid="columns"
                   className="board-settings__show-columns-button"
-                  label={state.me?.showHiddenColumns ? t("ShowHiddenColumnsOption.hide") : t("ShowHiddenColumnsOption.show")}
+                  label={t("BoardSettings.ShowHiddenColumnsOption")}
                   onClick={() => store.dispatch(Actions.setShowHiddenColumns(!state.me?.showHiddenColumns))}
                 >
                   <SettingsToggle active={state.me?.showHiddenColumns} />
diff --git a/src/components/SettingsDialog/Components/SettingsButton.scss b/src/components/SettingsDialog/Components/SettingsButton.scss
index 6f624628..ef194630 100644
--- a/src/components/SettingsDialog/Components/SettingsButton.scss
+++ b/src/components/SettingsDialog/Components/SettingsButton.scss
@@ -32,15 +32,12 @@ $header-menu-border-bottom-color: #efefef;
 }
 
 .settings-option-button__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
   color: $color-black;
   font-size: 14px;
   letter-spacing: 0.5px;
   cursor: pointer;
   padding: 16px 24px;
   hyphens: auto;
-  white-space: nowrap;
   width: 290px;
 }
 


Test patch:
diff --git a/src/components/BoardHeader/HeaderMenu/__tests__/HeaderMenu.test.tsx b/src/components/BoardHeader/HeaderMenu/__tests__/HeaderMenu.test.tsx
index 8877ccf8..0e45b2b2 100644
--- a/src/components/BoardHeader/HeaderMenu/__tests__/HeaderMenu.test.tsx
+++ b/src/components/BoardHeader/HeaderMenu/__tests__/HeaderMenu.test.tsx
@@ -81,7 +81,7 @@ describe("<HeaderMenu/>", () => {
 
         const label = screen.getByTestId("author")!.querySelector("span")!;
         expect(label).toHaveClass("board-option-button__label");
-        expect(label.innerHTML).toEqual("Hide authors of card");
+        expect(label.innerHTML).toEqual("Show authors of cards");
       });
     });
 
@@ -105,7 +105,7 @@ describe("<HeaderMenu/>", () => {
 
         const label = screen.getByTestId("note")!.querySelector("span")!;
         expect(label).toHaveClass("board-option-button__label");
-        expect(label.innerHTML).toEqual("Hide notes of other users");
+        expect(label.innerHTML).toEqual("Show cards of other users");
       });
     });
 
@@ -129,7 +129,7 @@ describe("<HeaderMenu/>", () => {
 
         const label = screen.getByTestId("column")!.querySelector("span")!;
         expect(label).toHaveClass("board-option-button__label");
-        expect(label.innerHTML).toEqual("Show columns");
+        expect(label.innerHTML).toEqual("Show hidden columns for me");
       });
     });
   });
diff --git a/src/components/BoardHeader/HeaderMenu/__tests__/__snapshots__/HeaderMenu.test.tsx.snap b/src/components/BoardHeader/HeaderMenu/__tests__/__snapshots__/HeaderMenu.test.tsx.snap
index da1e93d0..9d119196 100644
--- a/src/components/BoardHeader/HeaderMenu/__tests__/__snapshots__/HeaderMenu.test.tsx.snap
+++ b/src/components/BoardHeader/HeaderMenu/__tests__/__snapshots__/HeaderMenu.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`<HeaderMenu/> should render correctly for moderator 1`] = `
                 <span
                   class="board-option-button__label"
                 >
-                  Hide authors of card
+                  Show authors of cards
                 </span>
               </button>
             </li>
@@ -82,7 +82,7 @@ exports[`<HeaderMenu/> should render correctly for moderator 1`] = `
                 <span
                   class="board-option-button__label"
                 >
-                  Hide notes of other users
+                  Show cards of other users
                 </span>
               </button>
             </li>
@@ -103,7 +103,7 @@ exports[`<HeaderMenu/> should render correctly for moderator 1`] = `
                 <span
                   class="board-option-button__label"
                 >
-                  Show columns
+                  Show hidden columns for me
                 </span>
               </button>
             </li>
diff --git a/src/components/SettingsDialog/BoardSettings/__tests__/__snapshots__/BoardSettings.test.tsx.snap b/src/components/SettingsDialog/BoardSettings/__tests__/__snapshots__/BoardSettings.test.tsx.snap
index 176811ea..33cb7310 100644
--- a/src/components/SettingsDialog/BoardSettings/__tests__/__snapshots__/BoardSettings.test.tsx.snap
+++ b/src/components/SettingsDialog/BoardSettings/__tests__/__snapshots__/BoardSettings.test.tsx.snap
@@ -116,7 +116,7 @@ exports[`BoardSettings should match snapshot 1`] = `
           <span
             class="settings-option-button__label"
           >
-            ShowAuthorOption.hide
+            BoardSettings.ShowAuthorOption
           </span>
           <div
             class="settings-toggle"
@@ -136,7 +136,7 @@ exports[`BoardSettings should match snapshot 1`] = `
           <span
             class="settings-option-button__label"
           >
-            ShowOtherUsersNotesOption.hide
+            BoardSettings.ShowOtherUsersNotesOption
           </span>
           <div
             class="settings-toggle"
@@ -156,7 +156,7 @@ exports[`BoardSettings should match snapshot 1`] = `
           <span
             class="settings-option-button__label"
           >
-            ShowHiddenColumnsOption.show
+            BoardSettings.ShowHiddenColumnsOption
           </span>
           <div
             class="settings-toggle"