Repository: inovex/scrumlr.io (ts)

Issue:
Proper board mode header labels & icons
Currently the board access mode is displayed above the board title and is somewhat misleading with the labels "Private board" and "Public board". Also the icons should be reworked as a lock is displayed right next to "Public board".

In the future the label should be changed to ...

- "Open board" and a fitting icon (e.g. a globe), which means that a board might be entered by the URL
- "Password protected" and a fitting icon
- "Closed board" and a fitting icon, which means that the admins will verify join attempts

If you have better ideas you can also change this suggestion.

Pull request description:
Change title and icon of the board header mode
Closes #1942 

## Changes:
- Added globe and key icon svg
- Changed translations

## Visuals: 

![Screen Shot 2022-07-14 at 10 41 31](https://user-images.githubusercontent.com/36969812/178941525-3ee9ae2e-70be-4e41-872b-2e100d792dc5.png)
![Screen Shot 2022-07-14 at 10 41 49](https://user-images.githubusercontent.com/36969812/178941520-84ce74fc-3263-4fa5-9760-20313ebd3967.png)

![Screen Shot 2022-07-14 at 10 44 33](https://user-images.githubusercontent.com/36969812/178941749-5302b8e5-5d8f-45ca-8981-a16a8cf073c1.png)
![Screen Shot 2022-07-14 at 10 41 58](https://user-images.githubusercontent.com/36969812/178941517-6326fbb3-ad34-4632-a566-208ed54e305a.png)

![Screen Shot 2022-07-14 at 10 41 10](https://user-images.githubusercontent.com/36969812/178941528-0a99d248-7e02-4a83-bfc6-8eed6a98cf3c.png)
![Screen Shot 2022-07-14 at 10 40 23](https://user-images.githubusercontent.com/36969812/178941530-26f83bbc-4baa-4889-9873-593a718cf61b.png)



Patch:
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 94e24caa..bc194670 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -18,9 +18,10 @@
     "generateRandomName": "Zufälligen Namen erstellen",
     "username": "Benutzername"
   },
-  "Board": {
-    "publicSession": "Öffentlich",
-    "privateSession": "Privat"
+  "AccessPolicy": {
+    "PUBLIC": "Offen",
+    "BY_PASSPHRASE": "Passwortgeschützt",
+    "BY_INVITE": "Geschlossen"
   },
   "BoardGuard": {
     "incorrectPassphrase": "Falsches Passwort.",
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 04446bc9..bcb0674b 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -18,9 +18,10 @@
     "generateRandomName": "Generate random name",
     "username": "Username"
   },
-  "Board": {
-    "publicSession": "Public Session",
-    "privateSession": "Private Session"
+  "AccessPolicy": {
+    "PUBLIC": "Open",
+    "BY_PASSPHRASE": "Password protected",
+    "BY_INVITE": "Closed"
   },
   "BoardGuard": {
     "incorrectPassphrase": "Incorrect passphrase used.",
diff --git a/src/assets/icon-globe.svg b/src/assets/icon-globe.svg
new file mode 100644
index 00000000..02f48ace
--- /dev/null
+++ b/src/assets/icon-globe.svg
@@ -0,0 +1,1 @@
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
diff --git a/src/assets/icon-key.svg b/src/assets/icon-key.svg
new file mode 100644
index 00000000..983cfcfc
--- /dev/null
+++ b/src/assets/icon-key.svg
@@ -0,0 +1,1 @@
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path></svg>
diff --git a/src/components/BoardHeader/BoardHeader.scss b/src/components/BoardHeader/BoardHeader.scss
index 985570b1..96484085 100644
--- a/src/components/BoardHeader/BoardHeader.scss
+++ b/src/components/BoardHeader/BoardHeader.scss
@@ -134,9 +134,10 @@ $board-header__hover-padding: $board-header__hover-padding-top-bottom $padding--
   font-size: $text-size--medium;
   font-weight: bold;
   letter-spacing: $letter-spacing--small;
-  line-height: $line-height--small;
-  margin: auto;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  width: max-content;
+  margin: 0 auto;
 }
 
 .board-header__name-container {
diff --git a/src/components/BoardHeader/BoardHeader.tsx b/src/components/BoardHeader/BoardHeader.tsx
index 2253666f..05355a6d 100644
--- a/src/components/BoardHeader/BoardHeader.tsx
+++ b/src/components/BoardHeader/BoardHeader.tsx
@@ -1,6 +1,8 @@
 import {useState, VFC} from "react";
 import {ReactComponent as LockIcon} from "assets/icon-lock.svg";
 import {ReactComponent as ShareIcon} from "assets/icon-share.svg";
+import {ReactComponent as GlobeIcon} from "assets/icon-globe.svg";
+import {ReactComponent as KeyIcon} from "assets/icon-key.svg";
 import {BoardUsers} from "components/BoardUsers";
 import store, {useAppSelector} from "store";
 import {ScrumlrLogo} from "components/ScrumlrLogo";
@@ -23,7 +25,7 @@ export const BoardHeader: VFC<BoardHeaderProps> = (props) => {
   const state = useAppSelector(
     (rootState) => ({
       name: rootState.board.data?.name,
-      accessPolicy: rootState.board.data?.accessPolicy === "PUBLIC" ? t("Board.publicSession") : t("Board.privateSession"),
+      accessPolicy: rootState.board.data?.accessPolicy,
     }),
     shallowEqual
   );
@@ -63,8 +65,14 @@ export const BoardHeader: VFC<BoardHeaderProps> = (props) => {
             tabIndex={TabIndex.BoardHeader + 1}
           >
             <div className="board-header__access-policy-status">
-              <LockIcon className="board-header__access-policy-status-icon" title={state.accessPolicy} />
-              <span>{state.accessPolicy}</span>
+              {
+                {
+                  BY_INVITE: <LockIcon className="board-header__access-policy-status-icon" />,
+                  BY_PASSPHRASE: <KeyIcon className="board-header__access-policy-status-icon" />,
+                  PUBLIC: <GlobeIcon className="board-header__access-policy-status-icon" />,
+                }[state.accessPolicy!]
+              }
+              <span>{t(`AccessPolicy.${state.accessPolicy}`)}</span>
             </div>
             <div className="board-header__name-container">
               <h1 className="board-header__name">{state.name || DEFAULT_BOARD_NAME}</h1>


Test patch:
diff --git a/src/components/BoardHeader/__tests__/BoardHeader.test.tsx b/src/components/BoardHeader/__tests__/BoardHeader.test.tsx
index 8c763dd1..4cea6d26 100644
--- a/src/components/BoardHeader/__tests__/BoardHeader.test.tsx
+++ b/src/components/BoardHeader/__tests__/BoardHeader.test.tsx
@@ -54,7 +54,7 @@ describe("Board Header", () => {
 
     test("show access policy public", () => {
       const {container} = render(createBoardHeader());
-      expect(container.querySelector(".board-header__access-policy-status")?.childNodes[1]).toHaveTextContent("Board.publicSession");
+      expect(container.querySelector(".board-header__access-policy-status")?.childNodes[1]).toHaveTextContent("AccessPolicy.PUBLIC");
     });
 
     test("show access policy private", () => {
@@ -73,7 +73,7 @@ describe("Board Header", () => {
           },
         })
       );
-      expect(container.querySelector(".board-header__access-policy-status")?.childNodes[1]).toHaveTextContent("Board.privateSession");
+      expect(container.querySelector(".board-header__access-policy-status")?.childNodes[1]).toHaveTextContent("AccessPolicy.BY_PASSPHRASE");
     });
 
     test("show confirmation-dialog after clicking scrumlr logo", () => {