Reworking the wording of "away" mode (#2053)

* Initial commit

* Styles

* Prettier fixx

* fixes path

* Adjusts size

Co-authored-by: Benedicte Quimbert <b.quimbert@workadventu.re>

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -9,6 +9,8 @@
     import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
     import { audioManagerVolumeStore } from "../../Stores/AudioManagerStore";
 
+    import infoImg from "../images/info.svg";
+
     let fullscreen: boolean = localUserStore.getFullscreen();
     let notification: boolean = localUserStore.getNotification() === "granted";
     let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
@@ -179,8 +181,15 @@
     </section>
 
     <section>
-        <h3>{$LL.menu.settings.privacySettings.title()}</h3>
-        <p>{$LL.menu.settings.privacySettings.explanation()}</p>
+        <div class="tooltip">
+            <h3>
+                <span class="dotted-bottom">{$LL.menu.settings.privacySettings.title()}</span>
+                <img src={infoImg} alt="info icon" width="23px" height="23px" />
+            </h3>
+            <div class="nes-balloon away-tooltip-container from-left flex">
+                <p class="away-tooltip-text">{$LL.menu.settings.privacySettings.explanation()}</p>
+            </div>
+        </div>
         <label>
             <input type="checkbox" class="nes-checkbox is-dark" bind:checked={valueCameraPrivacySettings} />
             <span>{$LL.menu.settings.privacySettings.cameraToggle()}</span>
@@ -286,6 +295,35 @@
         .languages-switcher option {
             text-transform: capitalize;
         }
+
+        //Tooltip
+        .tooltip {
+            position: relative;
+        }
+
+        .away-tooltip-container {
+            background-color: #fff;
+            position: absolute;
+            bottom: 45%;
+            left: 55%;
+
+            visibility: hidden;
+            transition: opacity 0.3s;
+        }
+
+        .away-tooltip-text {
+            color: #000;
+        }
+    }
+
+    .dotted-bottom {
+        border-bottom: 1px dotted;
+    }
+
+    .tooltip:hover {
+        .away-tooltip-container {
+            visibility: visible;
+        }
     }
 
     @include media-breakpoint-up(md) {

front/src/Components/images/info.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40 80C62.0914 80 80 62.0914 80 40C80 17.9086 62.0914 0 40 0C17.9086 0 0 17.9086 0 40C0 62.0914 17.9086 80 40 80ZM40 73C58.2254 73 73 58.2254 73 40C73 21.7746 58.2254 7 40 7C21.7746 7 7 21.7746 7 40C7 58.2254 21.7746 73 40 73Z" fill="white"/>
+<path d="M43.7812 32.6406V58H37.1953V32.6406H43.7812ZM36.8906 26.0781C36.8906 25.0625 37.2109 24.2266 37.8516 23.5703C38.5078 22.8984 39.3828 22.5625 40.4766 22.5625C41.5859 22.5625 42.4609 22.8984 43.1016 23.5703C43.7422 24.2266 44.0625 25.0625 44.0625 26.0781C44.0625 27.0781 43.7344 27.9141 43.0781 28.5859C42.4375 29.2422 41.5781 29.5703 40.5 29.5703C39.3906 29.5703 38.5078 29.2422 37.8516 28.5859C37.2109 27.9141 36.8906 27.0781 36.8906 26.0781Z" fill="white"/>
+</svg>

front/src/i18n/de-DE/menu.ts

@@ -58,11 +58,11 @@ const menu: NonNullable<Translation["menu"]> = {
             title: "Sprache",
         },
         privacySettings: {
-            title: "Einstellungen Abwesenheitsmodus",
+            title: "Away mode", //TODO: translate
             explanation:
-                "Falls der WorkAdventure Tab nicht aktiv ist wird in den Abwesenheitsmodus umgeschaltet. Für diesen Modus kann eingestellt werden, ob die Kamera und/oder das Mikrofon deaktiviert sind solange der Tab nicht sichtbar ist.",
-            cameraToggle: "Kamera",
-            microphoneToggle: "Mikrofon",
+                'While the WorkAdventure tab in your browser is not visible. WorkAdventure switches in "away mode.', //TODO: translate
+            cameraToggle: "Keep camera active in away mode", //TODO: translate
+            microphoneToggle: "Keep camera active in away mode", //TODO: translate
         },
         save: {
             warning: "(Das Spiel wird nach dem Speichern neugestartet)",

front/src/i18n/en-US/menu.ts

@@ -58,11 +58,11 @@ const menu: BaseTranslation = {
             title: "Language",
         },
         privacySettings: {
-            title: "Away mode settings",
+            title: "Away mode",
             explanation:
-                'When the WorkAdventure tab is not visible, it switches to "away mode". In this mode, you can decide to automatically disable your webcam and/or microphone for as long as the tab stays hidden.',
-            cameraToggle: "Camera",
-            microphoneToggle: "Microphone",
+                'While the WorkAdventure tab in your browser is not visible. WorkAdventure switches to "away mode"',
+            cameraToggle: 'Keep camera active in "away mode"',
+            microphoneToggle: 'Keep microphone active in "away mode"',
         },
         save: {
             warning: "(Saving these settings will restart the game)",

front/src/i18n/fr-FR/menu.ts

@@ -58,11 +58,11 @@ const menu: NonNullable<Translation["menu"]> = {
             title: "Langage",
         },
         privacySettings: {
-            title: "Paramètres du mode absent",
+            title: "Mode absent",
             explanation:
-                "Quand l'onglet WorkAdventure n'est pas visible, vous passez en \"mode absent\". Lorsque ce mode est actif, vous pouvez décider de garder vos webcam et/ou micro désactivés tant que vous ne revenez pas sur l'onglet",
-            cameraToggle: "Camera",
-            microphoneToggle: "Microphone",
+                "Quand l'onglet WorkAdventure de votre navigateur n'est pas visible, WorkAdventure passe en \"mode absent\"",
+            cameraToggle: 'Garder la caméra activée en "mode absent"',
+            microphoneToggle: 'Garder le microphone activé en "mode absent"',
         },
         save: {
             warning: "(La sauvegarde de ces paramètres redémarre le jeu)",