Create advanced section for telemetry checkbox (#725)

Signed-off-by: Timo K <timok@element.io>
Co-authored-by: Timo K <timok@element.io>
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>

public/locales/en-GB/app.json

@@ -14,6 +14,8 @@
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>",
   "Accept camera/microphone permissions to join the call.": "Accept camera/microphone permissions to join the call.",
   "Accept microphone permissions to join the call.": "Accept microphone permissions to join the call.",
+  "Advanced": "Advanced",
+  "Allow analytics": "Allow analytics",
   "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.": "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
   "Audio": "Audio",
   "Avatar": "Avatar",
@@ -113,6 +115,7 @@
   "This call already exists, would you like to join?": "This call already exists, would you like to join?",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>",
   "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)": "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)",
+  "This will send anonymized data (such as the duration of a call and the number of participants) to the element call team to help us optimise the application based on how it is used.": "This will send anonymized data (such as the duration of a call and the number of participants) to the element call team to help us optimise the application based on how it is used.",
   "Turn off camera": "Turn off camera",
   "Turn on camera": "Turn on camera",
   "Unmute microphone": "Unmute microphone",

src/settings/SettingsModal.tsx

@@ -24,6 +24,7 @@ import { TabContainer, TabItem } from "../tabs/Tabs";
 import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
 import { ReactComponent as VideoIcon } from "../icons/Video.svg";
 import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
+import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
 import { SelectInput } from "../input/SelectInput";
 import { useMediaHandler } from "./useMediaHandler";
 import {
@@ -120,18 +121,6 @@ export const SettingsModal = (props: Props) => {
               }
             />
           </FieldRow>
-          <FieldRow>
-            <InputField
-              id="optInAnalytics"
-              label="Allow analytics"
-              type="checkbox"
-              checked={optInAnalytics}
-              description="This will send anonymized data such as the duration of a call the and number of participants to the element call team to help us optimizing the application based on how it is used."
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                setOptInAnalytics(event.target.checked)
-              }
-            />
-          </FieldRow>
         </TabItem>
         <TabItem
           title={
@@ -155,6 +144,29 @@ export const SettingsModal = (props: Props) => {
             ))}
           </SelectInput>
         </TabItem>
+        <TabItem
+          title={
+            <>
+              <OverflowIcon width={16} height={16} />
+              <span>{t("Advanced")}</span>
+            </>
+          }
+        >
+          <FieldRow>
+            <InputField
+              id="optInAnalytics"
+              label={t("Allow analytics")}
+              type="checkbox"
+              checked={optInAnalytics}
+              description={t(
+                "This will send anonymized data (such as the duration of a call and the number of participants) to the element call team to help us optimise the application based on how it is used."
+              )}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setOptInAnalytics(event.target.checked)
+              }
+            />
+          </FieldRow>
+        </TabItem>
         <TabItem
           title={
             <>