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) {